/* Detectives con el uniforme del departamento (mismo mundo que el portal RMS: verde bosque, caqui,
 * bronce de la estrella; una sola familia, Public Sans). Se carga al final: solo reasigna tokens y
 * reviste la pantalla. Los documentos oficiales (hoja, membretes, tarjeta FI, Special Bulletin,
 * impresión y exportes) quedan con su letra y colores de siempre. */

:root {
  /* Claro: camisa caqui y tinta verde bosque */
  --ink: #1b281d;
  --muted: #585d4a;
  --line: #d5cab0;
  --paper: #e6ddc6;
  --panel: #f5f0e3;
  --link: #1b281d;
  --danger: #a13a2a;
  --gold: #9a7424;
  --gold-dk: #7c5c18;
  --green: #33412f;
  --green-deep: #16261a;
  --green-mid: #33412f;
  --tan: #9a8f73;
  --tan-soft: #ebe3cf;
  --table-head: #ebe3cf;
  --table-stripe: #f1ebdc;
  --sidebar-bg: #ede5d1;
  --sidebar-border: #d5cab0;
  --sidebar-hover: #e5dcc4;
  --utility-bg: #16261a;
  --input-border: #afa17f;
  --card-border: #d0c4a6;
  --notice-bg: #ebe3cf;
  --notice-border: #d0c4a6;
  --empty-bg: transparent;
  --photo-bg: #e5dcc4;
  --radius: 3px;
  --font: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --serif: var(--font);
  /* Variables que el CSS usa sin definir: ahora siguen el tema */
  --card: var(--panel);
  --border: var(--card-border);
  --surface-2: var(--tan-soft);
  --text: var(--ink);
  --card-bg: var(--panel);
  --ok: #2d6a39;
  /* Banda del uniforme: igual en los dos temas */
  --band: #16261a;
  --band-2: #1e3222;
  --band-ink: #ece5d3;
  --band-muted: #b7b299;
  --brass: #c9a24a;
  --brass-hi: #e0bf6c;
  --patch-bg: #1e3222;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #ece5d3;
  --muted: #a4a08a;
  --line: #243025;
  --paper: #0d130e;
  --panel: #141c15;
  --link: #ece5d3;
  --danger: #e27d6b;
  --gold: #c9a24a;
  --gold-dk: #9c7a2e;
  --green: #d3cbb5;
  --green-deep: #c9a24a;
  --green-mid: #d3cbb5;
  --tan: #7d7a66;
  --tan-soft: #1c261d;
  --table-head: #182119;
  --table-stripe: #161e17;
  --sidebar-bg: #111812;
  --sidebar-border: #223023;
  --sidebar-hover: #182219;
  --utility-bg: #16261a;
  --input-border: #3d4e40;
  --card-border: #273328;
  --notice-bg: #19231a;
  --notice-border: #2f3d31;
  --photo-bg: #19231a;
  --ok: #8cc08a;
  color-scheme: dark;
}

/* Documentos oficiales: su letra y sus links no siguen el tema (impresión, PNG y PDF salen como siempre) */
.doc-sheet, .fi-card, .fi-print, .sb-root, .bulletin-flyer {
  --font: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --serif: "Libre Baskerville", "Times New Roman", Times, serif;
  --link: #1a1a1a;
}

body { font-family: var(--font); }
::selection { background: color-mix(in srgb, var(--gold) 38%, transparent); color: var(--ink); }
:focus-visible { outline: 2px dashed var(--gold); outline-offset: 3px; }

/* ---------- Banda superior ---------- */
.masthead { background: var(--band); color: var(--band-ink); border-bottom: 2px solid var(--brass); }
.utility { background: var(--band); color: var(--band-muted); border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 12%, transparent); letter-spacing: .08em; font-size: .72rem; }
.utility .user-chip { color: var(--band-ink); }
.utility button, .masthead .theme-toggle {
  border-color: color-mix(in srgb, var(--band-ink) 24%, transparent); color: var(--band-ink); border-radius: var(--radius);
}
.utility button:hover, .masthead .theme-toggle:hover { border-color: var(--brass); background: var(--band-2); color: var(--band-ink); }
/* Vista de oficina activa: bronce liso con tinta oscura, legible en los dos temas */
.office-view-btn.active { background: var(--brass); border-color: var(--brass) !important; color: #1d1a0e; }
.mast-brand .brand-badge { width: 72px !important; height: 72px !important; filter: none; }
.mast-brand .brand-county { font-style: normal; font-size: .8rem; color: var(--band-muted); letter-spacing: .02em; }
.mast-brand .brand-dept { font-size: 1.3rem; font-weight: 700; color: var(--band-ink); letter-spacing: -.005em; }
.mast-brand .brand-portal { font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--brass-hi); }
.mast-meta { color: var(--band-muted); }
.mast-meta b { color: var(--brass-hi); }
/* Parches de la división: redondos con borde de bronce, como en el portal */
.unit-badges img {
  width: 60px; height: 60px; border-radius: 50%; padding: 5px;
  background: var(--patch-bg); border: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 55%, var(--patch-bg));
}
.unit-badges img.badge-mcb, .unit-badges img[alt="MCB"] { background: #f5f0e3 !important; }

/* ---------- Login ---------- */
.login-brand { background: var(--band); border-bottom: 2px solid var(--brass); }
.login-brand .brand-mark { filter: none; }
.login-brand-text .county { font-style: normal; color: var(--band-muted); }
.login-brand-text .dept { color: var(--band-ink); letter-spacing: -.005em; }
html[data-theme="dark"] .login-wrap { background: var(--paper); }
html[data-theme="dark"] .login-card input { background: #0f1610; border-color: var(--input-border); }

/* ---------- Menú lateral ---------- */
.side-nav .group { font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.side-nav button { border-left: 0; font-size: .9rem; font-weight: 500; border-radius: var(--radius); }
.side-nav button.active { background: var(--panel); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
.side-nav button.nav-shift-gold { border-left-width: 1px; border-radius: var(--radius); }
html[data-theme="dark"] .side-nav button.nav-shift-gold { color: var(--brass-hi); background: color-mix(in srgb, var(--brass) 16%, transparent); border-color: color-mix(in srgb, var(--brass) 55%, var(--card-border)); }
html[data-theme="dark"] .side-nav button.nav-shift-gold:hover,
html[data-theme="dark"] .side-nav button.nav-shift-gold.active,
html[data-theme="dark"] .side-nav button.nav-shift-gold.is-on-duty { background: color-mix(in srgb, var(--brass) 26%, transparent); color: var(--brass-hi); }

/* ---------- Contenido ---------- */
/* Espacio al final para que Nota y Chat nunca tapen los últimos controles */
.content { padding-bottom: 6rem; }
.page-head h1, .rd-view .page-head h1 { font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; }
.stat { border-top: 1px solid var(--card-border); }
.stat .n { font-weight: 800; font-size: 1.75rem; }
.stat .l { font-weight: 600; letter-spacing: .06em; }
.empty { border-color: var(--line); }
.rd-view { --rd-hero: var(--band); }
html[data-theme="dark"] .rd-view { --rd-hero: var(--band); }
.exp { --x-hero: var(--band); --x-chip-on: var(--band); --x-chip-ink: var(--band-ink); }
html[data-theme="dark"] .exp { --x-hero: var(--band); --x-chip-on: var(--brass); --x-chip-ink: #16200f; }
/* Esquinas del sistema (3px) también en Inicio, casos y expedientes */
.rd-view .card, .exp .card,
.rd-dash .caseload-card, .rd-dash .dash-queue, .rd-dash section.card, .rd-dash .stats .stat,
.rd-case .page-head, .exp-hero, .exp-person, .exp-case, .exp-nc, .exp-kpi, .exp-orgcard, .exp-recent .exp-docs,
.exp-seg button, .exp-empty-t { border-radius: var(--radius); }
.rd-archive table tbody td:first-child { border-radius: var(--radius) 0 0 var(--radius); font-family: var(--font); }

/* ---------- Botones y campos ---------- */
.btn { background: var(--band); border-color: var(--band); color: var(--band-ink); border-radius: var(--radius); letter-spacing: .02em; text-transform: none; font-size: .84rem; }
.btn:hover { opacity: 1; background: var(--band-2); border-color: var(--brass); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--input-border); }
.btn.ghost:hover { background: var(--sidebar-hover); border-color: var(--gold); }
html[data-theme="dark"] .btn { background: var(--brass); border-color: var(--brass); color: #16200f; }
html[data-theme="dark"] .btn:hover { background: var(--brass-hi); border-color: var(--brass-hi); }
html[data-theme="dark"] .btn.ghost { background: transparent; color: var(--ink); border-color: var(--input-border); }
html[data-theme="dark"] .btn.ghost:hover { background: var(--sidebar-hover); border-color: var(--gold); }
html[data-theme="dark"] .btn.danger, html[data-theme="dark"] .btn.ghost.danger { background: transparent; color: var(--danger); }
html[data-theme="dark"] .byc-filters .btn.active { background: var(--brass); color: #16200f; border-color: var(--brass); }
html[data-theme="dark"] .badge { background: var(--tan-soft); border-color: var(--input-border); color: var(--ink); }
html[data-theme="dark"] .crime-group-title { background: var(--table-head); color: var(--ink); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0f1610; border-color: var(--input-border); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); outline: none; }

/* ---------- Barra de turno ---------- */
.duty-call { font-family: var(--font); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }

/* ---------- Nota y Chat (flotantes) ---------- */
.live-fab { background: var(--panel); color: var(--ink); border-color: var(--card-border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .2); padding: .5rem .8rem; }
.live-fab-chat { background: var(--band); color: var(--band-ink); border-color: var(--brass); }
[data-theme="dark"] .live-fab { background: var(--panel); color: var(--ink); border-color: var(--input-border); }
[data-theme="dark"] .live-fab-chat { background: var(--brass); color: #16200f; border-color: var(--brass); }

/* ---------- Celular: los parches bajan debajo del título para no taparlo ---------- */
@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .actions { justify-content: flex-start; }
  .live-dock { flex-direction: row; right: .75rem; bottom: .75rem; }
  .live-fab { padding: .4rem .65rem; font-size: .72rem; }
  .masthead-inner { flex-wrap: wrap; gap: .6rem; padding: .75rem 1rem; }
  .mast-brand { flex: 1 1 100%; }
  .mast-brand .brand-badge { width: 48px !important; height: 48px !important; }
  .mast-brand .brand-dept { font-size: 1.05rem; }
  .mast-meta { flex: 1 1 100%; text-align: left; }
  .unit-badges { justify-content: flex-start; }
  .unit-badges img { width: 40px; height: 40px; padding: 3px; }
}

/* Mi cuenta */
.acct-card h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4rem; color: var(--muted, #9aa39a); }
.acct-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.acct-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold, #c9a24a); flex: none; }
.acct-initials { display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; background: rgba(201, 162, 74, .12); }
.acct-name { display: block; font-size: 1.1rem; }
.acct-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid rgba(128, 128, 128, .22); font-size: .92rem; }
.acct-row span { color: var(--muted, #9aa39a); }

/* Mi cuenta: la ficha del agente */
.pf-user { font-size: .95rem; font-weight: 500; color: var(--muted, #9aa39a); }
.pf-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; }
.pf-side { padding: 1rem; display: grid; gap: .8rem; }
.pf-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line, #243025); border-radius: 2px; }
.pf-initials { display: grid; place-items: center; font-size: 3rem; font-weight: 800; letter-spacing: .04em; background: var(--patch-bg, #1c3a24); color: var(--brass-hi, #e0bf6c); }
.pf-side-item { display: grid; gap: .2rem; }
.pf-side-item span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #9aa39a); }
.pf-status { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border: 1px solid var(--ok, #6fbf73); color: var(--ok, #6fbf73); border-radius: 2px; }
.pf-status.off { border-color: var(--danger, #d0584a); color: var(--danger, #d0584a); }
.pf-main { padding: 1rem 1.2rem 1.2rem; }
.pf-main h2 { font-size: 1rem; margin: 0 0 .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line, #243025); }
.pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin-bottom: .9rem; }
.pf-field.wide { grid-column: 1 / -1; }
.pf-field label, .pf-label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .3rem; }
.pf-value { min-height: 2.4rem; padding: .55rem .7rem; border: 1px solid var(--input-border, #3d4e40); background: var(--input-bg, #0f1610); border-radius: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-divs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .45rem; margin-bottom: .9rem; }
.pf-div { border: 1px solid var(--line, #243025); background: var(--panel-2, #19231a); padding: .45rem .6rem; border-radius: 2px; font-size: .86rem; }
.pf-div b { color: var(--gold, #c9a24a); font-size: .74rem; margin-right: .3rem; }
.pf-div em { display: block; font-style: normal; font-size: .78rem; color: var(--muted, #9aa39a); margin-top: .15rem; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } .pf-side { max-width: 320px; } .pf-fields { grid-template-columns: 1fr; } }

.pf-side .side-badge, [data-discipline] h2 .side-badge { font-size: .75rem; padding: .05rem .45rem; border: 1px solid var(--line, #243025); border-radius: 2px; margin-left: .35rem; }

/* Mis colores (Mi cuenta) */
.ui-colors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem 1rem; align-items: center; }
.ui-color { display: flex; align-items: center; gap: .6rem; font-size: .88rem; cursor: pointer; }
.ui-color input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--input-border); background: var(--panel); border-radius: var(--radius); cursor: pointer; flex: none; }

/* Personal: la misma visual que Personal del portal */
.pd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.pd-toolbar input { flex: 1 1 16rem; max-width: 22rem; }
.pd-toolbar select { max-width: 14rem; }
.pd-wrap { padding: 0; overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pd-table th, .pd-table td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pd-table th { background: var(--table-head); color: var(--muted); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.pd-table tbody tr.pd-row:nth-child(even) td { background: var(--table-stripe); }
.pd-table tr.pd-row { cursor: pointer; }
.pd-table tr.pd-row:hover td { background: var(--sidebar-hover); }
.pd-table tr.pd-row:focus-visible { outline: 2px dashed var(--gold); outline-offset: -3px; }
.pd-table tr.pd-group td { background: var(--table-head); color: var(--gold); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .5rem .65rem; }
.pd-table .mono { font-weight: 600; font-size: .86rem; }
.pd-table td b { font-weight: 700; }
.pd-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--patch-bg); color: var(--brass-hi); font-weight: 800; font-size: .8rem; letter-spacing: .04em; border: 1px solid color-mix(in srgb, var(--brass) 55%, var(--patch-bg)); }
img.pd-avatar { object-fit: cover; padding: 0; }
@media (max-width: 700px) { .pd-toolbar input, .pd-toolbar select { max-width: none; flex: 1 1 100%; } }

.pd-toolbar input, .pd-toolbar select { font: inherit; font-size: .92rem; color: var(--ink); background: var(--panel); border: 1px solid var(--input-border); border-radius: var(--radius); padding: .6rem .75rem; min-height: 2.6rem; }
.pd-toolbar select { min-width: 12rem; }
.pd-toolbar input:focus, .pd-toolbar select:focus { outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 1px; }