/* ============================================================
   PROGARO — Sistema de diseño compartido
   Mismos tokens y lenguaje visual que inicio.html.
   Lo usan prueba.php, prueba_flujo.php y admin.php.
   ============================================================ */

:root {
  --navy-950:#0F2438; --navy-900:#14314F; --navy-800:#1B3A5C; --navy-700:#274C74;
  --cream:#FBF8F3; --cream-2:#F5F1E9; --sand:#EFE7D8; --sand-line:#E4DBC9;
  --orange:#E8722C; --orange-dark:#C1571A; --orange-soft:#FBDCC3; --orange-tint:#FFF3E9;
  --green:#2E9E4F; --green-soft:#E8F6EC; --red:#C0392B; --red-soft:#FDECEA;
  --amber:#C99400; --amber-soft:#FFFBEA; --amber-line:#F0E2A0;
  --ink:#23303D; --ink-soft:#5B6B7A; --ink-faint:#8B98A5;

  --marca:"Poppins", "Century Gothic", system-ui, sans-serif;
  --display:"Fraunces", Georgia, serif;
  --body:"Inter", system-ui, -apple-system, sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --sh-card:0 1px 2px rgba(20,49,79,.04), 0 8px 20px -12px rgba(20,49,79,.12);
  --sh-pop:0 10px 30px -8px rgba(15,36,56,.35);
}

* { box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; }
body {
  font-family:var(--body); background:var(--cream-2); color:var(--ink);
  -webkit-font-smoothing:antialiased; margin:0;
  /* dvh se ajusta cuando aparece la barra de Safari en iPhone; el vh
     queda de respaldo para navegadores que no lo soporten. */
  min-height:100vh; min-height:100dvh;
}
h1,h2,h3,h4 { font-family:var(--display); font-weight:600; color:var(--navy-900); margin:0; }
a { color:var(--orange-dark); }

/* ---------- íconos ---------- */
.ico { display:inline-block; vertical-align:-0.18em; flex:none; }
.ico-txt { display:inline-flex; align-items:center; gap:0.4rem; }

/* ---------- superficies ---------- */
.card {
  background:#fff; border-radius:var(--r-lg); padding:1.35rem 1.3rem;
  margin-bottom:1rem; box-shadow:var(--sh-card); border:1px solid rgba(20,49,79,.045);
}
.card h3 { font-size:1.05rem; display:flex; align-items:center; gap:0.5rem; margin-bottom:0.9rem; }

/* ---------- formularios ---------- */
label { display:block; font-size:0.78rem; font-weight:600; color:var(--ink-soft);
        margin:0.85rem 0 0.35rem; letter-spacing:.01em; }
label:first-child { margin-top:0; }
input, select, textarea {
  width:100%; padding:0.72rem 0.85rem; border:1.5px solid var(--sand-line);
  border-radius:var(--r-sm); font-size:0.94rem; font-family:var(--body);
  background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-tint);
}
input::placeholder, textarea::placeholder { color:var(--ink-faint); }
input[type="file"] { padding:0.55rem 0.6rem; font-size:0.85rem; }
.row { display:flex; gap:0.7rem; flex-wrap:wrap; }
.row > * { flex:1; min-width:120px; }

/* ---------- botones ---------- */
button {
  font-family:var(--body); font-weight:700; font-size:0.92rem; border:none;
  border-radius:var(--r-sm); cursor:pointer; width:100%; padding:0.78rem 1rem; margin-top:0.9rem;
  background:var(--navy-800); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
  transition:transform .1s, box-shadow .15s, background .15s, opacity .15s;
}
button:active { transform:scale(.985); }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
button.naranja { background:var(--orange); box-shadow:0 8px 18px -8px rgba(232,114,44,.55); }
button.naranja:hover { background:var(--orange-dark); }
button.gris { background:#F1EEE7; color:var(--ink-soft); box-shadow:none; }
button.gris:hover { background:#E6E2D8; }
button.verde { background:var(--green) !important; }
button.amarillo { background:var(--amber) !important; }
button.rojo { background:var(--red) !important; }
button.blanco { background:#fff !important; color:var(--navy-900); box-shadow:var(--sh-card); }
button.chico {
  width:auto; margin:0.6rem 0 0; padding:0.45rem 0.85rem; font-size:0.8rem;
  background:#F1EEE7; color:var(--navy-800); box-shadow:none;
}
button.chico:hover { background:#E6E2D8; }

/* ---------- mensajes ---------- */
.msg { margin-top:0.7rem; padding:0.65rem 0.85rem; border-radius:var(--r-sm);
       font-size:0.86rem; line-height:1.5; white-space:pre-wrap;
       display:flex; align-items:flex-start; gap:0.45rem; }
.ok  { background:var(--green-soft); color:#1c5c2c; }
.err { background:var(--red-soft); color:var(--red); }
.aviso { background:var(--orange-tint); color:#8a4a1c; border-radius:var(--r-sm);
         padding:0.75rem 0.9rem; font-size:0.86rem; line-height:1.5; margin-bottom:0.9rem; }

/* ---------- chips de estado ---------- */
.chip { display:inline-flex; align-items:center; gap:0.3rem; padding:0.15rem 0.6rem;
        border-radius:var(--r-full); font-size:0.75rem; font-weight:700; }
.chip-ok    { background:var(--green-soft); color:#1c5c2c; }
.chip-warn  { background:var(--amber-soft); color:#8a6d1c; }
.chip-err   { background:var(--red-soft); color:var(--red); }
.chip-info  { background:#EEF4FA; color:var(--navy-800); }
.chip-gris  { background:#F1EEE7; color:var(--ink-soft); }

/* ---------- modales ---------- */
.modal { position:fixed; inset:0; background:rgba(15,36,56,.55); backdrop-filter:blur(2px);
         z-index:1000; align-items:flex-start; justify-content:center; padding:2rem 1rem;
         overflow-y:auto; }
.modal-caja { background:#fff; border-radius:var(--r-lg); max-width:480px; width:100%;
              padding:1.5rem; position:relative; box-shadow:var(--sh-pop); }
.cerrar { position:absolute; top:0.7rem; right:0.7rem; width:auto; margin:0;
          background:#F1EEE7 !important; color:var(--ink-soft); padding:0.35rem 0.5rem;
          box-shadow:none; }

/* ---------- tablas (admin) ---------- */
table { width:100%; border-collapse:collapse; font-size:0.86rem; }
th { text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em;
     color:var(--ink-faint); font-weight:700; padding:0.6rem 0.7rem;
     border-bottom:1.5px solid var(--sand-line); }
td { padding:0.7rem; border-bottom:1px solid var(--sand-line); vertical-align:top; }
tbody tr:hover { background:var(--cream); }

pre { background:#F5F3ED; padding:0.7rem; border-radius:var(--r-sm); overflow:auto; font-size:0.78rem; }

/* ---------- barra superior de marca ---------- */
.barra-sup {
  display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
  padding:0.9rem 0 1.1rem; flex-wrap:wrap;
}
.marca { display:flex; align-items:center; gap:0.55rem; text-decoration:none; }
.marca img { display:block; }
.marca span {
  /* Tipografía del logo real: geométrica, mayúsculas y bien espaciada */
  font-family:var(--marca); font-weight:500; font-size:1.05rem; color:var(--navy-900);
  text-transform:uppercase; letter-spacing:0.16em;
}
.marca small { font-size:0.72rem; color:var(--ink-faint); font-weight:600;
               background:var(--sand); padding:0.12rem 0.5rem; border-radius:var(--r-full);
               margin-left:0.15rem; }
.barra-acciones { display:flex; align-items:center; gap:0.7rem; margin-left:auto; }
.barra-acciones button { margin:0; }
.link-sup { font-size:0.85rem; font-weight:700; color:var(--navy-800); text-decoration:none; }
.link-sup:hover { color:var(--orange-dark); }

/* ---------- panel de pruebas (se saca en producción) ---------- */
.dev-bar {
  background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:var(--r-sm);
  padding:0.5rem 0.8rem; margin-bottom:0.9rem; font-size:0.76rem; color:#8a7a1c;
}
.dev-bar summary { cursor:pointer; font-weight:700; list-style:none;
                   display:flex; align-items:center; gap:0.4rem; }
.dev-bar summary::-webkit-details-marker { display:none; }
.dev-bar-inner { margin-top:0.7rem; }
.dev-bar-inner input { font-size:0.85rem; padding:0.5rem 0.6rem; }
.dev-bar-inner button { font-size:0.8rem; padding:0.45rem 0.75rem; width:auto;
                        margin:0.5rem 0.4rem 0 0; }

/* ---------- métricas / resumen (admin) ---------- */
.metricas { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
            gap:0.8rem; margin-bottom:1rem; }
.metrica { background:#fff; border:1px solid rgba(20,49,79,.05); border-radius:var(--r-md);
           padding:1rem 1.1rem; box-shadow:var(--sh-card); }
.metrica-top { display:flex; align-items:center; gap:0.4rem; color:var(--ink-faint);
               font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.metrica b { display:block; font-family:var(--display); font-size:1.8rem;
             color:var(--navy-900); font-weight:600; margin-top:0.35rem; line-height:1; }
.metrica.alerta b { color:var(--orange-dark); }

/* ---------- pestañas ---------- */
.tabs { display:flex; gap:0.3rem; border-bottom:1px solid var(--sand-line); margin-bottom:1rem;
        overflow-x:auto; }
.tabs button {
  width:auto; margin:0; padding:0.6rem 0.9rem; font-size:0.86rem; font-weight:700;
  background:none !important; color:var(--ink-faint); box-shadow:none; border-radius:0;
  border-bottom:2.5px solid transparent; white-space:nowrap;
}
.tabs button.activa { color:var(--orange-dark); border-bottom-color:var(--orange); }

/* ---------- validación de teléfono ---------- */
.tel-msg, .tel-aviso { font-size:0.76rem; margin-top:0.25rem; color:var(--ink-faint); line-height:1.4; }
.tel-aviso.ok { color:#1c5c2c; font-weight:600; }
.tel-aviso.error { color:var(--red); }
input.tel-ok { border-color:var(--green) !important; }
input.tel-error { border-color:var(--red) !important; background:#FFFAFA; }

/* ---------- selector de archivo ---------- */
.file-picker { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-top:0.2rem; }
.file-picker-btn {
  width:auto !important; margin:0 !important; padding:0.5rem 0.9rem !important;
  font-size:0.83rem !important; background:#F1EEE7 !important; color:var(--navy-800) !important;
  box-shadow:none !important; font-weight:600 !important;
}
.file-picker-nombre { font-size:0.82rem; color:var(--ink-faint); }
.file-picker-nombre.con-archivo { color:var(--green); font-weight:600; }
.file-input-real { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }

/* ---------- utilidades de formulario ---------- */
.ancho-completo { width:100%; box-sizing:border-box; resize:vertical; min-height:110px; }
.slider { width:100%; padding:0; accent-color:var(--orange); }

/* ---------- barra superior fija en la app ---------- */
.app-shell { position:relative; }
.app-shell .barra-sup {
  position:sticky; top:0; z-index:60;
  background:rgba(245,241,233,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(20,49,79,.07);
  margin:0 -1rem 1rem; padding:0.7rem 1rem;
}

/* ---------- cabecera de perfil (app y admin) ---------- */
.perfil-cabecera { display:flex; gap:0.9rem; align-items:center; margin-bottom:1rem; }
.avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
          border:2.5px solid var(--cream-2); box-shadow:var(--sh-card); }
.avatar-vacio {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--navy-800), var(--navy-950));
  color:#fff; font-family:var(--display); font-size:1.5rem; font-weight:700; text-transform:uppercase;
}
.perfil-nombre { font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--navy-900); }
.perfil-sub { font-size:0.83rem; color:var(--ink-faint); margin-top:0.25rem;
              display:flex; flex-wrap:wrap; gap:0.3rem; align-items:center; }

/* ---------- bloque de estadísticas ---------- */
.stats { display:flex; gap:0.6rem; text-align:center; margin:0.9rem 0; }
.stats > div { flex:1; background:#F9F7F2; border-radius:var(--r-md); padding:0.75rem 0.4rem; }
.stats b { display:block; font-family:var(--display); font-size:1.3rem;
           color:var(--navy-900); font-weight:600; line-height:1.2; margin-bottom:0.2rem; }
.stats .cant { display:inline; font-size:0.78rem; color:var(--ink-faint);
               font-weight:400; font-family:var(--body); }
.stats span { display:block; font-size:0.72rem; color:var(--ink-faint); }

/* ---------- barras de calificación ---------- */
.barra-fila { display:flex; align-items:center; gap:0.6rem; font-size:0.83rem; margin-top:0.4rem; }
.barra-fila > span:first-child { width:105px; color:var(--ink-soft); }
.barra { flex:1; height:7px; background:var(--sand-line); border-radius:var(--r-full); overflow:hidden; }
.barra > div { height:100%; background:var(--orange); border-radius:var(--r-full); }

/* ---------- opiniones ---------- */
.opinion { border-top:1px solid var(--sand-line); padding:0.6rem 0; font-size:0.86rem; }
.opinion-top { color:var(--orange-dark); font-size:0.86rem; }
.opinion-top span { color:var(--ink-faint); font-size:0.78rem; margin-left:0.4rem; }

/* ---------- cartel para instalar la app (PWA) ---------- */
#pwaInstalar, #pushPedido {
  position: fixed; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; z-index: 9000;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--navy-900); color: #fff;
  border-radius: var(--r-md); padding: 0.85rem 1rem;
  box-shadow: 0 12px 32px -10px rgba(15,36,56,.55);
  animation: pwaEntra .3s ease-out;
}
@keyframes pwaEntra { from { transform: translateY(20px); opacity: 0; } }

#pwaInstalar .pwa-txt, #pushPedido .pwa-txt { flex: 1; min-width: 0; }
#pwaInstalar .pwa-txt, #pushPedido .pwa-txt b { display: block; font-size: 0.92rem; }
#pwaInstalar .pwa-txt, #pushPedido .pwa-txt span { display: block; font-size: 0.78rem; color: rgba(251,248,243,.7);
                             margin-top: 0.1rem; line-height: 1.35; }

#pwaInstalar .pwa-si, #pushPedido .pwa-si {
  flex: none; width: auto; margin: 0; padding: 0.55rem 1.1rem;
  background: var(--orange); color: #fff; font-size: 0.87rem; box-shadow: none;
}
#pwaInstalar .pwa-no, #pushPedido .pwa-no {
  flex: none; width: auto; margin: 0; padding: 0.3rem 0.5rem;
  background: transparent !important; color: rgba(251,248,243,.6) !important;
  font-size: 1.3rem; line-height: 1; box-shadow: none;
}

/* Con la barra inferior de la app, subimos el cartel para no taparla */
body:has(.bottom-nav) #pwaInstalar, body:has(.bottom-nav) #pushPedido, #pushPedido { bottom: 5.2rem; }

/* ---------- instructivo de instalación en iPhone ---------- */
#iosInstalar {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(15,36,56,.6); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; padding: 1rem;
}
#iosInstalar .ios-caja {
  background: #fff; border-radius: var(--r-lg); padding: 1.4rem 1.3rem 1.2rem;
  max-width: 420px; width: 100%; position: relative;
  box-shadow: var(--sh-pop); animation: pwaEntra .3s ease-out;
}
#iosInstalar b { display: block; font-family: var(--display); font-size: 1.1rem;
                 color: var(--navy-900); margin-bottom: 0.4rem; }
#iosInstalar p { color: var(--ink-soft); font-size: 0.88rem; margin: 0 0 0.9rem; line-height: 1.5; }
#iosInstalar ol { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--ink);
                  font-size: 0.89rem; line-height: 1.7; }
#iosInstalar .ios-ok { width: 100%; margin: 0; background: var(--orange); }
#iosInstalar .ios-cerrar {
  position: absolute; top: 0.5rem; right: 0.6rem; width: auto; margin: 0;
  padding: 0.2rem 0.5rem; background: transparent !important;
  color: var(--ink-faint) !important; font-size: 1.4rem; box-shadow: none;
}

/* ============================================================
   Ajustes para la app instalada (Android/iOS)
   La app va a pantalla completa, así que el contenido queda debajo
   de la barra de estado del celular (hora, señal, batería). Estas
   reglas le dejan ese espacio libre.
   ============================================================ */

/* La clase la agrega js/nativo.js solo dentro de la app.
   El espacio de la barra de estado NO lo pone el body: lo aporta la
   propia barra superior con su padding, así no queda un hueco
   transparente arriba de ella. */

html.app-nativa .app-shell .barra-sup {
  /* En la app la barra va FIJA, no pegajosa: "sticky" depende de que
     ningún contenedor padre tenga overflow o transform, y bastaba con
     eso para que el texto le pasara por encima al hacer scroll.
     Con "fixed" queda anclada a la ventana y nada la tapa. */
  position: fixed !important;
  top: 0 !important;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;   /* el mismo ancho que el body */
  z-index: 500;       /* por encima de todo el contenido */

  /* La franja de la barra de estado (hora, batería) tiene que quedar
     CUBIERTA por la barra: si no, se ve pasar el contenido por detrás.
     max() garantiza un mínimo aunque el sistema informe 0. */
  padding-top: max(2.6rem, calc(0.7rem + env(safe-area-inset-top, 0px))) !important;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0 !important;

  /* Fondo sólido: con el translúcido el contenido se transparentaba */
  background: var(--cream-2) !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(15, 36, 56, .06);
}

/* Al estar fija, la barra ya no ocupa lugar en el flujo: hay que
   dejarle su espacio para que el contenido no arranque debajo. */
html.app-nativa .app-shell {
  /* !important porque app.php define .app-shell en sus estilos
     internos, que se cargan DESPUÉS de este archivo y lo pisaban.
     Ese era el motivo por el que la barra parecía no moverse. */
  padding-top: max(6.1rem, calc(4.2rem + env(safe-area-inset-top, 0px))) !important;
}

/* La barra inferior no debe quedar tapada por la barra de gestos */
html.app-nativa .bottom-nav {
  padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
}

/* Y el contenido tampoco debe quedar debajo de esa barra */
html.app-nativa .pantalla {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}


/* ------------------------------------------------------------
   iPhone: la barra inferior de Safari aparece y desaparece al
   hacer scroll. Sin este margen, el último elemento de cada
   pantalla quedaba tapado por la barra de navegación de la app.
   ------------------------------------------------------------ */
body:has(.bottom-nav) .pantalla {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}