:root {
    --c-fondo: #f6f7fb;
    --c-tinta: #1c2331;
    --c-tinta-suave: #495066;
    --c-borde: #d8dde6;
    --c-primario: #1a4ea0;
    --c-primario-hover: #143d80;
    --c-secundario: #495066;
    --c-acento: #b58900;
    --c-error: #b3261e;
    --c-info: #0d62a8;
    --c-ok: #2f6f3e;
    --c-warn: #b58900;
    --radio: 6px;
    --sombra: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.04);
    --max-ancho: 1100px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--c-tinta);
    background: var(--c-fondo);
    line-height: 1.55;
    font-size: 16px;
}

.container { max-width: var(--max-ancho); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--c-primario); }
a:hover { color: var(--c-primario-hover); }

h1, h2, h3 { color: var(--c-tinta); line-height: 1.25; margin-top: 1.5rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; border-bottom: 1px solid var(--c-borde); padding-bottom: .35rem; }
h3 { font-size: 1.15rem; }

p.lead { font-size: 1.15rem; color: var(--c-tinta-suave); }
.muted { color: var(--c-tinta-suave); }
.small { font-size: .85rem; }
.req { color: var(--c-error); margin-left: .15rem; }
.prewrap { white-space: pre-wrap; word-wrap: break-word; }

/* ---------- Topbar ---------- */
.topbar { background: white; border-bottom: 1px solid var(--c-borde); }
.topbar .container {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem; padding-top: .9rem; padding-bottom: .9rem;
}
.topbar.admin-bar { background: #1c2331; border-bottom: none; }
.topbar.admin-bar .brand, .topbar.admin-bar a, .topbar.admin-bar button { color: #fff; }
.brand {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 700; text-decoration: none; color: var(--c-tinta); font-size: 1.1rem;
}
.brand-mark { font-size: 1.5rem; }
.nav-main { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.nav-main a, .nav-main button { text-decoration: none; color: var(--c-tinta); font-weight: 500; background: none; border: none; cursor: pointer; padding: .25rem .25rem; }
.nav-main a.cta {
    background: var(--c-primario); color: white;
    padding: .45rem .95rem; border-radius: var(--radio);
    box-shadow: 0 2px 6px rgba(26,78,160,.35);
    font-weight: 700; letter-spacing: .01em;
}
.nav-main a.cta:hover { background: var(--c-primario-hover); box-shadow: 0 3px 10px rgba(26,78,160,.45); }
.nav-main a.cta.active { background: var(--c-primario-hover); outline: 2px solid var(--c-primario); outline-offset: 2px; }
.nav-main a.active:not(.cta) {
    color: var(--c-primario);
    border-bottom: 2px solid var(--c-primario);
    padding-bottom: calc(.25rem - 2px);
    font-weight: 700;
}

/* ---------- Main + Footer ---------- */
.main-content { padding: 1.5rem 1.25rem 3rem; }
.site-footer { background: white; border-top: 1px solid var(--c-borde); padding: 1.5rem 0; margin-top: 3rem; font-size: .9rem; }

/* ---------- Hero ---------- */
.hero { padding: 2rem 0 1rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- Cards / grids ---------- */
.card { background: white; border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra); margin: 1rem 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.metric { display: flex; flex-direction: column; align-items: center; padding: 1.5rem; }
.metric-num { font-size: 2.4rem; font-weight: 700; color: var(--c-primario); }

.info-callout {
    background: #fff8e6; border: 1px solid #f0d08a; border-left: 4px solid var(--c-acento);
    padding: 1rem 1.25rem; border-radius: var(--radio); margin: 2rem 0;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-block; padding: .55rem 1.05rem; border: 1px solid transparent;
    border-radius: var(--radio); font-weight: 600; cursor: pointer; text-decoration: none;
    background: var(--c-borde); color: var(--c-tinta); font-size: 1rem;
}
.btn-primary { background: var(--c-primario); color: white; border-color: var(--c-primario); }
.btn-primary:hover { background: var(--c-primario-hover); border-color: var(--c-primario-hover); color: white; }
.btn-secondary { background: white; border-color: var(--c-borde); color: var(--c-tinta); }
.btn-secondary:hover { background: #eef1f7; }
.btn-link { background: none; border: none; color: var(--c-primario); padding: .25rem .5rem; }
.btn-lg { padding: .85rem 1.4rem; font-size: 1.05rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Formularios ---------- */
.form-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 100%; }
.form-narrow { max-width: 480px; }
fieldset { border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 1.25rem; margin: 1rem 0; background: white; }
legend { font-weight: 700; padding: 0 .5rem; color: var(--c-primario); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=password], input:not([type]), select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--c-borde);
    border-radius: var(--radio); font: inherit; background: white;
}
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-primario); outline-offset: 1px; border-color: var(--c-primario); }
.check { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; }
.check input { margin-top: .3rem; }
.help { color: var(--c-tinta-suave); font-size: .9rem; margin: .25rem 0 .75rem; }
.error { color: var(--c-error); font-size: .9rem; min-height: 1em; }
.form-actions { display: flex; gap: .75rem; align-items: center; margin-top: .5rem; }
.conditional { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--c-borde); }

/* ---------- Acuse ---------- */
.acuse .num-expediente { font-size: 1.6rem; font-weight: 700; color: var(--c-primario); }
.codigo-box { background: #eef4ff; border: 2px dashed var(--c-primario); padding: 1.25rem; border-radius: var(--radio); margin: 1.5rem 0; }
.codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .07em; color: var(--c-primario); margin: .5rem 0 1rem; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; background: white; }
.tabla th, .tabla td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--c-borde); vertical-align: top; }
.tabla th { background: #f0f3fa; font-size: .9rem; }
.tabla.pequena { font-size: .9rem; }
.tabla tr:hover td { background: #f8faff; }

.filtros { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros input, .filtros select { width: auto; min-width: 220px; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.ficha dt { font-weight: 600; color: var(--c-tinta-suave); }
.ficha dd { margin: 0; }

/* ---------- Hilo de mensajes ---------- */
.hilo { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.msg { border: 1px solid var(--c-borde); border-radius: var(--radio); padding: .7rem .85rem; background: white; }
.msg-denunciante { border-left: 4px solid var(--c-primario); }
.msg-gestor { border-left: 4px solid var(--c-acento); background: #fffaee; }
.msg-interna { background: #fff3f3; border-left-color: var(--c-error); }
.msg .meta { font-size: .85rem; color: var(--c-tinta-suave); margin-bottom: .35rem; }
.msg .cuerpo { font-size: .98rem; }

/* ---------- Badges / tags ---------- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #e3e8f1; color: var(--c-tinta); }
.estado-0, .estado-1, .estado-2 { background: #fff0bf; color: #6a4f00; }
.estado-3 { background: #f7d7d4; color: #6a1410; }
.estado-4 { background: #d6e7ff; color: #103266; }
.estado-5 { background: #d6e7ff; color: #103266; }
.estado-6 { background: #d6f0d8; color: #1d4f2a; }
.estado-7 { background: #bfe9c5; color: #1d4f2a; }

.tag { display: inline-block; background: #e3e8f1; padding: .05rem .45rem; border-radius: 4px; font-size: .75rem; margin-left: .35rem; }
.tag.warn { background: #ffe9b3; color: #6a4f00; }

/* ---------- Audio recorder ---------- */
.audio-recorder { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: .9rem; border: 1px dashed var(--c-borde); border-radius: var(--radio); background: #f8faff; }
.audio-recorder .estado { font-weight: 600; color: var(--c-tinta-suave); }
.audio-recorder.grabando .estado { color: var(--c-error); animation: pulse 1.2s infinite; }
@@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Alerts ---------- */
.alert { padding: .85rem 1rem; border-radius: var(--radio); margin: 1rem 0; }
.alert-info { background: #e6f0fa; color: #0c3960; border: 1px solid #b8d6ee; }
.alert-danger { background: #fbe7e5; color: #6a1410; border: 1px solid #f1b1ab; }

/* ---------- Cabecera de expediente ---------- */
.exp-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }

/* Responsive */
@@media (max-width: 640px) {
    .nav-main { gap: .5rem; }
    .nav-main a { font-size: .92rem; }
}