/* Paleta y tipografía alineadas al estándar visual de sispro.cl (ver app/templates/base.html del proyecto Python). */
:root {
    --color-primario: #1e3a8a;       /* blue-900: marca, sidebar, topbar */
    --color-primario-claro: #2563eb; /* blue-600: botones de acción */
    --color-primario-hover: #1d4ed8; /* blue-700 */
    --color-secundario: #15803d;     /* green-700: acciones positivas */
    --color-advertencia: #d97706;    /* amber-600 */
    --color-advertencia-fondo: #fffbeb;
    --color-error: #b91c1c;          /* red-700 */
    --color-error-fondo: #fef2f2;
    --color-exito-fondo: #f0fdf4;
    --color-fondo: #f3f4f6;          /* gray-100 */
    --color-superficie: #ffffff;
    --color-borde: #e5e7eb;          /* gray-200 */
    --color-texto: #1f2937;          /* gray-800 */
    --color-texto-tenue: #6b7280;    /* gray-500 */
    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radio: 10px;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.55;
    background: var(--color-fondo);
    margin: 0;
    color: var(--color-texto);
}

.barra-superior {
    background: var(--color-primario);
    color: #fff;
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.barra-superior .marca { display: flex; align-items: center; gap: .7rem; }
.barra-superior .marca img { height: 32px; width: 32px; object-fit: contain; border-radius: 8px; background: #fff; padding: .15rem; display: block; }
.barra-superior strong { font-size: 1rem; font-weight: 600; }
.barra-superior a { color: #dbeafe; text-decoration: none; margin-left: 1.3rem; font-size: .95rem; }
.barra-superior a:hover { color: #fff; text-decoration: underline; }

.contenedor { max-width: 1040px; margin: 2rem auto; padding: 0 1.2rem; }

.tarjeta {
    background: var(--color-superficie);
    border-radius: var(--radio);
    padding: 1.7rem;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
    border: 1px solid var(--color-borde);
    margin-bottom: 1.5rem;
}

h1 { font-size: 1.6rem; font-weight: 700; margin-top: 0; color: var(--color-texto); }
h2 { font-size: 1.2rem; font-weight: 600; margin-top: 0; color: var(--color-texto); }

label { display: block; font-size: .92rem; color: var(--color-texto-tenue); margin-bottom: .3rem; margin-top: .9rem; font-weight: 500; }

input, select {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--fuente);
    color: var(--color-texto);
}
input:focus, select:focus {
    outline: none;
    border-color: var(--color-primario-claro);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

button {
    background: var(--color-primario-claro);
    color: #fff;
    border: none;
    padding: .65rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    font-family: var(--fuente);
    margin-top: 1rem;
    transition: background-color .15s ease;
}
button:hover { background: var(--color-primario-hover); }
button.secundario { background: var(--color-borde); color: var(--color-texto); }
button.secundario:hover { background: #d1d5db; }
button.peligro { background: var(--color-error); }
button.peligro:hover { background: #991b1b; }
button:disabled { opacity: .55; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; margin-top: .9rem; }
th, td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--color-borde); font-size: .95rem; }
th { color: var(--color-texto-tenue); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

.mensaje { padding: .8rem 1.1rem; border-radius: 8px; margin-top: 1rem; font-size: .92rem; }
.mensaje.ok { background: var(--color-exito-fondo); color: var(--color-secundario); }
.mensaje.error { background: var(--color-error-fondo); color: var(--color-error); }

.estado-chip { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.estado-chip.vinculado { background: var(--color-exito-fondo); color: var(--color-secundario); }
.estado-chip.pendiente { background: var(--color-advertencia-fondo); color: var(--color-advertencia); }

.enlace-caja { display: flex; gap: .5rem; margin-top: .7rem; }
.enlace-caja input { flex: 1; }
.acciones-rapidas a { margin-right: .9rem; font-size: .9rem; color: var(--color-primario-claro); text-decoration: none; }
.acciones-rapidas a:hover { text-decoration: underline; }

.fila-filtros { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }
.fila-filtros > div { flex: 1; min-width: 160px; }
.fila-filtros label { margin-top: 0; }

.metricas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.metrica { flex: 1; min-width: 170px; background: var(--color-fondo); border-radius: var(--radio); padding: 1rem 1.1rem; }
.metrica .valor { font-size: 1.7rem; font-weight: 700; color: var(--color-primario); }
.metrica .etiqueta { font-size: .85rem; color: var(--color-texto-tenue); margin-top: .15rem; }

.barra-tipo-pago { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: .7rem; background: var(--color-borde); }
.barra-tipo-pago span { display: block; height: 100%; }
.leyenda-tipo-pago { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; font-size: .88rem; color: var(--color-texto-tenue); }
.leyenda-tipo-pago .punto { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; }