/*
 * Portal de ejecutivos (sercotec.territoriaconsultores.cl).
 * Territoria Consultores - Rodrigo Donoso · 2026-10-10
 *
 * Sobrio: superficies planas, bordes finos, un solo color de acento (el naranjo de Territoria) y
 * rojo/verde sólo para avisar atraso o cumplimiento. Fondo oscuro por defecto (pedido de Rodrigo),
 * con cambio a claro que se recuerda en el navegador. Todos los colores salen de estas variables.
 */
:root, [data-tema="oscuro"] {
    --fondo: #111315; --tarjeta: #1a1d21; --tarjeta-2: #20242a; --borde: #2b3038;
    --texto: #eceef1; --texto-2: #a6adb7; --texto-3: #79818c;
    --acento: #f47920; --acento-suave: rgba(244, 121, 32, .14);
    --bien: #4cc38a; --bien-fondo: rgba(76, 195, 138, .14);
    --mal: #f2706b; --mal-fondo: rgba(242, 112, 107, .14);
    --aviso: #e9b949; --aviso-fondo: rgba(233, 185, 73, .14);
}
[data-tema="claro"] {
    --fondo: #f4f5f7; --tarjeta: #ffffff; --tarjeta-2: #f7f8fa; --borde: #e2e5ea;
    --texto: #1c2026; --texto-2: #5a626d; --texto-3: #8a919b;
    --acento: #d86715; --acento-suave: rgba(216, 103, 21, .10);
    --bien: #1d7f52; --bien-fondo: rgba(29, 127, 82, .10);
    --mal: #c0392b; --mal-fondo: rgba(192, 57, 43, .09);
    --aviso: #9a6b00; --aviso-fondo: rgba(154, 107, 0, .10);
}

* { box-sizing: border-box; }
html { background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; margin: 0; }
h1 { font-size: 1.45rem; line-height: 1.25; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; }

.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 24px;
    background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca-sello { width: 9px; height: 24px; border-radius: 2px; background: var(--acento); }
.marca-nombre { font-weight: 600; }
.marca-sub { color: var(--texto-3); font-size: .88rem; }
.barra-derecha { display: flex; align-items: center; gap: 16px; font-size: .88rem; color: var(--texto-2); }
.en-linea { display: inline; margin: 0; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-2); cursor: pointer; }
.enlace-boton:hover { color: var(--texto); text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 24px 40px; }
.pie { text-align: center; color: var(--texto-3); font-size: .8rem; padding: 0 24px 28px; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 18px 20px; }
.centro { text-align: center; }
.sub { color: var(--texto-2); font-size: .88rem; }
.tenue { color: var(--texto-3); font-size: .82rem; }

/* Ingreso */
.ingreso { max-width: 420px; margin: 8vh auto 0; }
.ingreso h1 { margin-bottom: 6px; }
.ingreso label { display: block; font-weight: 600; font-size: .88rem; margin: 18px 0 6px; }
.ingreso input[type=email], .ingreso input[type=text] { width: 100%; padding: 12px 14px; font: inherit; font-size: 1.05rem; color: var(--texto);
    background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: 8px; }
.ingreso input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.ingreso input.codigo { letter-spacing: .5em; text-align: center; font-size: 1.5rem; }
.boton { display: inline-block; background: var(--acento); color: #fff; border: 0; border-radius: 8px; padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.boton:hover { text-decoration: none; filter: brightness(1.06); }
.boton.ancho { width: 100%; margin-top: 18px; }
.mensaje { border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: .9rem; }
.mensaje.error { background: var(--mal-fondo); color: var(--mal); }
.mensaje.info { background: var(--acento-suave); color: var(--texto); }

/* Lista de proyectos */
.proyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.proyecto { display: block; color: var(--texto); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 18px 20px; }
.proyecto:hover { border-color: var(--acento); text-decoration: none; }
.proyecto h2 { margin-bottom: 8px; }

/* Encabezado de proyecto y pestañas */
.migas { font-size: .82rem; color: var(--texto-3); }
.migas a { color: var(--texto-2); }
.titulo-proyecto { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.pestanas { display: flex; gap: 26px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; }
.pestanas a { color: var(--texto-2); padding: 0 0 10px; white-space: nowrap; border-bottom: 2px solid transparent; }
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a.activa { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.indicador { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; min-height: 118px; }
.indicador .rotulo { color: var(--texto-2); font-size: .82rem; }
.indicador .valor { font-size: 1.9rem; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.indicador .detalle { color: var(--texto-3); font-size: .82rem; margin-top: 8px; }
.indicador .detalle.mal { color: var(--mal); }
.medidor { height: 5px; background: var(--tarjeta-2); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.medidor span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

.fila { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.fila.una { grid-template-columns: minmax(0, 1fr); }
.bloque-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--texto-2); margin: 6px 0 2px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; background: var(--acento); display: inline-block; }
.leyenda i.raya { width: 16px; height: 0; border-top: 2px dashed var(--texto-3); background: none; border-radius: 0; }
.vacio { color: var(--texto-3); font-size: .9rem; padding: 26px 0; text-align: center; }

table.lista { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 8px; }
table.lista td, table.lista th { padding: 9px 0; border-top: 1px solid var(--borde); text-align: left; vertical-align: top; }
table.lista th { color: var(--texto-3); font-weight: 500; font-size: .78rem; border-top: 0; padding-top: 0; }
table.lista .der { text-align: right; white-space: nowrap; padding-left: 12px; }
.etiqueta { display: inline-block; font-size: .76rem; padding: 2px 9px; border-radius: 20px; background: var(--tarjeta-2); color: var(--texto-2); white-space: nowrap; }
.etiqueta.bien { background: var(--bien-fondo); color: var(--bien); }
.etiqueta.mal { background: var(--mal-fondo); color: var(--mal); }
.etiqueta.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.hito { color: var(--acento); font-size: .76rem; font-weight: 600; margin-right: 6px; }

@media (max-width: 900px) {
    .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fila { grid-template-columns: minmax(0, 1fr); }
    main { padding: 18px 14px 32px; }
    .barra { padding: 10px 14px; }
    .marca-sub { display: none; }
}
@media (max-width: 480px) {
    .indicadores { grid-template-columns: minmax(0, 1fr); }
    .usuario { display: none; }
}
@media print {
    .barra-derecha, .pestanas { display: none; }
    html, body { background: #fff; }
}

/* Tablas largas (Actas y asistencia) */
.desplaza { overflow-x: auto; }
table.lista.ancha td, table.lista.ancha th { padding-right: 14px; }
table.lista.ancha td:last-child, table.lista.ancha th:last-child { padding-right: 0; }
.nowrap { white-space: nowrap; }
input.buscar { font: inherit; font-size: .88rem; color: var(--texto); background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: 8px;
    padding: 7px 12px; width: min(320px, 100%); }
input.buscar:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

/*
 * Vistas compartidas con el SIGE (hoy: actividades/vista_control.php). Su marcado usa clases de
 * Bootstrap, que el portal no carga: aquí van las pocas que esas vistas necesitan, con los colores
 * del portal. Si una vista compartida empieza a usar otra clase, se agrega acá.
 */
.vista-sige .card { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 14px; }
.vista-sige .card-body { padding: 18px 20px; }
.vista-sige .row { display: flex; flex-wrap: wrap; gap: 14px; }
.vista-sige .row > [class^="col-"] { flex: 1 1 100%; min-width: 0; }
.vista-sige h5 { font-size: .95rem; font-weight: 600; margin: 0 0 4px; }
.vista-sige .d-flex { display: flex; }
.vista-sige .flex-wrap { flex-wrap: wrap; }
.vista-sige .justify-content-between { justify-content: space-between; }
.vista-sige .align-items-center { align-items: center; }
.vista-sige .gap-2 { gap: 8px; }
.vista-sige .mb-0 { margin-bottom: 0; } .vista-sige .mb-1 { margin-bottom: 4px; } .vista-sige .mb-2 { margin-bottom: 8px; } .vista-sige .mb-3 { margin-bottom: 16px; }
.vista-sige p { margin-top: 0; }
.vista-sige .text-muted { color: var(--texto-2); }
.vista-sige .small, .vista-sige small { font-size: .82rem; }
.vista-sige .text-nowrap { white-space: nowrap; }
.vista-sige .btn { font: inherit; font-size: .82rem; color: var(--texto-2); background: transparent; border: 1px solid var(--borde); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.vista-sige .btn:hover { color: var(--texto); border-color: var(--texto-3); }
.vista-sige .table-responsive { overflow-x: auto; }
.vista-sige .table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vista-sige .table th { color: var(--texto-3); font-weight: 500; font-size: .78rem; text-align: left; padding: 0 12px 8px 0; position: sticky; top: 0; background: var(--tarjeta); }
.vista-sige .table td { padding: 8px 12px 8px 0; border-top: 1px solid var(--borde); vertical-align: middle; }
.vista-sige .badge { display: inline-block; font-size: .76rem; font-weight: 500; padding: 2px 9px; border-radius: 20px; white-space: nowrap; background: var(--tarjeta-2); color: var(--texto-2); }
.vista-sige .badge.bg-success { background: var(--bien-fondo); color: var(--bien); }
.vista-sige .badge.bg-danger { background: var(--mal-fondo); color: var(--mal); }
.vista-sige .badge.bg-warning { background: var(--aviso-fondo); color: var(--aviso); }
.vista-sige .badge.bg-primary { background: var(--acento-suave); color: var(--acento); }
.vista-sige .hito-rombo { background-color: var(--acento) !important; }
@media (min-width: 900px) {
    .vista-sige .row > .col-lg-6 { flex: 1 1 calc(50% - 7px); }
    .vista-sige .row > .col-lg-4 { flex: 1 1 calc(33.333% - 10px); }
    .vista-sige .row > .col-lg-8 { flex: 2 1 calc(66.666% - 10px); }
}

/* La carta Gantt del SIGE (actividades/gantt.css) con los colores del portal. */
.vista-sige .gantt-act { --gantt-borde: var(--borde); --gantt-texto: var(--texto); --gantt-tenue: var(--texto-3); --gantt-hoy: var(--mal); }
.vista-sige .gantt-act-encabezado { background: var(--tarjeta); }
.vista-sige .gantt-act-fila-actividad { background: var(--tarjeta-2); }
.vista-sige .gantt-act-barra { background: color-mix(in srgb, var(--color) 28%, var(--tarjeta)); }
.vista-sige .gantt-act-rombo { border-color: var(--tarjeta); }
.vista-sige .gantt-act-pendiente { background: var(--tarjeta) !important; }