/* Identidad SIGS — minimalista, un solo color de acento (azul) sobre blanco. */

:root {
    --sigs-acento: #2563eb;
    --sigs-acento-suave: #eef4ff;
    --sigs-oscuro: #111827;
    --sigs-borde: #eef1f6;
    --sigs-texto-muted: #6b7280;

    /* Escala de redondez: cada componente toma el peldaño que le corresponde,
       en vez de repetir el mismo radio en todo. */
    --sigs-radio-sm: 10px;
    --sigs-radio: 14px;
    --sigs-radio-lg: 18px;

    /* Sombras escalonadas con tinte azulado (no gris puro): el papel se ve
       apoyado sobre la página en vez de recortado. */
    --sigs-sombra-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
    --sigs-sombra-md: 0 4px 12px rgba(15, 23, 42, .07), 0 1px 4px rgba(15, 23, 42, .04);
    --sigs-sombra-lg: 0 8px 20px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
}

/* --- Base minimalista --- */

/* El tema calcula casi todo (paddings, fuentes, gaps) en rem sobre los 16px
   por defecto del navegador, y queda grande. Bajar la base a 14px reescala
   todo proporcionalmente sin tocar componente por componente — equivale al
   zoom ~88% que se necesitaba antes para que se viera bien. */
html {
    font-size: 87.5%;
}

body {
    color: #1f2430;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.page-title {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -.015em;
}

.card {
    border: 1px solid var(--sigs-borde);
    border-radius: var(--sigs-radio-lg);
    box-shadow: var(--sigs-sombra-sm);
    transition: box-shadow .18s ease;
}

/* Aire suficiente para que el contenido no toque el borde, sin desperdiciar
   alto: en pantallas con muchas tarjetas cada milímetro se nota. */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--sigs-borde);
    padding: .85rem 1.1rem;
}

.card-body {
    padding: 1.1rem;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--sigs-borde);
    padding: .85rem 1.1rem;
}

/* Tarjeta de cifra: el número manda, el resto acompaña. */
.card-body.py-3 {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
}

.btn {
    border-radius: 12px;
    font-weight: 500;
    letter-spacing: .01em;
}

.form-control,
.form-select {
    border-radius: 12px;
    padding: .55rem .85rem;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12);
}

/* Etiqueta de campo: pequeña, en versalitas y con aire respecto del control. */
.form-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sigs-texto-muted);
    margin-bottom: .45rem;
}

/* ===================================================================
   Etiquetas montadas sobre el borde del campo.

   El nombre del dato se recuesta sobre la línea superior de su caja, con
   un trozo de fondo que la interrumpe. Se aplica solo donde hay una caja
   real que interrumpir — inputs, selects y textareas —, así que las
   casillas de verificación y los campos de solo lectura quedan intactos.
   =================================================================== */

.mb-3:has(> .form-control),
.mb-3:has(> .form-select),
.mb-3:has(> .input-group) {
    position: relative;
    /* Apenas lo que la etiqueta necesita para recostarse sobre el borde. */
    margin-top: .35rem;
}

/* En una cuadrícula, la separación entre campos la pone el gutter de la fila.
   El margen inferior del propio campo la duplicaría, así que se retira; los
   campos apilados dentro de una misma columna sí lo conservan entre ellos.
   Lleva !important porque las utilidades de espaciado de Bootstrap lo usan. */
.row > [class*="col"] > .mb-3:last-child {
    margin-bottom: 0 !important;
}

/* Una fila que contiene campos se aprieta un poco: en un formulario largo,
   ese aire de más obliga a hacer scroll para ver lo mismo. */
.row:has(> [class*="col"] > .mb-3) {
    --bs-gutter-y: .85rem;
}

.mb-3:has(> .form-control) > .form-label,
.mb-3:has(> .form-select) > .form-label,
.mb-3:has(> .input-group) > .form-label {
    position: absolute;
    top: 0;
    left: 11px;
    z-index: 2;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 5px;
    /* El trozo de fondo tapa la línea del borde justo detrás del texto. */
    background-color: var(--sigs-fondo-campo, #fff);
    font-size: .68rem;
    letter-spacing: .03em;
    line-height: 1.2;
    max-width: calc(100% - 14px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transition: color .15s ease;
}

/* Al enfocar, la etiqueta acompaña al campo. */
.mb-3:has(> .form-control:focus) > .form-label,
.mb-3:has(> .form-select:focus) > .form-label {
    color: var(--sigs-acento);
}

/* Lo obligatorio se marca en el nombre, no en un texto aparte. */
.form-label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

/* Sobre una zona gris, la etiqueta toma ese mismo fondo para seguir
   interrumpiendo el borde sin dejar un parche blanco. El tono es el que el
   tema le da a .bg-light, no el gris genérico de Bootstrap. */
.bg-light .mb-3,
.card-footer .mb-3 {
    --sigs-fondo-campo: #f0f4f7;
}

.form-text {
    font-size: .78rem;
    margin-top: .35rem;
}

/* La separación entre campos la aporta el gutter de la fila (ver más abajo);
   el margen propio de Bootstrap solo actúa entre campos apilados en una
   misma columna. */

.badge {
    font-weight: 600;
    border-radius: 7px;
    padding: .34em .6em;
}

.topbar-custom {
    box-shadow: 0 1px 0 var(--sigs-borde);
}

.logo-box {
    padding: 12px 16px;
}

/* --- Botones suaves (un solo acento) --- */
.btn-soft-primary { background-color: rgba(var(--bs-primary-rgb), .1); color: var(--sigs-acento); border: none; }
.btn-soft-primary:hover { background-color: var(--sigs-acento); color: #fff; }
.btn-soft-success { background-color: rgba(25, 135, 84, .12); color: #198754; border: none; }
.btn-soft-success:hover { background-color: #198754; color: #fff; }
.btn-soft-danger { background-color: rgba(220, 53, 69, .1); color: #dc3545; border: none; }
.btn-soft-danger:hover { background-color: #dc3545; color: #fff; }

/* --- Cifras --- */
.cifra {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.cifra-grande { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.monto-positivo { color: #198754; }
.monto-negativo { color: #dc3545; }

td.text-end .cifra, th.text-end { font-variant-numeric: tabular-nums; }

/* --- Tarjetas de cuenta: minimalistas, sin franjas de color --- */
.tarjeta-cuenta {
    border: 1px solid var(--sigs-borde);
    transition: box-shadow .2s ease, transform .2s ease;
}
.tarjeta-cuenta:hover {
    box-shadow: var(--sigs-sombra-lg);
    transform: translateY(-1px);
}

.icono-cuenta {
    width: 42px;
    height: 42px;
    border-radius: var(--sigs-radio-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* --- Tablas de datos ---
   El encabezado se separa del cuerpo por una línea firme y va en versalitas
   pequeñas; las filas respiran con más alto para que se puedan recorrer. */
.table-sigs > :not(caption) > * > * { padding: .72rem .85rem; }

.table-sigs thead th {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sigs-texto-muted);
    background-color: transparent;
    border-bottom: 1.5px solid #d9dfea;
}

.table-sigs tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), .03); }
.table-sigs tbody td { border-bottom: 1px solid var(--sigs-borde); }
.table-sigs .fila-personal { background-color: rgba(255, 193, 7, .06); }

/* Dos niveles dentro de una celda: el dato principal y su contexto debajo. */
.celda-titulo { font-weight: 600; color: var(--sigs-oscuro); margin-bottom: 2px; }
.celda-sub { font-size: .78rem; color: var(--sigs-texto-muted); line-height: 1.45; }

.badge-ambito-personal { background-color: rgba(255, 193, 7, .18); color: #997404; }

/* --- Semáforo de presupuesto --- */
.barra-presupuesto { height: 8px; border-radius: 4px; background-color: #eef0f4; overflow: hidden; }
.barra-presupuesto > span { display: block; height: 100%; border-radius: 4px; }

/* --- Filtros --- */
.panel-filtros { background-color: #fff; border: 1px solid var(--sigs-borde); border-radius: .5rem; }

/* Barra de cierre de un formulario largo: se lee como el final de la
   pantalla, después de haber revisado todo lo de arriba. */
.barra-acciones {
    background-color: #fff;
    border: 1px solid var(--sigs-borde);
    border-radius: var(--sigs-radio-lg);
    box-shadow: var(--sigs-sombra-sm);
    padding: .9rem 1.1rem;
}

/* --- Captura rápida --- */
.selector-tipo .btn { padding: .85rem .5rem; font-weight: 600; }
.selector-tipo .btn i { display: block; font-size: 1.5rem; margin-bottom: .25rem; }
.selector-tipo .btn-check:checked + .btn {
    background-color: var(--sigs-acento);
    border-color: var(--sigs-acento);
    color: #fff;
}
.selector-tipo .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* ===================================================================
   Menú lateral: blanco y minimalista, con una franja de acento azul
   suave que se desliza detrás del ítem apuntado.
   =================================================================== */

.app-sidebar-menu {
    background-color: #ffffff;
    border-right: 1px solid var(--sigs-borde);
    box-shadow: none;
}

/* En escritorio la barra superior arranca donde termina el menú, así que el
   hueco que el tema reserva arriba para esquivarla queda vacío: el logo lo
   ocupa. En pantallas chicas la barra sí cruza por encima y el hueco se
   mantiene, si no el logo quedaría tapado. */
@media (min-width: 992px) {
    .app-sidebar-menu {
        padding-top: 0;
    }
}

/* El tema base esconde el logo del menú (lo espera en la barra superior) y
   además lo encierra en un cuadro fijo de 70×70 posicionado absoluto. Aquí
   el logo encabeza el menú, así que se le devuelve el flujo y su tamaño. */
.app-sidebar-menu .logo-box {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left;
    padding: 12px 22px 10px;
}

.app-sidebar-menu .logo-box .logo {
    display: block;
    line-height: normal;
}

.app-sidebar-menu .logo-box img {
    height: 64px !important;
    max-height: none !important;
    width: auto !important;
    max-width: 100%;
}

#sidebar-menu {
    position: relative;
    padding: 6px 0 0;
}

#sidebar-menu .menu-title {
    color: #a3aabb;
    opacity: 1;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 22px 22px 8px;
}

#sidebar-menu #side-menu {
    position: relative;
}

#sidebar-menu #side-menu > li > a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 2px 10px;
    padding: 10px 14px;
    color: #55607a;
    font-weight: 500;
    border-radius: 10px;
    transition: color .2s ease;
}

#sidebar-menu #side-menu > li > a svg {
    fill: none;
    stroke: currentColor;
    height: 17px;
    width: 17px;
}

/* Hover/foco: color tenue, y solo si el ítem no es ya el seleccionado
   (el seleccionado ya tiene su propio color fijo, ver más abajo). */
#sidebar-menu #side-menu > li > a:hover:not(.active),
#sidebar-menu #side-menu > li > a:focus:not(.active) {
    color: var(--sigs-acento);
}

#sidebar-menu #side-menu > li > a:hover:not(.active) svg,
#sidebar-menu #side-menu > li > a:focus:not(.active) svg {
    fill: none;
    stroke: var(--sigs-acento);
}

/* Seleccionado: color firme, fijo, independiente del mouse. */
#sidebar-menu #side-menu > li > a.active {
    color: #fff;
    font-weight: 600;
}

#sidebar-menu #side-menu > li > a.active svg {
    fill: none;
    stroke: #fff;
}

#sidebar-menu #side-menu > li > a .menu-arrow {
    margin-left: auto;
}

#sidebar-menu #side-menu > li > a .badge {
    margin-left: auto;
}

/* Dos resaltes independientes detrás de los ítems del menú:
   - "activo": firme, color sólido, se queda fijo en la opción seleccionada
     y solo se mueve (con animación) cuando eliges otra.
   - "hover": tenue, sigue al puntero mientras recorres el menú y desaparece
     al salir, sin afectar al indicador activo que queda debajo. */
.menu-indicador {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 42px;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                height .22s cubic-bezier(.4, 0, .2, 1),
                opacity .18s ease;
}

.menu-indicador--activo {
    background-color: var(--sigs-acento);
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), .3);
}

.menu-indicador--hover {
    background-color: rgba(var(--bs-primary-rgb), .08);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1),
                height .18s cubic-bezier(.4, 0, .2, 1),
                opacity .15s ease;
}

/* Submenús desplegables. */
#sidebar-menu .nav-second-level {
    padding-left: 44px;
    padding-right: 14px;
}

#sidebar-menu .nav-second-level li a {
    padding: 7px 12px;
    color: #7c869c;
    font-size: 13px;
    border-radius: 8px;
    transition: color .2s ease, background-color .2s ease;
}

#sidebar-menu .nav-second-level li a:hover,
#sidebar-menu .nav-second-level li a:focus {
    color: var(--sigs-acento);
    background-color: rgba(var(--bs-primary-rgb), .06);
}

/* ===================================================================
   Login: tarjeta partida en diagonal, sobre fondo claro.

   La versión anterior era casi negra y con un halo que latía; entrar a
   trabajar no necesita espectáculo. El único color fuerte queda en el panel
   de marca, y todo lo demás respira en blanco.
   ===================================================================*/

.pagina-login {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(58% 52% at 16% 18%, rgba(37, 99, 235, .10) 0%, rgba(37, 99, 235, 0) 62%),
        radial-gradient(48% 48% at 88% 84%, rgba(37, 99, 235, .07) 0%, rgba(37, 99, 235, 0) 62%),
        #f2f6fc;
    overflow-y: auto;
}

.login-card {
    position: relative;
    width: min(940px, 100%);
    min-height: 540px;
    display: flex;
    background-color: #fff;
    border-radius: 22px;
    overflow: hidden;
    /* Sombra de reposo, no de vitrina: profundidad sin resplandor. */
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, .05),
        0 24px 60px -28px rgba(15, 23, 42, .28);
}

.login-card__marca {
    position: relative;
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 56px 30px 56px 48px;
    color: #fff;
    background: linear-gradient(155deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
    clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}

.login-card__marca .logo-mini {
    height: 60px;
    width: fit-content;
    filter: brightness(0) invert(1);
    opacity: .95;
}

.login-card__marca h1 {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.login-card__marca p {
    font-size: .9rem;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 30ch;
}

.login-card__marca .lista-beneficios {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-card__marca .lista-beneficios li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .9);
}

.login-card__marca .lista-beneficios i {
    font-size: 1rem;
    color: #dbeafe;
}

.login-card__form {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Cada "cara" es una pantalla del panel derecho (ingresar / ayuda). Solo una
   está activa a la vez; se alternan con blur + desplazamiento + opacidad,
   escalonado campo por campo con la variable --i. */
.cara {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 56px 48px;
    pointer-events: none;
}

.cara.activa {
    pointer-events: auto;
}

.cara .anim {
    transform: translateX(22px);
    opacity: 0;
    filter: blur(6px);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1),
                opacity .35s ease,
                filter .35s ease;
    transition-delay: calc(.05s * var(--i, 0));
}

.cara.activa .anim {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
}

.enlace-contacto {
    color: #0f172a;
    font-size: .95rem;
    text-decoration: none;
    padding: 6px 30px 10px 2px;
    border-bottom: 1.5px solid #e2e8f0;
    display: block;
}

.enlace-contacto:hover {
    color: var(--sigs-acento);
}

@media (prefers-reduced-motion: reduce) {
    .cara .anim {
        transition: opacity .2s ease;
        transform: none !important;
        filter: none !important;
    }
}

.login-card__form h2 {
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-card__form .subtitulo {
    color: #64748b;
    font-size: .85rem;
    margin-bottom: 30px;
}

.campo-oscuro {
    position: relative;
    margin-bottom: 26px;
}

.campo-oscuro label {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.campo-oscuro .campo-envoltorio {
    position: relative;
    display: flex;
    align-items: center;
}

.campo-oscuro input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #dbe2ec;
    color: #0f172a;
    font-size: .95rem;
    padding: 6px 30px 10px 2px;
    transition: border-color .2s ease;
}

.campo-oscuro input::placeholder {
    color: #a5b0c2;
}

.campo-oscuro input:focus {
    outline: none;
    border-color: var(--sigs-acento);
}

.campo-oscuro i {
    position: absolute;
    right: 2px;
    color: #a5b0c2;
    font-size: 1.05rem;
    pointer-events: none;
}

.campo-oscuro input:focus ~ i {
    color: var(--sigs-acento);
}

.login-card__form .form-check-label {
    color: #64748b;
    font-size: .82rem;
}

.login-card__form .form-check-input {
    background-color: #fff;
    border-color: #cbd5e1;
}

.login-card__form .form-check-input:checked {
    background-color: var(--sigs-acento);
    border-color: var(--sigs-acento);
}

.btn-login {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: .8rem 1rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .55);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-login:hover,
.btn-login:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -8px rgba(37, 99, 235, .6);
}

.login-card__form .enlace-ayuda {
    color: #94a3b8;
    font-size: .8rem;
}

.login-card__error {
    background-color: #fdecef;
    border: 1px solid #f5c2cb;
    color: #b3243f;
    border-radius: 10px;
    padding: .55rem .8rem;
    font-size: .82rem;
    margin-bottom: 22px;
}

@media (max-width: 767.98px) {
    .login-card { flex-direction: column; min-height: 0; }
    .login-card__marca {
        clip-path: none;
        padding: 34px 28px;
        flex: none;
    }
    .login-card__marca .lista-beneficios { display: none; }
    .login-card__form { padding: 34px 28px 40px; }
}

/* --- Impresión de vouchers --- */
@media print {
    .app-sidebar-menu, .topbar-custom, .footer, .no-imprimir { display: none !important; }
    .content-page { margin-left: 0 !important; padding-top: 0 !important; }
}

/* ── Foto de respaldo ────────────────────────────────────────────────────────
   Para un gasto sin boleta la foto es la prueba, así que la zona de subida se
   ve y se toca como un botón grande, no como un input de archivo escondido. */
.respaldo__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.respaldo__zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 100%;
    padding: 1rem .75rem;
    border: 1.5px dashed var(--sigs-borde);
    border-radius: var(--sigs-radio);
    background-color: #f8fafc;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.respaldo__zona:hover,
.respaldo__input:focus-visible + .respaldo__zona {
    border-color: var(--sigs-acento);
    background-color: rgba(var(--bs-primary-rgb), .04);
}

.respaldo__zona .mdi {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--sigs-acento);
}

.respaldo__titulo {
    font-size: .82rem;
    font-weight: 600;
    color: #0f172a;
}

.respaldo__ayuda {
    font-size: .72rem;
    color: #64748b;
    line-height: 1.35;
}

/* Con foto cargada el texto pasa a ser el nombre del archivo: en verde para
   que se note que ya quedó, sin necesidad de leer. */
.respaldo--cargado .respaldo__zona {
    border-style: solid;
    border-color: #16a34a;
    background-color: rgba(22, 163, 74, .05);
}

.respaldo--cargado .respaldo__ayuda {
    color: #15803d;
    font-weight: 600;
}

.respaldo__actual {
    position: relative;
    margin-bottom: .6rem;
}

.respaldo__actual img {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: var(--sigs-radio);
    border: 1px solid var(--sigs-borde);
    display: block;
}

.respaldo__pdf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    border: 1px solid var(--sigs-borde);
    border-radius: var(--sigs-radio);
    background-color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.respaldo__pdf .mdi {
    font-size: 1.5rem;
    color: #dc2626;
}

.respaldo__quitar {
    margin-bottom: .55rem;
}

.respaldo__quitar .form-check {
    margin: 0;
    font-size: .74rem;
}

.respaldo__quitar .form-check-label {
    color: #b91c1c;
}

/* En la ficha del documento el borrado sí es un formulario propio, y se posa
   sobre la esquina de la foto. */
.respaldo__borrar {
    position: absolute;
    top: .4rem;
    right: .5rem;
    padding: .1rem .5rem;
    background-color: rgba(255, 255, 255, .94);
    border-radius: 999px;
    box-shadow: var(--sigs-sombra-sm);
    font-size: .72rem;
}

/* Menú de los atajos del topbar: dos caminos con su explicación debajo, así
   que necesita más aire que un dropdown de una línea. */
.dropdown-menu-atajo {
    min-width: 268px;
    padding: .4rem;
}

.dropdown-menu-atajo .dropdown-item {
    border-radius: var(--sigs-radio-sm);
    padding: .55rem .65rem;
    white-space: normal;
}

.dropdown-menu-atajo .dropdown-item strong {
    font-size: .85rem;
    color: #0f172a;
}

.dropdown-menu-atajo .dropdown-item:hover strong {
    color: var(--sigs-acento);
}

/* ── Navegación reordenada ───────────────────────────────────────────────────
   Siete entradas de primer nivel. Con menos ítems cada uno puede respirar, así
   que el interlineado sube en vez de apretarse. */
#sidebar-menu #side-menu > li > a {
    padding: .62rem 1.4rem;
}

/* Configuración vive al pie y en gris: se toca una vez y no más. */
#sidebar-menu #side-menu > li.menu-pie {
    margin-top: 1.4rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

#sidebar-menu #side-menu > li.menu-pie > a {
    font-size: .82rem;
    opacity: .72;
}

#sidebar-menu #side-menu > li.menu-pie > a:hover {
    opacity: 1;
}

/* El botón que abre cualquier trabajo nuevo. */
.boton-nuevo {
    border-radius: 999px;
    padding: .38rem .9rem;
    box-shadow: 0 4px 12px -4px rgba(var(--bs-primary-rgb), .5);
}

.boton-nuevo::after {
    display: none;
}

.dropdown-menu-atajo .dropdown-header {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: .5rem .65rem .2rem;
}

/* ── Navegación dentro de Configuración ─────────────────────────────────────
   Las siete pantallas que salieron del menú lateral viven aquí, donde se
   buscan: dentro de la sección a la que pertenecen. */
.nav-config {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem;
    background-color: #fff;
    border: 1px solid var(--sigs-borde);
    border-radius: var(--sigs-radio-lg);
}

.nav-config__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: var(--sigs-radio-sm);
    font-size: .81rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.nav-config__item .mdi {
    font-size: 1rem;
    opacity: .7;
}

.nav-config__item:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.nav-config__item.activo {
    background-color: var(--sigs-acento);
    color: #fff;
}

.nav-config__item.activo .mdi {
    opacity: 1;
}

/* El botón que pliega el menú: solo el ícono, sin la caja del navegador. */
.topbar-custom .button-menu-mobile {
    background: none;
    border: 0;
    box-shadow: none;
    padding: .35rem;
    margin-right: .35rem;
    border-radius: var(--sigs-radio-sm);
    color: #64748b;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: background-color .15s ease, color .15s ease;
}

.topbar-custom .button-menu-mobile:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.topbar-custom .button-menu-mobile svg {
    width: 20px;
    height: 20px;
}

/* ── Abrir una obra costeándola ──────────────────────────────────────────────
   Tres pasos numerados, porque el orden importa: qué es, qué cuesta, cuánto
   se cobra. El número los ancla sin necesidad de explicarlos. */
.paso {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: .45rem;
    border-radius: 50%;
    background-color: var(--sigs-acento);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: 1px;
}

/* El resultado del costeo: lo único que hay que mirar de esta pantalla. */
.resumen-precio {
    border: 1px solid var(--sigs-borde);
    border-radius: var(--sigs-radio);
    padding: 1rem 1.15rem;
    background-color: #f8fafc;
}

.resumen-precio__fila {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .84rem;
    color: #64748b;
    padding: .2rem 0;
}

.resumen-precio__fila--fuerte {
    margin-top: .4rem;
    padding-top: .55rem;
    border-top: 1px solid var(--sigs-borde);
    font-weight: 600;
    color: #0f172a;
}

/* El precio a cobrar es la respuesta de la pantalla: se lee de lejos. */
.resumen-precio__destacado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: .75rem 0;
    padding: .85rem 1rem;
    border-radius: var(--sigs-radio-sm);
    background-color: var(--sigs-acento);
    color: #fff;
    font-size: .82rem;
}

.resumen-precio__destacado .cifra {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.resumen-precio--perdida {
    border-color: #fca5a5;
    background-color: #fef2f2;
}

.resumen-precio--perdida .resumen-precio__destacado {
    background-color: #dc2626;
}

/* En la pantalla de la obra el precio se reparte solo entre las faenas, así
   que cobrar un material aparte no aplica: el control sobraría y confunde. */
.bloque-materiales--costo .form-check:has([data-cobrado-aparte]),
.bloque-materiales--costo .campo-venta-caja {
    display: none !important;
}

/* ── Tablero semanal de la cuadrilla ─────────────────────────────────────────
   Una fila por persona, una columna por día. Se llena de un vistazo, así que
   las celdas van apretadas y el sábado se marca para no confundirlo. */
.tabla-semana th,
.tabla-semana td {
    padding: .5rem .45rem;
}

.tabla-semana thead th {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.tabla-semana .celda-dia {
    min-width: 118px;
}

.tabla-semana .celda-obra {
    font-size: .78rem;
    padding: .28rem 1.6rem .28rem .5rem;
}

/* El estado de cada jornada se lee por color, sin abrir el desplegable:
   confirmado en azul, planificado en gris, ausencias en su propio tono. */
.tabla-semana .celda-obra.estado-trabajada {
    background-color: rgba(var(--bs-primary-rgb), .08);
    border-color: rgba(var(--bs-primary-rgb), .3);
    font-weight: 600;
    color: #0f172a;
}

.tabla-semana .celda-obra.estado-planificada {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
    font-style: italic;
}

.tabla-semana .celda-obra.estado-falta {
    background-color: #fdecef;
    border-color: #f0a9b6;
    color: #a01e3c;
    font-weight: 600;
}

.tabla-semana .celda-obra.estado-licencia {
    background-color: #fdf3e3;
    border-color: #e6c68a;
    color: #8a5a08;
}

.tabla-semana .celda-obra.estado-permiso {
    background-color: #e8f2fb;
    border-color: #a9cdec;
    color: #1f5f96;
}

.tabla-semana .columna-sabado {
    background-color: #f8fafc;
}

/* El día de hoy se ubica de un vistazo al llegar al tablero. */
.tabla-semana .columna-hoy {
    background-color: rgba(var(--bs-primary-rgb), .04);
    box-shadow: inset 2px 0 0 rgba(var(--bs-primary-rgb), .35),
                inset -2px 0 0 rgba(var(--bs-primary-rgb), .35);
}

/* ── Calce de la cartola ─────────────────────────────────────────────────────
   Cada línea del banco es una tarjeta con sus candidatos debajo. La decisión
   es de una persona, así que cada candidato tiene su propio botón. */
.rotulo-mini {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
}

.sugerencia {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem;
    margin-bottom: .4rem;
    border: 1px solid var(--sigs-borde);
    border-radius: var(--sigs-radio);
    background-color: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

.sugerencia:hover {
    border-color: var(--sigs-acento);
    background-color: rgba(var(--bs-primary-rgb), .03);
}

.sugerencia__datos {
    flex: 1;
    min-width: 0;
    font-size: .85rem;
}

.sugerencia__puntaje {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .sugerencia { flex-wrap: wrap; }
    .sugerencia__datos { flex-basis: 100%; }
}

/* Registrar lo que faltaba va plegado: es el camino menos frecuente y
   desplegado siempre alargaría cada tarjeta al triple. */
.registrar-nuevo > summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--sigs-acento);
    list-style: none;
    padding: .4rem 0;
}

.registrar-nuevo > summary::-webkit-details-marker {
    display: none;
}

.registrar-nuevo[open] > summary {
    margin-bottom: .2rem;
}

.linea-cartola .respaldo__zona {
    padding: .7rem;
}