/* ============================================================
   LICE CRM 
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', Arial, sans-serif;
    background: linear-gradient(160deg, #eaf2fb 0%, #f0f2f5 55%, #e6ecf3 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}

.login-wrap {
    display: flex;
    width: 100%; min-height: 100vh;
    align-items: center; justify-content: center;
    padding: 24px;
}

/* Card centrada */
.login-card {
    width: 100%; max-width: 360px;
    background: white;
    border: 1px solid #e2e6ec;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(30,60,110,0.10);
    padding: 36px 32px 28px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}

.login-logo {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #4da6ff 0%, #2d8fef 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(45,143,239,0.30);
}
.login-logo svg { color: white; }

.login-title {
    font-size: 22px; font-weight: 700; color: #222;
    letter-spacing: 1px; margin-bottom: 4px;
}
.login-sub { font-size: 12.5px; color: #888; margin-bottom: 22px; }

.login-card h2 {
    font-size: 14px; font-weight: 500; color: #555;
    margin-bottom: 18px; text-align: center;
}

.login-field { width: 100%; margin-bottom: 14px; text-align: left; }
.login-field label {
    display: block; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-bottom: 4px;
}
.login-field input {
    width: 100%; height: 40px;
    border: 1px solid #dddddd; border-radius: 8px;
    padding: 0 12px; font-size: 13px; font-family: 'Inter', sans-serif;
    background: #fafafa; outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.login-field input:focus { border-color: #4da6ff; background: white; }

.login-pass-wrap { position: relative; display: flex; align-items: center; }
.login-pass-wrap input { padding-right: 40px; }
.login-pass-toggle {
    position: absolute; right: 0; top: 0; height: 40px; width: 40px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: #999; font-size: 14px;
}
.login-pass-toggle:hover { color: #4da6ff; }

.login-btn {
    width: 100%; height: 42px;
    background: #4da6ff; color: white;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: 'Inter', sans-serif;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: 8px; transition: background 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-btn:hover { background: #2d8fef; }
.login-btn:disabled { opacity: 0.7; cursor: default; }

.login-footer {
    font-size: 11px; color: #aaa;
    text-align: center; margin-top: 22px;
}

/* Modal error */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.hidden { display: none; }
.modal-box { background: white; padding: 24px; width: 320px; border: 1px solid #ddd; text-align: center; }
.modal-icon { font-size: 36px; margin-bottom: 10px; }
.modal-box h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.modal-box button { width: 100%; height: 36px; background: #4da6ff; color: white; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; }

@media (max-width: 420px) {
    .login-card { padding: 28px 22px 22px; border-radius: 10px; }
}

/* SweetAlert2 trae el boton de confirmar en morado (#7066e0) por defecto --
   se reemplaza por el azul de LICE en los avisos que no fijan su propio
   confirmButtonColor (la mayoria de los Swal.fire() de pregunta/confirmacion). */
.swal2-styled.swal2-confirm, .swal2-confirm {
    background-color: #4da6ff !important;
}
.swal2-styled.swal2-confirm:hover, .swal2-confirm:hover {
    background-color: #2d8fef !important;
}
.swal2-styled.swal2-confirm:focus, .swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(77,166,255,.5) !important;
}
/* Banner de reconexion con el backend -- ver "Heartbeat contra el backend"
   en utils.js. Fijo arriba de todo, no bloquea clicks debajo, se quita solo
   cuando el heartbeat vuelve a responder. */
#liceReconexionBanner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
    background: #b8402e; color: white;
    font-size: 12.5px; font-weight: 600; text-align: center;
    padding: 7px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    pointer-events: none;
    animation: liceReconexionAparecer 0.2s ease-out;
}
@keyframes liceReconexionAparecer {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Atenuar toda la app mientras dura la caida de conexion -- ver comentario en
   utils.js. pointer-events:none para no bloquear al usuario si sigue
   escribiendo algo que ya tenia abierto (el guardado va a fallar solo cuando
   el intente, no hace falta impedirle escribir). */
body.lice-sin-conexion::after {
    content: "";
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(20, 30, 45, 0.35);
    pointer-events: none;
    animation: liceAtenuarAparecer 0.25s ease-out;
}
@keyframes liceAtenuarAparecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* "+ Crear" al pie de una lista de catalogo (2026-09-11, patron adoptado de
   Adminfo/Notion: la fila para agregar queda al final, no en un formulario
   arriba de la lista -- ver ADMINFO_INVESTIGACION_PROFUNDA_2026-09-11.md).
   Se ve como una fila mas de la lista hasta que se hace foco/hover. */
.cat-crear-pie {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    border: 1px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
}
.cat-crear-pie:hover, .cat-crear-pie:focus-within {
    border-color: var(--border, #ddd);
    background: #f8fafc;
}
.cat-crear-pie i {
    color: var(--muted, #999); font-size: 11px; cursor: pointer; flex-shrink: 0;
}
.cat-crear-pie i:hover { color: #4da6ff; }
.cat-crear-pie input {
    flex: 1; height: 26px; border: none; background: transparent;
    font-size: 12px; font-family: 'Inter', sans-serif; outline: none; color: inherit;
}
.cat-crear-pie input::placeholder { color: var(--muted, #999); }