/* ComprasPRO WEB: tema propio sobre Bootstrap 5.1. Colores y medidas en variables para poder cambiar la marca en un solo lugar. */
:root {
    --marca: #3069e8;
    --marca-oscura: #2355c3;
    --marca-suave: #edf3ff;
    --menu-fondo: #fff;
    --menu-texto: #5c6c83;
    --fondo: #f5f7fb;
    --borde: #e4e9f0;
    --texto: #25344b;
    --texto-suave: #64748b;
    --radio: 0.75rem;
    --altura-topbar: 4.75rem;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); }
a:hover { color: var(--marca-oscura); }

.text-muted { color: var(--texto-suave) !important; }

/* ───────── Íconos ───────── */
.icono {
    flex: 0 0 auto;
    vertical-align: -0.2em;
}

/* ───────── Barra superior ───────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--altura-topbar);
    padding: 0 1rem;
    background: #fff;
    border-bottom: 1px solid var(--borde);
}

.topbar-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--texto-suave);
}

.topbar-boton:hover { background: var(--fondo); color: var(--texto); }

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--texto);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.marca-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #fff;
    font-weight: 800;
}

.topbar-empresa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca-oscura);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Menú del usuario (details nativo: sin JavaScript). */
.usuario-menu { position: relative; }
.usuario-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.usuario-menu > summary::-webkit-details-marker { display: none; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.usuario-nombre { font-size: 0.9rem; color: var(--texto); }

.usuario-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 14rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.usuario-panel-cab { padding: 0.75rem 1rem; border-bottom: 1px solid var(--borde); }

.usuario-salir {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: 0;
    background: #fff;
    color: #b91c1c;
    text-align: left;
}

.usuario-salir:hover { background: #fef2f2; }

/* ───────── Estructura: menú lateral + contenido ───────── */
.app {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--altura-topbar));
}

body.sin-sesion .app { min-height: 100vh; }

.menu-lateral {
    flex: 0 0 15.5rem;
    width: 15.5rem;
    background: var(--menu-fondo);
    padding: 0.75rem 0.6rem 1rem;
}

.menu-oculto .menu-lateral { display: none; }

.menu-velo { display: none; }

.menu-grupo {
    padding: 1rem 0.9rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.menu-lateral .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.15rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.55rem;
    color: var(--menu-texto);
    font-size: 0.92rem;
}

.menu-lateral .nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.menu-lateral .nav-link.active {
    background: rgba(99, 102, 241, 0.28);
    color: #fff;
    font-weight: 600;
}

.principal { flex: 1 1 auto; min-width: 0; }

.contenido {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

.contenido-ancho { max-width: none; }

@media (max-width: 767.98px) {
    .menu-lateral {
        position: fixed;
        top: var(--altura-topbar);
        bottom: 0;
        left: 0;
        z-index: 1040;
        overflow-y: auto;
    }

    body:not(.menu-oculto) .menu-velo {
        display: block;
        position: fixed;
        inset: var(--altura-topbar) 0 0 0;
        z-index: 1035;
        background: rgba(15, 23, 42, 0.45);
    }

    .usuario-nombre { display: none; }
    .contenido { padding: 1rem 1rem 2.5rem; }
}

/* ───────── Cabecera de página y avisos ───────── */
.encabezado-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* El título y su subtítulo se acomodan en el espacio que queda: "Volver" no baja de línea por un subtítulo largo. */
.encabezado-pagina > :first-child { flex: 1 1 20rem; min-width: 0; }
.encabezado-pagina h1 { font-weight: 700; letter-spacing: -0.01em; }

.encabezado-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-left: 4px solid;
    border-radius: 0.6rem;
}

.alerta .icono { margin-top: 0.15rem; }
.alert-success.alerta { border-left-color: #16a34a; background: #f0fdf4; color: #166534; }
.alert-warning.alerta { border-left-color: #d97706; background: #fffbeb; color: #92400e; }
.alert-danger.alerta { border-left-color: #dc2626; background: #fef2f2; color: #991b1b; }

/* ───────── Componentes de Bootstrap con la marca ───────── */
.btn { border-radius: 0.55rem; font-weight: 500; }
.btn .icono { margin-right: 0.15rem; }

.btn-primary { background-color: var(--marca); border-color: var(--marca); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--marca-oscura) !important; border-color: var(--marca-oscura) !important; }
.btn-outline-primary { color: var(--marca); border-color: var(--marca); }
.btn-outline-primary:hover { background-color: var(--marca); border-color: var(--marca); }

.form-control, .form-select { border-radius: 0.55rem; border-color: #cbd5e1; }
.form-control:focus, .form-select:focus { border-color: var(--marca); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.18); }
.form-label { font-weight: 500; }

.card {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card.shadow-sm { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important; }

.card .card-body > h2.h6 { font-weight: 700; }

a.card { color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
a.card:hover { border-color: var(--marca); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.12) !important; }
.card a { color: inherit; }

.nav-pills .nav-link { color: var(--texto-suave); border-radius: 999px; }
.nav-pills .nav-link.active { background: var(--marca); color: #fff; }

.badge { border-radius: 999px; font-weight: 600; padding: 0.35em 0.65em; }

/* Tablas */
.table > :not(caption) > * > * { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borde);
    background: transparent;
}
.table-hover > tbody > tr:hover > * { background-color: var(--marca-suave); }

/* El bootstrap.min.css incluido es la 5.1.0 y las vistas usan clases de la 5.2+ (distintivos "text-bg-*" y "fw-semibold"):
   sin esto los distintivos (Conectado, Terminada, Softland local...) quedan con texto blanco sobre fondo blanco.
   Mismos colores y contrastes que Bootstrap 5.2+; si se actualiza Bootstrap, este bloque se puede quitar. */
.text-bg-primary { color: #fff !important; background-color: var(--marca) !important; }
.text-bg-secondary { color: #fff !important; background-color: #64748b !important; }
.text-bg-success { color: #fff !important; background-color: #16a34a !important; }
.text-bg-danger { color: #fff !important; background-color: #dc2626 !important; }
.text-bg-warning { color: #1f2937 !important; background-color: #fbbf24 !important; }
.text-bg-info { color: #0c4a6e !important; background-color: #bae6fd !important; }
.text-bg-light { color: #1f2937 !important; background-color: #f1f5f9 !important; }
.fw-semibold { font-weight: 600 !important; }

/* ───────── Pantallas ───────── */
.tarjeta-modulo { display: flex; gap: 0.9rem; align-items: flex-start; }

.icono-recuadro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: var(--marca-suave);
    color: var(--marca);
}

.vacio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--texto-suave);
}

.vacio .icono-recuadro { width: 3.4rem; height: 3.4rem; margin-bottom: 0.75rem; }
.vacio h2 { font-size: 1rem; font-weight: 700; color: var(--texto); }

/* Inicio de sesión */
.login-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 20% 10%, #c7d2fe 0, transparent 45%), radial-gradient(circle at 85% 90%, #ddd6fe 0, transparent 40%), var(--fondo);
}

.login-tarjeta { width: 100%; max-width: 24rem; padding: 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12); }
.login-tarjeta .marca-logo { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; border-radius: 0.8rem; }

/* Administración con pestañas (el cambio de pestaña lo hace un pequeño script de la página) */
.pestana-panel[hidden] { display: none; }

textarea.sql {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.875rem;
}

/* Indicador de carga de HTMX: solo se ve mientras la solicitud está en curso. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* Estado de Resultados: tabla ancha (hasta 28 columnas); los títulos de grupo van en amarillo claro, como en la grilla del WinForms. */
.tabla-resultados th { white-space: nowrap; }
.tabla-resultados { font-size: 0.8125rem; }
.tabla-resultados tr.fila-resaltada > td { background-color: #ffffe0; }
.tabla-resultados tr.fila-separador > td { height: 0.75rem; padding: 0; border: 0; }
.tabla-resultados td.grupo { color: #6c757d; font-size: 0.75rem; }

body.sin-sesion .contenido { padding: 0; max-width: none; }

/* Portal Conecta · diseño aprobado para la WEB de trabajo. */
body{font-size:.875rem} .topbar{padding:0 1.6rem;gap:1.1rem}.marca{gap:.65rem}.marca-logo{background:var(--marca);width:2.4rem;height:2.4rem;letter-spacing:-1px;font-size:1.35rem}.marca-texto{font-size:1.25rem;line-height:1.15}.marca-texto small{display:block;font-size:.62rem;color:var(--texto-suave);letter-spacing:.04em;font-weight:400;margin-top:.2rem}.marca-texto em,.marca-conecta{color:var(--marca);font-style:normal}.marca-firma{font-size:.78rem;color:var(--texto-suave)}.avatar{background:#edf2fe;color:#4566a2}.menu-lateral{flex-basis:14rem;width:14rem;border-right:1px solid var(--borde);padding:1.5rem .9rem}.menu-cuenta{padding:0 .75rem 1rem}.menu-cuenta small{display:block;font-size:.58rem;letter-spacing:.1em;color:var(--texto-suave)}.menu-cuenta strong{display:block;margin-top:.5rem;font-size:.9rem}.menu-lateral .nav-link{padding:.7rem .75rem;font-size:.76rem;gap:.65rem}.menu-lateral .nav-link:hover{background:#f4f7fc;color:var(--texto)}.menu-lateral .nav-link.active{background:var(--marca-suave);color:var(--marca)}.menu-grupo{font-size:.6rem;letter-spacing:.1em}.contenido{max-width:1600px;padding:1.9rem 2.2rem 3rem}.contenido-ancho{max-width:none}.ruta-pagina{font-size:.7rem;color:#8290a5;margin-bottom:1.4rem}.ruta-pagina a{color:inherit}.encabezado-pagina{gap:1rem;margin-bottom:1.5rem}.encabezado-pagina h1{font-size:1.7rem;font-weight:650;letter-spacing:-.035em}.encabezado-pagina p{font-size:.78rem;line-height:1.65;max-width:58rem}.btn{font-size:.8rem;font-weight:600;padding:.55rem .85rem}.btn-sm{font-size:.72rem;padding:.38rem .65rem}.btn-primary{color:white}.form-label{font-size:.75rem;color:#5c6b81}.form-control,.form-select{font-size:.82rem;border-color:#dfe5ee}.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem #3069e824}.card{box-shadow:0 2px 3px #26395703;overflow:hidden}.card-body{padding:1.4rem}.card a.btn-primary{color:white}.table-responsive{background:white;border:1px solid var(--borde);border-radius:.75rem}.card .table-responsive{border:0}.table{margin-bottom:0;font-size:.78rem;color:var(--texto)}.table>:not(caption)>*>*{padding:.95rem 1.1rem;border-color:#eef1f6}.table thead th{font-size:.61rem;letter-spacing:.055em;background:#fafbfd;white-space:nowrap;vertical-align:middle}.table-hover>tbody>tr:hover>*{background:#fafcff}.table td{vertical-align:middle}.table td small{display:block;font-size:.68rem;color:var(--texto-suave);margin-top:.25rem}.table-warning{--bs-table-bg:#fffaf0;--bs-table-hover-bg:#fff5dd}.badge{border-radius:.4rem;font-size:.65rem;padding:.4rem .55rem}.text-bg-success{background:#eaf7f0!important;color:#147453!important}.text-bg-primary{background:#eaf1ff!important;color:#285fbb!important}.text-bg-secondary{background:#eef2f7!important;color:#5a6e88!important}.text-bg-warning{background:#fff5dd!important;color:#8c6015!important}.text-bg-danger{background:#fff0ef!important;color:#b04742!important}.nav-pills{gap:.5rem}.nav-pills .nav-link{font-size:.78rem;background:#eef2f7;padding:.55rem 1rem}.nav-pills .nav-link.active{background:var(--marca)}.portal-toolbar{background:white;border:1px solid var(--borde);border-radius:.75rem;padding:1rem 1.2rem;margin-bottom:1.25rem;display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}.portal-toolbar .form-control{min-width:14rem}.portal-estado-filtro{font-size:.75rem;color:var(--texto-suave);min-height:1em}.portal-tabs{margin:0 0 1.25rem}.portal-tabs .nav-link{white-space:nowrap}.portal-tabs-panel[hidden]{display:none!important}.portal-resumen{padding:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--borde)}.portal-resumen:last-child{border-bottom:0}.portal-resumen h2{font-size:.88rem;font-weight:650;margin:0 0 .35rem}.portal-resumen p{font-size:.76rem;color:var(--texto-suave);margin:0}.portal-resumen .btn{flex-shrink:0}.editor-detalle{margin-bottom:1.2rem}.editor-detalle>summary{color:var(--marca);font-weight:600;cursor:pointer;padding:.8rem 1rem;border:1px solid var(--borde);background:white;border-radius:.6rem;font-size:.8rem}.editor-detalle[open]>.dialog-contenido{background:white;padding:1.5rem;border:1px solid var(--borde);border-radius:.75rem}.dialog-preparado>summary{list-style:none;display:inline-block}.dialog-preparado>summary::-webkit-details-marker{display:none}.dialog-accion>summary{display:inline-block}.dialog-accion>summary::before{content:'＋ ';}.dialog-contenido{padding:1.5rem}.dialog-contenido .card{border:0;box-shadow:none}.dialog-contenido .card-body{padding:0}.dialog-contenido .row>[class*=col-md],.dialog-contenido .row>[class*=col-sm]{min-width:45%}.dialog-contenido .row>.col-auto{min-width:0}.dialog-contenido .table-responsive{max-height:45vh;overflow:auto}.portal-dialog{padding:0;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);width:min(44rem,calc(100% - 2rem));max-height:90vh;box-shadow:0 30px 100px #182e4c30}.portal-dialog::backdrop{background:#182e4c65;backdrop-filter:blur(3px)}.portal-dialog-cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.5rem;border-bottom:1px solid var(--borde);position:sticky;top:0;background:white;z-index:2}.portal-dialog-cab h2{font-size:1.2rem;font-weight:650;margin:0}.portal-dialog-cerrar{border:0;background:transparent;font-size:1.8rem;color:var(--texto-suave);line-height:1;padding:0 .3rem}.portal-dialog .dialog-contenido{overflow:auto}.portal-dialog-acciones{margin-top:1.5rem;border-top:1px solid var(--borde);padding-top:1rem;display:flex;gap:.5rem;justify-content:flex-end}.portal-dialog .encabezado-pagina,.portal-dialog .ruta-pagina{display:none}.portal-dialog [data-dialog-fragment]>.alert{margin-bottom:1rem}.portal-detalle-error{max-width:30rem;white-space:normal}.login-fondo{background:var(--fondo)}.login-tarjeta{border:1px solid var(--borde);box-shadow:0 12px 40px #2639570c;padding:2.4rem;max-width:26rem}.tarjeta-modulo{min-height:8rem}.tarjeta-modulo h2{font-size:.9rem}.tarjeta-modulo p{line-height:1.6}.tabla-resultados{font-size:.75rem}.tabla-resultados th{position:sticky;top:0;z-index:2}.tabla-informe{max-height:70vh;overflow:auto}.tabla-informe thead th{position:sticky;top:0;z-index:2}.tabla-informe td:first-child,.tabla-informe th:first-child{position:sticky;left:0;background:white;z-index:1}.tabla-informe th:first-child{background:#fafbfd;z-index:3}.saltar-contenido{position:fixed;top:-5rem;left:1rem;z-index:1100;padding:.7rem;background:white}.saltar-contenido:focus{top:.5rem}:focus-visible{outline:3px solid #80a8ff;outline-offset:3px}summary:focus-visible{outline:3px solid #80a8ff}.validation-summary-valid{display:none}
@media(max-width:1050px){.contenido{padding:1.5rem}.topbar-empresa{max-width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(max-width:767.98px){.contenido{padding:1.2rem 1rem 2rem}.topbar{padding:0 .8rem;gap:.5rem}.topbar-empresa{display:none}.marca-texto{font-size:1.05rem}.marca-logo{width:2rem;height:2rem}.encabezado-pagina h1{font-size:1.45rem}.encabezado-acciones{margin-left:0}.portal-dialog{max-height:94vh;width:calc(100% - 1rem)}.portal-dialog-cab,.dialog-contenido{padding:1.1rem}.dialog-contenido .row>[class*=col-md],.dialog-contenido .row>[class*=col-sm]{min-width:100%}.portal-toolbar>*{max-width:100%}.portal-toolbar .form-control{min-width:0}.portal-resumen{padding:1rem}.table>:not(caption)>*>*{padding:.8rem}.login-tarjeta{padding:1.7rem}.portal-dialog-acciones{flex-wrap:wrap}}

.editor-detalle:not(.dialog-accion):not(.editor-fila)>summary{position:relative;padding:1.3rem 5rem 1.3rem 1.3rem;width:100%;list-style:none}.editor-detalle>summary strong{display:block;font-size:.87rem;font-weight:650}.config-valor{display:block;font-size:.75rem;font-weight:400;color:var(--texto-suave);margin-top:.4rem}.config-editar{position:absolute;right:1.3rem;top:1.5rem;font-size:.75rem}.editor-fila[hidden]{display:none!important}.portal-dialog .dialog-contenido>.portal-toolbar{padding:0;border:0}.portal-dialog .config-editar{display:none}

.portal-dialog .card-body>h2:first-child{display:none}.portal-dialog .card-body>h2:first-child+p{margin-top:0}

.portal-estadisticas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.25rem 0}.portal-estadisticas>div{padding:1.1rem;border:1px solid var(--borde);border-radius:.65rem;background:#fafbfd}.portal-estadisticas small{font-size:.7rem;color:var(--texto-suave);display:block}.portal-estadisticas strong{font-size:1.4rem;font-weight:650;display:block;margin-top:.5rem;font-variant-numeric:tabular-nums}.portal-dialog .editor-detalle{margin:0}@media(max-width:1050px){.portal-estadisticas{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767.98px){.portal-estadisticas{gap:.6rem}.portal-estadisticas>div{padding:.8rem}.portal-estadisticas strong{font-size:1.2rem}}