/* ════════════════════════════════════════════════════════════
   login.css — Inicio de sesion de Talento Humano

   Replica el diseno del login de Compras Publicas (React):
   panel institucional oscuro a la izquierda y tarjeta de acceso
   a la derecha. Los colores son los mismos tokens de aquel
   proyecto (globals.css), escritos aqui con su valor literal
   porque este WAR no tiene Tailwind ni variables de tema.

   Se usan clases propias con prefijo acc- y NO .login-body /
   .login-panel: esas ya las estiliza layout-*.css de paradise y
   heredarlas obligaria a pelear cada regla. Esta hoja la carga
   unicamente iniciarSesion.xhtml.

   La tipografia Inter se declara en iniciarSesion.xhtml porque
   la ruta de los archivos necesita el contexto de la aplicacion.
   ════════════════════════════════════════════════════════════ */

:root {
    --acc-ac: #2f5c8f;          /* acento institucional */
    --acc-ac-hover: #274d78;
    --acc-ac-soft: rgba(47, 92, 143, .10);
    --acc-sf: #ffffff;          /* superficie de la tarjeta */
    --acc-bd: #e5e8ec;
    --acc-tx: #1e2733;
    --acc-tx2: #5a6472;
    --acc-tx3: #8b94a1;
    --acc-panel1: #1f2733;      /* degradado del fondo */
    --acc-panel2: #141a22;
    --acc-err: #b91c1c;
    --acc-err-bg: #fdeaea;
}

/* ── Lienzo ── */
.acc-body {
    min-height: 100vh;
    margin: 0;
    padding: 40px 24px;
    background: linear-gradient(150deg, var(--acc-panel1), var(--acc-panel2)) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.acc-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1280px;
    min-height: calc(100vh - 80px);
    margin: 0 auto;
}

/* ══ Columna izquierda: contexto institucional ══ */
.acc-info {
    display: none;                 /* se muestra desde 1024px */
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 44px;
}

/* ── Firma institucional ──
   Escudo, nombre de la entidad y logotipo de la alcaldia en una sola linea,
   separados por una raya. */
.acc-marca {
    display: flex;
    align-items: center;
    gap: 18px;
}
/* Del logo institucional se muestra solo el escudo: el nombre que trae el
   archivo esta en azul marino y no se leeria sobre el panel oscuro (el nombre
   va escrito al lado, en texto). El recorte se hace con una ventana y la imagen
   ampliada dentro.

   Medidas del archivo que entrega el servicio de archivos (logoOrigami.png):
   2500 x 1767, con el escudo entre x 804-1701 y 135-1101 (897 x 966).
   A 104 px de alto la escala es 104/966 = 0,1077, de ahi salen el ancho de la
   imagen (2500 x 0,1077 = 269) y los desplazamientos. Si cambian el archivo,
   rehacer estas cuatro medidas. */
.acc-marca-logo {
    position: relative;
    flex: none;
    width: 97px;
    height: 104px;
    overflow: hidden;
}
.acc-marca-logo img {
    position: absolute;
    top: -15px;
    left: -87px;
    width: 269px;
    max-width: none;
    height: auto;
}
.acc-marca-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.acc-marca-txt strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #fff;
}
.acc-marca-txt span {
    font-size: 12px;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .55);
}
.acc-marca-sep {
    flex: none;
    width: 1px;
    height: 56px;
    background: rgba(255, 255, 255, .14);
}

.acc-titular {
    max-width: 600px;
    margin: 22px 0 0;
    font-size: 36px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
}

/* ── Capacidades (fila con separadores) ── */
.acc-capacidades {
    display: flex;
    align-items: center;
    gap: 34px;
}
.acc-capacidad {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.acc-capacidad b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #fff;
}
.acc-capacidad span {
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
}
.acc-sep {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, .12);
}

/* ── Bloques de lista ── */
.acc-bloques {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}
.acc-rotulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, .35);
}
.acc-procesos {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding-top: 16px;
}
.acc-proceso {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.acc-proceso i {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #7ba6d8;
}
.acc-proceso span {
    flex: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.acc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.acc-chip {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .70);
}
.acc-nota {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
}

/* Logo de la alcaldia, junto al escudo en la primera linea. Se muestra con sus
   colores originales, sin retoque (decision del usuario). */
.acc-alcaldia {
    display: flex;
    flex: none;
    align-items: center;
}
.acc-alcaldia img {
    width: 140px;
    height: auto;
}

/* ══ Columna derecha: acceso ══ */
.acc-acceso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 16px;
    width: 100%;
    max-width: 400px;
}

.acc-card {
    display: block;
    background: var(--acc-sf);
    border-radius: 12px;
    padding: 32px 30px;
}

.acc-card-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.acc-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--acc-ac);
}
.acc-card-head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: var(--acc-tx);
}
.acc-card-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--acc-tx2);
}

/* ── Campos ── */
.acc-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.acc-campo > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--acc-tx2);
}
.acc-input {
    position: relative;
    display: flex;
    align-items: center;
}
.acc-input > i.acc-icono {
    position: absolute;
    left: 12px;
    font-size: 15px;
    color: var(--acc-tx3);
    pointer-events: none;
    z-index: 1;
}
.acc-input input,
.acc-input .ui-inputtext,
.acc-input .ui-password {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px 0 38px !important;
    border: 1px solid var(--acc-bd) !important;
    border-radius: 9px !important;
    background: var(--acc-sf) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--acc-tx) !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.acc-input input::placeholder {
    color: var(--acc-tx3);
}
.acc-input input:focus,
.acc-input .ui-inputtext:focus,
.acc-input .ui-state-focus {
    border-color: var(--acc-ac) !important;
    box-shadow: 0 0 0 2px var(--acc-ac-soft) !important;
    outline: none !important;
}
.acc-input--clave input {
    padding-right: 40px !important;
}

/* Boton de mostrar / ocultar la clave */
.acc-ojo {
    position: absolute;
    right: 8px;
    display: flex;
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--acc-tx3);
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
}
.acc-ojo:hover {
    color: var(--acc-tx2);
}

/* ── Boton principal ── */
.acc-body .acc-btn.ui-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 9px !important;
    background: var(--acc-ac) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .15s !important;
}
.acc-body .acc-btn.ui-button:hover {
    background: var(--acc-ac-hover) !important;
}
.acc-body .acc-btn.ui-button .ui-button-text {
    padding: 0 !important;
}

/* Boton secundario en texto (regresar) */
.acc-body .acc-btn-texto.ui-button {
    display: block !important;
    width: auto !important;
    margin: 10px auto 0 !important;
    padding: 4px !important;
    border: none !important;
    background: transparent !important;
    color: var(--acc-ac) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.acc-body .acc-btn-texto.ui-button:hover {
    color: var(--acc-ac-hover) !important;
    text-decoration: underline !important;
}

/* ── Avisos ──
   El recuadro se pinta sobre el aviso en si, NO sobre el contenedor:
   PrimeFaces dibuja el contenedor siempre, haya mensajes o no, y darle
   fondo dejaba una franja de color en el formulario vacio. */
.acc-card .ui-messages {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.acc-card .ui-messages .ui-messages-error,
.acc-card .ui-messages .ui-messages-info,
.acc-card .ui-messages .ui-messages-warn {
    margin: 0 0 20px !important;
    border: none !important;
    border-left: 3px solid var(--acc-err) !important;
    border-radius: 9px !important;
    background: var(--acc-err-bg) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    color: var(--acc-err) !important;
}
.acc-card .ui-messages ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.acc-card .ui-messages-error-summary {
    font-weight: 700 !important;
}

/* ── Recuperacion de clave ── */
.acc-aviso {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--acc-tx2);
    text-align: center;
}
.acc-correo {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--acc-ac);
    text-align: center;
    word-break: break-all;
}

/* ── Pie ── */
.acc-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
}
.acc-pie i {
    font-size: 12px;
    color: rgba(255, 255, 255, .35);
}

/* ── Dialogo de carga ── */
.acc-body .ui-dialog {
    border: none !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18) !important;
}

/* ══ Escritorio: las dos columnas ══ */
@media (min-width: 1024px) {
    .acc-body {
        padding: 64px 80px;
    }
    .acc-wrap {
        flex-direction: row;
        justify-content: space-between;
        gap: 64px;
        min-height: calc(100vh - 128px);
    }
    .acc-info {
        display: flex;
    }
    .acc-acceso {
        width: 400px;
        flex: none;
        align-self: auto;
    }
}

/* ══ Movil ══ */
@media (max-width: 480px) {
    .acc-body {
        padding: 24px 16px;
    }
    .acc-card {
        padding: 26px 20px;
    }
}