/*
 * Estilos del sistema de cuentas central: login, «a qué tengo acceso» y la
 * pantalla de cuentas. Sin framework, misma paleta que el resto de los
 * apartados (blanco / gris / negro + acento LG #ea1917).
 * Se sirve vía la ruta cuenta.estilos.
 */
:root {
    --acento: #ea1917;
    --verde: #16a34a;
    --ambar: #d97706;
    --blanco: #ffffff;
    --gris-claro: #f4f4f5;
    --gris-borde: #e4e4e7;
    --gris-medio: #71717a;
    --gris-oscuro: #3f3f46;
    --negro: #18181b;
    --radio: 10px;
    --sombra: 0 1px 2px rgba(24, 24, 27, .06), 0 1px 3px rgba(24, 24, 27, .05);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--negro);
    background: var(--gris-claro);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

[x-cloak] { display: none !important; }
a { color: inherit; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; background: var(--gris-claro);
    padding: 1px 5px; border-radius: 5px; border: 1px solid var(--gris-borde);
}

.acento { display: inline-block; width: 4px; height: 15px; border-radius: 999px; background: var(--acento); }

/* --- Login: una tarjeta centrada, sin nada más que distraiga --- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.login {
    width: 100%; max-width: 380px; background: var(--blanco);
    border: 1px solid var(--gris-borde); border-radius: 14px;
    box-shadow: var(--sombra); padding: 26px;
}
.login__titulo {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.01em;
}
.login__sub { margin: 0 0 18px; font-size: 12.5px; color: var(--gris-medio); }
.login__form { display: grid; gap: 12px; }
.login__aviso, .login__error {
    margin: 0 0 14px; padding: 9px 11px; border-radius: 8px;
    font-size: 12.5px; border: 1px solid;
}
.login__aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.login__error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.login__pie { margin: 16px 0 0; font-size: 12px; color: var(--gris-medio); text-align: center; }

/* --- Campos y botones (compartidos por las tres pantallas) --- */
.campo { display: grid; gap: 5px; }
.campo__lbl { font-size: 11.5px; font-weight: 600; color: var(--gris-oscuro); }

.input, .select {
    width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
    color: var(--negro); background: var(--blanco);
    border: 1px solid var(--gris-borde); border-radius: 8px;
}
.input:focus, .select:focus { outline: 2px solid rgba(234, 25, 23, .25); outline-offset: 1px; border-color: var(--acento); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--negro); background: var(--blanco); cursor: pointer;
    border: 1px solid var(--gris-borde); border-radius: 8px;
}
.btn:hover { background: var(--gris-claro); }
.btn--primario { color: var(--blanco); background: var(--negro); border-color: var(--negro); }
.btn--primario:hover { background: #000; }
.btn--peligro { color: var(--acento); border-color: #fecaca; }
.btn--peligro:hover { background: #fef2f2; }
.btn--mini { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: .55; cursor: default; }

/* --- Cabecera de las páginas con sesión --- */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--gris-borde); }
.cabecera__fila {
    max-width: 1100px; margin: 0 auto; padding: 8px 20px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cabecera__titulo {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 14px; font-weight: 650; letter-spacing: -.01em;
}
.cabecera__yo { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--gris-medio); }

.pagina { max-width: 1100px; margin: 0 auto; padding: 20px; }

.tarjeta {
    background: var(--blanco); border: 1px solid var(--gris-borde);
    border-radius: 12px; box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px;
}
.tarjeta__titulo { margin: 0 0 4px; font-size: 13px; font-weight: 650; }
.tarjeta__sub { margin: 0 0 14px; font-size: 12.5px; color: var(--gris-medio); }

/* --- «A qué tengo acceso» --- */
.accesos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.acceso {
    display: block; text-decoration: none; padding: 14px;
    background: var(--blanco); border: 1px solid var(--gris-borde);
    border-radius: 12px; box-shadow: var(--sombra);
}
.acceso:hover { border-color: var(--negro); }
.acceso__nombre { font-size: 13.5px; font-weight: 650; }
.acceso__rol { margin-top: 3px; font-size: 12px; color: var(--gris-medio); }

.chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
    font-size: 11.5px; font-weight: 600; border-radius: 999px;
    border: 1px solid var(--gris-borde); background: var(--gris-claro); color: var(--gris-oscuro);
}
.chip--admin { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.chip--aparte { border-color: #fde68a; background: #fffbeb; color: #92400e; }

/* --- Tabla de cuentas --- */
.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla th, .tabla td { padding: 8px 10px; border-bottom: 1px solid var(--gris-borde); text-align: left; vertical-align: top; }
.tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-medio); font-weight: 650; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla__inactiva { opacity: .55; }

.roles { display: flex; flex-wrap: wrap; gap: 5px; }
.rol-form { display: inline-flex; align-items: center; gap: 4px; }

.rejilla-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }

.aviso {
    margin: 0 0 14px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
    background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.errores { margin: 0 0 14px; padding: 9px 11px 9px 26px; border-radius: 8px; font-size: 12.5px;
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }