/* Portal de Recibos — estilos mobile-first. Cara NEUTRAL (dos marcas):
   fondo gris casi blanco, botón marino, magenta/amarillo SOLO en los logos. */
* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: #f4f5f7;
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    color: #3a3d4a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card {
    background: #ffffff;
    width: 100%;
    max-width: 380px;
    border-radius: 18px;
    padding: 34px 26px 28px;
    box-shadow: 0 10px 34px rgba(20, 22, 34, 0.08);
    text-align: center;
}

/* Cabecera Ki & Ka: dos columnas ESPEJADAS (logo + nombre + descriptor) con
   "Ki & Ka" en el centro, a la altura de los logos. Simétricas y parejas. */
.brand {
    display: flex;
    align-items: flex-start;       /* logos arriba; "Ki & Ka" se alinea a esa fila */
    justify-content: center;
    gap: 8px;                      /* ajustado para dar lugar al título más grande sin romper el renglón */
    margin-bottom: 6px;
}
.brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 74px;                   /* ambas columnas IGUAL ancho → espejadas (achicado para el título grande) */
}
.brand-logo {
    height: 42px;
    width: auto;
    display: block;
}
.brand-name {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #5a5f6e;                /* gris neutro — NO color de marca */
    letter-spacing: 0.3px;
    line-height: 1.2;
}
.brand-desc {
    font-size: 10.5px;
    color: #9499a6;                /* gris más claro */
    letter-spacing: 0.2px;
    line-height: 1.2;
}
.brand-amp {
    font-family: 'Quicksand', system-ui, 'Segoe UI', sans-serif;
    font-size: 38px;               /* agrandado (~1.5x) → a la altura visual de los logos (42px) */
    font-weight: 600;
    color: #2c3046;
    white-space: nowrap;
    line-height: 1;
    height: 42px;                  /* = alto del logo → "Ki & Ka" centrado en la fila de logos */
    display: flex;
    align-items: center;
}

.subtitle {
    margin: 16px 0 30px;
    color: #8a8f9c;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Login (cascarón inerte en SL-2) */
.login { text-align: left; }
.field { display: block; margin-bottom: 16px; }
.field span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #6b7080;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.field input {
    width: 100%;
    padding: 15px 14px;
    font-size: 16px;            /* >=16px: evita el zoom automático de iOS */
    border: 1px solid #d6d9e0;
    border-radius: 11px;
    background: #fbfbfc;
    color: #3a3d4a;
}
.field input:disabled { background: #f1f2f5; color: #aeb2bd; cursor: not-allowed; }

/* Ojito mostrar/ocultar contraseña */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 50px; }   /* deja lugar para el ojito */
.pw-toggle {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 48px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    font-size: 20px; line-height: 1; color: #6b7080;
    border-radius: 0 11px 11px 0;
    -webkit-tap-highlight-color: transparent;
}
.pw-toggle:active { background: #eef0f4; }

/* Conformidad del empleado sobre el recibo */
.btn-conforme {
    display: block; width: 100%; margin-top: 8px;
    padding: 11px 14px; font-size: 14px; font-weight: 700;
    color: #1e7d46; background: #f0faf4; border: 1px solid #bfe6cf;
    border-radius: 10px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn-conforme:active { background: #e3f5ea; }
.conf-estado {
    margin-top: 8px; padding: 9px 14px;
    font-size: 13px; font-weight: 600; color: #1e7d46;
    background: #f0faf4; border: 1px solid #bfe6cf; border-radius: 10px;
    text-align: center;
}

/* Entrar con passkey (SL-5b) */
.login-sep {
    display: flex; align-items: center; text-align: center;
    color: #9aa0ad; font-size: 13px; margin: 18px 0 14px;
}
.login-sep::before, .login-sep::after { content: ''; flex: 1; height: 1px; background: #e3e5ea; }
.login-sep span { padding: 0 12px; }
.btn-pklogin { width: 100%; }
.login-msg { font-size: 13px; color: #9a342f; text-align: center; margin: 10px 0 0; }

.btn-ingresar {
    width: 100%;
    margin-top: 6px;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    background: #2c3046;        /* marino neutro — NO magenta */
    border: none;
    border-radius: 11px;
    cursor: pointer;
}
.btn-ingresar:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-link { display: block; text-decoration: none; text-align: center; box-sizing: border-box; }

/* Mensajes de la pantalla de activación (éxito / error genérico o de formato) */
.msg {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 18px;
}
.msg.ok  { background: #e7f4ec; color: #1e7d46; border: 1px solid #bfe2cd; }
.msg.err { background: #fdecec; color: #9a342f; border: 1px solid #f3c9c7; }

.ayuda {
    margin: 0 0 18px;
    font-size: 13px;
    color: #8a8f9c;
    text-align: center;
}

.bienvenida {
    margin: 0 0 26px;
    font-size: 16px;
    color: #3a3d4a;
    text-align: center;
    line-height: 1.5;
}

.proximamente {
    margin: 22px 0 0;
    font-size: 13px;
    color: #8a8f9c;
}
.proximamente a { color: #8a8f9c; }

/* ===== Pantalla de recibos (SL-4b) ===== */
.saludo-mini {
    margin: 0 0 20px;
    font-size: 14px;
    color: #8a8f9c;
    text-align: center;
}
.recibo-grupo {
    margin: 20px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8f9c;
    text-align: left;
}
.recibo-item {
    border: 1px solid #e3e5ea;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fbfbfc;
}
.recibo-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #2c3046;
    text-decoration: none;
    margin-bottom: 12px;
    line-height: 1.3;
}
.recibo-acciones {
    display: flex;
    gap: 10px;
}
.btn-sec {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 11px 8px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 9px;
    border: 1px solid #2c3046;
    background: #ffffff;
    color: #2c3046;
    cursor: pointer;
    box-sizing: border-box;
}
.btn-sec:active { background: #eef0f4; }
.sin-recibos {
    margin: 22px 0 26px;
    font-size: 15px;
    color: #6b7080;
    text-align: center;
    line-height: 1.5;
}

/* ===== Acceso rápido / passkeys (SL-5a) ===== */
#pk-seccion { margin-top: 20px; }
.pk-ayuda {
    margin: 6px 0 10px;
    font-size: 13px;
    color: #8a8f9c;
    text-align: center;
}
.pk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #e3e5ea;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #fbfbfc;
}
.pk-nombre { font-size: 14px; font-weight: 600; color: #2c3046; }
.btn-quitar {
    font-size: 13px;
    font-weight: 700;
    color: #9a342f;
    background: #fff;
    border: 1px solid #e6c9c7;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}
.btn-quitar:active { background: #fdecec; }