/* Portal de consultas CONSULTCORP: negro y naranja, como la marca. */
:root {
    --naranja: #f26b21;
    --naranja-oscuro: #d4561a;
    --dorado: #f7a21b;
    --negro: #111111;
    --gris: #6b6b6b;
    --gris-claro: #f4f4f4;
    --borde: #e2e2e2;
    --verde: #2e9d4b;
    --amarillo: #e8a800;
    --rojo: #d93025;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Roboto", "Segoe UI", Arial, sans-serif;
    color: var(--negro);
    background: var(--gris-claro);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cabecera {
    background: var(--negro);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
    flex-wrap: wrap;
}

.marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.marca-nombre { color: var(--naranja); font-size: 22px; letter-spacing: 6px; font-weight: 500; }
.marca-flecha { font-size: 14px; margin: 0 6px; vertical-align: middle; }
.marca-lema { color: #cfcfcf; font-size: 10px; letter-spacing: 4px; margin-top: 2px; }
.cabecera-titulo { color: #cfcfcf; font-size: 15px; border-left: 1px solid #444; padding-left: 24px; }

.usuario { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; }
.usuario a, .boton-enlace { color: #fff; background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.usuario form { margin: 0; }

.contenido { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px; }
.pie { text-align: center; color: var(--gris); font-size: 12px; padding: 16px; }

.tarjeta { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 32px; }
.tarjeta-login { max-width: 420px; margin: 48px auto; }
.tarjeta-login h1 { margin-top: 0; font-size: 24px; font-weight: 500; }
.tarjeta-login label { display: block; margin: 16px 0 6px; font-size: 14px; color: var(--gris); }
.tarjeta-login input { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--borde); border-radius: 4px; }
.tarjeta-login input:focus { outline: 2px solid var(--naranja); border-color: var(--naranja); }
.ayuda { color: var(--gris); font-size: 14px; }
.error { color: var(--rojo); font-size: 14px; }
.boton-principal {
    margin-top: 24px; width: 100%; padding: 12px; font-size: 16px; color: #fff; cursor: pointer;
    background: var(--naranja); border: 0; border-radius: 4px;
}
.boton-principal:hover { background: var(--naranja-oscuro); }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.barra h1 { margin: 0; font-size: 24px; font-weight: 500; }
#reportes { display: flex; gap: 8px; flex-wrap: wrap; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.indicador { background: #fff; border-radius: 8px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid var(--naranja); }
.indicador .valor { font-size: 28px; font-weight: 500; }
.indicador .etiqueta { color: var(--gris); font-size: 13px; }
.indicador.verde { border-left-color: var(--verde); }
.indicador.amarillo { border-left-color: var(--amarillo); }
.indicador.rojo { border-left-color: var(--rojo); }

#grilla-tramites { background: #fff; border-radius: 8px; padding: 8px; }
.dx-datagrid-rowsview .dx-row.dx-data-row { cursor: pointer; }

.semaforo { display: inline-flex; align-items: center; gap: 6px; }
.semaforo::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #bbb; }
.semaforo.Verde::before { background: var(--verde); }
.semaforo.Amarillo::before { background: var(--amarillo); }
.semaforo.Rojo::before { background: var(--rojo); }

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: 0 0 18px 16px; }
.linea-tiempo li::before {
    content: ""; position: absolute; left: -27px; top: 3px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--naranja); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--naranja);
}
.linea-tiempo .fecha { font-size: 13px; color: var(--gris); }
.linea-tiempo .etapa { font-size: 12px; color: var(--naranja-oscuro); margin-left: 8px; }
.linea-tiempo .texto { margin-top: 2px; }
.vacio { color: var(--gris); font-style: italic; }
.seccion { margin: 8px 0 20px; }
.seccion h3 { font-size: 15px; font-weight: 500; margin: 0 0 10px; }

@media (max-width: 700px) {
    .contenido { padding: 12px; }
    .cabecera-titulo { display: none; }
    .marca-nombre { font-size: 18px; letter-spacing: 4px; }
}

/* Checklist de documentos */
.estado-doc { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.estado-doc.Recibido { background: #e3f4e8; color: #1f6e35; }
.estado-doc.Pendiente { background: #fdecea; color: #a52118; }
.estado-doc.Opcional { background: #fff4d6; color: #7a5a00; }
.estado-doc.No-aplica { background: #eeeeee; color: var(--gris); }
.pendientes-doc { font-weight: 500; color: var(--rojo); }
.aviso-documentos { border-left: 4px solid var(--rojo); background: #fdf3f2; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
.aviso-documentos.completo { border-left-color: var(--verde); background: #f1f9f3; }
.aviso-documentos ul { margin: 6px 0 0; padding-left: 20px; }
.aviso-documentos .observacion { color: var(--gris); font-size: 13px; }
.estado-doc.En-revision { background: #e6f0fb; color: #1b5aa6; }
.archivos-doc { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.archivos-doc .archivo { color: var(--naranja-oscuro); font-size: 13px; word-break: break-all; }
.archivos-doc .archivo::before { content: "📎 "; }
.aviso-documentos.revision { border-left-color: #1b5aa6; background: #eef4fb; }

/* Tablero BGR */
.enlace-vista { color: var(--naranja-oscuro); font-size: 14px; text-decoration: none; }
.enlace-vista:hover { text-decoration: underline; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; background: #fff; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.filtro label { display: block; font-size: 12px; color: var(--gris); margin-bottom: 4px; }
.filtro .rango { display: flex; gap: 8px; }
.tablero { transition: opacity .15s; }
.tablero.cargando { opacity: .5; }
.seccion-tablero { font-size: 18px; font-weight: 500; margin: 8px 0 12px; }
.seccion-tablero span { font-size: 13px; font-weight: 400; color: var(--gris); margin-left: 8px; }
.indicador .punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.indicador .detalle { font-size: 12px; color: var(--gris); margin-top: 2px; }
.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.tarjeta-grafico { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 14px 16px; min-width: 0; }
.tarjeta-grafico.ancha { grid-column: 1 / -1; }
.tarjeta-grafico .cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.tarjeta-grafico h3 { font-size: 15px; font-weight: 500; margin: 0; }
.tarjeta-grafico .subtitulo { font-size: 12px; color: var(--gris); margin: 2px 0 0; }
@media (max-width: 900px) {
    .tarjetas { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .filtro, .filtro .dx-selectbox { width: 100% !important; }
}