/* ═══════════════════════════════════════════════════════════════════════════
   Pantallas de acceso del cliente — 20-ago-2026.

   Mismo patrón que el acceso de OfficeCoach, que José quiso de referencia:
   formulario limpio a un lado y panel de color al otro, con lo que se le
   promete al cliente. En el móvil el panel se convierte en una franja arriba.

   Se usa en las cuatro pantallas por las que pasa un cliente:
   panel/index.php · admin/login.php · admin/forgot_password.php ·
   admin/reset_password.php
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Los colores salen del propio logo de Qarta (20-ago-2026). Antes esto iba en
       vino, que era el color de la carta del Bar 14 y no el de la marca. */
    --acc-vino:        #FD6308;   /* el naranja de Qarta */
    --acc-vino-oscuro: #0A141B;   /* el negro azulado del logo */
    --acc-vino-claro:  #FC8912;
    --acc-rosa:        #ffe3d1;
    --acc-tinta:       #0A141B;
    --acc-gris:        #6b7280;
    --acc-gris-claro:  #9ca3af;
    --acc-fondo:       #f7f6f7;
    --acc-borde:       #e3dfe1;
}

*, *::before, *::after { box-sizing: border-box; }

body.acceso {
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--acc-tinta);
    background: var(--acc-fondo);
    -webkit-font-smoothing: antialiased;
}

.acceso-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    /* En el móvil la franja de color ocupa lo justo y el formulario se queda el
       resto. Sin esto, la rejilla repartía a medias y la franja comía media
       pantalla [visto el 20-ago]. */
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

/* ── Columna del formulario ───────────────────────────────────────────────── */
.acceso-form-col {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.acceso-caja { width: 100%; max-width: 380px; }

.acceso-marca {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--acc-tinta); text-decoration: none; margin-bottom: 30px;
}
.acceso-marca .icono {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--acc-vino); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.acceso-marca .dos { color: var(--acc-vino); }
.acceso-form-col .acceso-marca { display: none; }   /* en móvil ya está arriba */

/* La marca ya no se dibuja con texto: es el logo de verdad. */
.acceso-marca--imagen { gap: 0; }
.acceso-marca--imagen img { display: block; height: 42px; width: auto; max-width: 100%; }
.acceso-panel .acceso-marca--imagen img { height: 46px; }

.acceso-caja h1 {
    margin: 0; font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.2;
}
.acceso-sub { margin: 7px 0 0; font-size: 14px; color: var(--acc-gris); line-height: 1.5; }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.acceso-form { margin-top: 26px; }
.acceso-campo { margin-bottom: 15px; }
.acceso-campo label {
    display: block; margin-bottom: 6px;
    font-size: 13.5px; font-weight: 600; color: #374151;
}
/* Ojo: van TODOS los tipos. Antes solo se daba estilo a texto y correo, y el
   campo de la contraseña salía estrecho y con otro borde [visto el 20-ago]. */
.acceso-form input[type="text"],
.acceso-form input[type="email"],
.acceso-form input[type="password"],
.acceso-form input:not([type]) {
    width: 100%; padding: 12px 14px;
    font-size: 16px;                 /* 16 y no menos: por debajo, el iPhone hace zoom */
    font-family: inherit; color: var(--acc-tinta);
    background: #fff;
    border: 1px solid var(--acc-borde); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.acceso-form input:focus {
    outline: none;
    border-color: var(--acc-vino);
    box-shadow: 0 0 0 3px rgba(253, 99, 8, .16);
}
.acceso-form input::placeholder { color: var(--acc-gris-claro); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.acceso-boton {
    width: 100%; min-height: 48px; padding: 13px 18px; margin-top: 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600;
    color: #fff; background: var(--acc-vino);
    border: 0; border-radius: 10px; cursor: pointer;
    transition: transform .18s, background .18s, box-shadow .18s;
}
.acceso-boton:hover { background: #e35505; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(253,99,8,.28); }
.acceso-boton:active { transform: translateY(0); }
.acceso-boton .flecha { transition: transform .18s; }
.acceso-boton:hover .flecha { transform: translateX(3px); }
.acceso-boton.secundario {
    background: #fff; color: var(--acc-vino);
    border: 1px solid var(--acc-vino); box-shadow: none;
}
.acceso-boton.secundario:hover { background: #fff7f2; box-shadow: none; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.acceso-error, .acceso-ok {
    margin: 0 0 15px; padding: 11px 13px;
    border-radius: 9px; font-size: 14px; line-height: 1.45;
}
.acceso-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.acceso-ok    { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

/* ── Pies y enlaces ──────────────────────────────────────────────────────── */
.acceso-pie { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--acc-gris); line-height: 1.6; }
.acceso-pie a { color: var(--acc-vino); font-weight: 600; text-decoration: none; }
.acceso-pie a:hover { text-decoration: underline; }
.acceso-legal { margin-top: 18px; text-align: center; font-size: 12px; color: var(--acc-gris-claro); line-height: 1.6; }
.acceso-legal a { color: var(--acc-gris); text-decoration: underline; text-underline-offset: 2px; }
.acceso-legal a:hover { color: var(--acc-tinta); }

/* Los iconos van en trazo, no en emoji de colores: un candado amarillo sobre el
   vino del panel desentonaba [visto en la primera prueba, 20-ago]. */
.acceso-icono { width: 1em; height: 1em; flex: none; }
.acceso-marca .icono .acceso-icono { width: 17px; height: 17px; }
.acceso-mensaje .icono-grande .acceso-icono { width: 22px; height: 22px; }
.acceso-seguro .acceso-icono { width: 15px; height: 15px; opacity: .85; }

/* La otra vía ("no sé mi dirección"): plegada, es la excepción */
.acceso-otra { margin-top: 22px; border-top: 1px solid var(--acc-borde); padding-top: 6px; }
.acceso-otra summary {
    cursor: pointer; list-style: none;
    min-height: 44px; display: flex; align-items: center;
    font-size: 13.5px; font-weight: 600; color: var(--acc-vino);
}
.acceso-otra summary::-webkit-details-marker { display: none; }
.acceso-otra summary::after { content: ' ›'; margin-left: 4px; transition: transform .2s; }
.acceso-otra[open] summary::after { transform: rotate(90deg); }

/* ── Panel de color ──────────────────────────────────────────────────────── */
.acceso-panel {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #0A141B 0%, #16232e 48%, var(--acc-vino) 165%);
    color: #fff;
    padding: 22px 20px;
}
/* Puntitos y halos: lo que le da el aire de producto y no de formulario suelto */
.acceso-panel::before {
    content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
    background-size: 22px 22px;
}
.acceso-halo {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(58px); opacity: .35;
}
.acceso-halo.uno { width: 300px; height: 300px; background: var(--acc-vino-claro); top: -110px; right: -90px; }
.acceso-halo.dos { width: 340px; height: 340px; background: #FD6308; bottom: -150px; left: -110px; opacity: .22; }

.acceso-panel > .contenido { position: relative; z-index: 1; }
.acceso-panel .acceso-marca { color: #fff; margin-bottom: 6px; }
.acceso-panel .acceso-marca .dos { color: var(--acc-rosa); }
.acceso-panel .acceso-marca .icono { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); }
.acceso-lema { margin: 0 0 18px; font-size: 13.5px; color: var(--acc-rosa); font-weight: 500; }

/* Los mensajes que van rotando */
.acceso-mensajes { position: relative; }
.acceso-mensaje { display: none; }
.acceso-mensaje.visible { display: block; animation: acc-entra .5s ease-out both; }
.acceso-mensaje .icono-grande {
    width: 44px; height: 44px; border-radius: 12px; font-size: 21px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22);
    display: none; align-items: center; justify-content: center; margin-bottom: 16px;
}
.acceso-mensaje h2 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.acceso-mensaje p  { margin: 0; font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.55; }
.acceso-puntos { display: flex; gap: 6px; margin-top: 16px; }
.acceso-punto { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.35); transition: width .3s, background .3s; }
.acceso-punto.activo { width: 20px; background: #fff; }
.acceso-seguro {
    display: none; align-items: center; gap: 7px;
    font-size: 13px; color: rgba(255,255,255,.8);
}
@keyframes acc-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══ ESCRITORIO: dos columnas ═══════════════════════════════════════════ */
@media (min-width: 1024px) {
    .acceso-rejilla { grid-template-columns: 1fr 1fr; }
    .acceso-form-col { order: -1; padding: 40px; }
    .acceso-form-col .acceso-marca { display: inline-flex; }
    .acceso-caja h1 { font-size: 30px; }

    .acceso-rejilla { grid-template-rows: 1fr; }
    .acceso-panel {
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 54px 52px;
    }
    .acceso-lema { margin-bottom: 0; }
    .acceso-panel .acceso-marca { font-size: 21px; }
    .acceso-mensaje .icono-grande { display: inline-flex; }
    .acceso-mensaje h2 { font-size: 30px; margin-bottom: 12px; }
    .acceso-mensaje p  { font-size: 15.5px; }
    .acceso-seguro { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .acceso-mensaje.visible { animation: none; }
    .acceso-boton:hover { transform: none; }
}