/* ================================
   MyHomeImproved - Referral App
   styles.css (CLEAN LIGHT THEME)
   Namespace: .app-ref
   ================================ */

/* Reset & base */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body.app-ref {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", Ubuntu, Cantarell, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: ffffff; /* fondo claro */
  color: #111827;      /* texto oscuro */
  color-scheme: light; /* forzar claro */
}

/* Evitar apariencia nativa en Android */
.app-ref button,
.app-ref input[type="submit"],
.app-ref .btn { -webkit-appearance: none; appearance: none; }

/* --------- Variables (tema claro) --------- */
:root{
  --color-bg: #f7f8fb;
  --color-card: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-muted: #4b5563;

  --color-primary: #0f6bd7;
  --color-primary-contrast: #ffffff;

  --color-success:#16a34a;
  --color-warning:#f59e0b;
  --color-danger: #ef4444;

  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --radius: 16px;
}

/* --------- Layout --------- */
.app-ref .container { max-width: 980px; margin: 28px auto; padding: 0 16px; }

.app-ref .card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.2vw, 28px);
}

.app-ref h1, .app-ref h2, .app-ref h3 { color: var(--color-text); margin: 0 0 12px; letter-spacing:.2px; }
.app-ref p { color: var(--color-muted); line-height: 1.6; margin: 0 0 12px; }

/* --------- Formulario --------- */
.app-ref .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.app-ref .form-grid .full { grid-column:1 / -1; }

.app-ref label { font-size:14px; color:var(--color-text); display:block; margin-bottom:6px; }

.app-ref input[type="text"],
.app-ref input[type="email"],
.app-ref input[type="tel"],
.app-ref select,
.app-ref textarea{
  width:100%;
  border:1px solid var(--color-border);
  background:#ffffff;                 /* campo blanco */
  color:var(--color-text);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.app-ref input::placeholder, .app-ref textarea::placeholder{ color:#9ca3af; }
.app-ref input:focus, .app-ref select:focus, .app-ref textarea:focus{
  border-color: rgba(15,107,215,.55);
  box-shadow: 0 0 0 3px rgba(15,107,215,.25);
}

/* Acciones */
.app-ref .actions{ display:flex; gap:12px; justify-content:flex-end; align-items:center; margin-top:12px; }

/* --------- Botones --------- */
.app-ref .btn,
.app-ref button,
.app-ref input[type="submit"],
.app-ref a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; border-radius:999px; padding:12px 18px;
  text-decoration:none; cursor:pointer; border:none;
}

.app-ref .btn-primary,
.app-ref button.btn-primary,
.app-ref input[type="submit"].btn-primary,
.app-ref a.btn-primary{
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
  box-shadow: 0 6px 16px rgba(15,107,215,.20) !important;
}
.app-ref .btn-primary:hover{ opacity:.95; }
.app-ref .btn-primary:active{ transform:translateY(1px); box-shadow:0 2px 10px rgba(15,107,215,.18) !important; }
.app-ref .btn-primary:focus-visible{ outline:3px solid rgba(15,107,215,.35); outline-offset:2px; }

.app-ref .btn-secondary{
  background:#eef2f7 !important; color:#1f2937 !important; border:1px solid var(--color-border) !important;
}

/* --------- Alertas --------- */
.app-ref .alert{ border-radius:12px; padding:12px 14px; border:1px solid var(--color-border); background:#ffffff; color:var(--color-text); }
.app-ref .alert-success{ border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.08); }
.app-ref .alert-warning{ border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
.app-ref .alert-danger{  border-color:rgba(239,68,68,.35);  background:rgba(239,68,68,.08); }

/* --------- Links --------- */
.app-ref a{ color:#0f6bd7; text-decoration:none; }
.app-ref a:hover{ text-decoration:underline; }

/* --------- Tablas (dashboard claro) --------- */
.app-ref table,
.app-ref .table{
  width:100%; border-collapse:collapse;
  border:1px solid var(--color-border);
  background:#ffffff; border-radius:12px; overflow:hidden;
  font-size:15px; color:#111827;
}
.app-ref thead tr{ background:#f3f4f6; color:#111827; text-align:left; font-weight:600; }
.app-ref th, .app-ref td{ padding:12px 14px; border-bottom:1px solid #e5e7eb; }
.app-ref tbody tr:last-child td{ border-bottom:none; }
.app-ref tbody tr:hover td{ background:#f9fafb; }

/* --------- Utilidades --------- */
.app-ref .mt-0{ margin-top:0 !important; }
.app-ref .mt-1{ margin-top:8px !important; }
.app-ref .mt-2{ margin-top:12px !important; }
.app-ref .mt-3{ margin-top:18px !important; }
.app-ref .mb-0{ margin-bottom:0 !important; }
.app-ref .mb-1{ margin-bottom:8px !important; }
.app-ref .mb-2{ margin-bottom:12px !important; }
.app-ref .mb-3{ margin-bottom:18px !important; }
.app-ref .text-center{ text-align:center !important; }
.app-ref .full{ grid-column:1 / -1; }

/* --------- Responsive (plegables/Android) --------- */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .app-ref .container{ padding:0 14px; }
  .app-ref .form-grid{ grid-template-columns:1fr; }
  .app-ref .btn, .app-ref button, .app-ref input[type="submit"], .app-ref a.btn{ width:100% !important; }
  .app-ref .actions{ flex-direction:column; align-items:stretch; gap:12px; }
}

/* Accesibilidad */
.app-ref :focus-visible{ outline:3px solid rgba(119,180,255,.35); outline-offset:2px; }