/* SICEM: base y componentes de las pantallas de administracion (va despues de nucleo.css).
   Orden: 3 base · 5 encabezado · 6 paneles · 7 cifras y metas · 8 botones · 9 formularios ·
   10 tablas · 11 etiquetas y avisos · 12 ventanas · 13 graficas y mapas · 14 utilidades ·
   15 compatibilidad con Bootstrap · 16 impresion y movimiento reducido.
   Fuentes, tokens y menu (1, 2 y 4) estan en nucleo.css. */

/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font: 400 var(--fs-3)/1.5 var(--fuente); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--tinta); font-family: var(--fuente); line-height: 1.25; letter-spacing: -.011em; text-wrap: balance; margin-top: 0; }
h1 { font-size: var(--fs-7); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--fs-6); font-weight: 650; }
h3 { font-size: var(--fs-5); font-weight: 600; }
h4 { font-size: var(--fs-4); font-weight: 600; }
h5, h6 { font-size: var(--fs-3); font-weight: 600; }
p { text-wrap: pretty; }
a { color: var(--marca-texto); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--marca-texto); text-decoration: underline; }
strong, b { font-weight: 600; }
small, .small { font-size: var(--fs-2); }
hr { border: 0; border-top: 1px solid var(--borde); opacity: 1; }
::selection { background: var(--marca-200); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
input, textarea, select, button { font: inherit; }
input, textarea { caret-color: var(--marca); }
img, svg, video, canvas { max-width: 100%; }
code, kbd, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Barras de desplazamiento discretas en la paleta */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 5. Encabezado de pagina ---------------------------------------------------- */
.page-header {
  position: static; overflow: visible; margin: 0 0 var(--e-6); padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.page-header::before, .page-header::after { content: none; display: none; }
.page-header h1, .encabezado h1 {
  display: flex; align-items: center; gap: 10px; margin: 0; color: var(--tinta);
  font-size: var(--fs-7); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.page-header h1 i, .encabezado h1 i { color: var(--marca); font-size: .9em; }
.page-header p, .page-header .subtitle, .encabezado p { margin: 6px 0 0; color: var(--tenue); font-size: var(--fs-3); max-width: 75ch; }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin: 0 0 var(--e-6); }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.sello { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--tenue); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.sello::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--exito); }
.context-breadcrumb { display: none; }

/* 6. Paneles --------------------------------------------------------------- */
.panel, .content-card, .content-container, .chart-card, .stat-card, .user-info-card, .password-section {
  position: relative; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-panel); box-shadow: none; padding: var(--e-5);
  margin-bottom: var(--e-5); transform: none;
}
.chart-card::before, .content-card::before, .stat-card::before { content: none; display: none; }
.chart-card:hover, .stat-card:hover, .content-card:hover { transform: none; box-shadow: none; }
.panel-cabeza, .section-header, .card-header-custom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
  margin: 0 0 var(--e-4); padding: 0; border: 0;
}
.panel-cabeza h2, .panel-cabeza h3, .section-header h2, .section-header h3, .panel-titulo {
  display: flex; align-items: center; gap: 8px; margin: 0; color: var(--tinta); font-size: var(--fs-4); font-weight: 600; letter-spacing: -.005em;
}
.panel-cabeza h2 i, .panel-cabeza h3 i, .section-header h3 i, .section-header h2 i { color: var(--tenue); font-size: 1.05em; }
.panel-cabeza .accion, .panel-cabeza a { font-size: var(--fs-2); font-weight: 500; }
.panel-sub { margin: 2px 0 0; color: var(--tenue); font-size: var(--fs-2); }
.panel--hundido { background: var(--superficie-2); }
.panel--sin-borde { border-color: transparent; }
/* Tarjeta estirada a la altura de su fila: la accion queda al pie */
.panel--con-pie { display: flex; flex-direction: column; }
.panel-pie { margin-top: auto; align-self: flex-start; }
.panel--con-pie .tabla-leyenda { margin-bottom: var(--e-4); }

.rejilla { display: grid; gap: var(--e-5); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rejilla > * { min-width: 0; margin-bottom: 0; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: 1 / -1; }
@media (max-width: 1199.98px) { .rejilla .col-4, .rejilla .col-5, .rejilla .col-7, .rejilla .col-8 { grid-column: span 6; } }
@media (max-width: 767.98px) { .rejilla > * { grid-column: 1 / -1 !important; } .rejilla { gap: var(--e-4); } }

/* Lista clave-valor */
.datos { display: grid; margin: 0; }
.datos > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); padding: 10px 0; border-top: 1px solid var(--regla); }
.datos > div:first-child { border-top: 0; padding-top: 0; }
.datos dt { color: var(--tenue); font-weight: 400; }
.datos dd { margin: 0; color: var(--tinta); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* Vacio */
.vacio { display: grid; place-items: center; gap: 6px; padding: var(--e-6); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-control); color: var(--tenue); text-align: center; }
.vacio i { font-size: 22px; color: var(--sutil); }

/* Esqueleto de carga */
.esqueleto { display: block; background: var(--superficie-3); border-radius: 6px; color: transparent !important; }

/* 7. Cifras y metas ------------------------------------------------------------ */
.cifras { display: grid; grid-template-columns: repeat(var(--cifras-cols, 4), minmax(0, 1fr)); margin-bottom: var(--e-5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-panel); }
.cifra { min-width: 0; padding: var(--e-5); color: inherit; }
.cifra + .cifra { border-left: 1px solid var(--borde); }
a.cifra { transition: background-color var(--t-rapida) ease; }
a.cifra:hover { background: var(--superficie-2); text-decoration: none; }
a.cifra:first-child:hover { border-radius: var(--r-panel) 0 0 var(--r-panel); }
a.cifra:last-child:hover { border-radius: 0 var(--r-panel) var(--r-panel) 0; }
.cifra__nombre { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tenue); font-size: var(--fs-2); font-weight: 500; }
.cifra__nombre i { color: var(--sutil); }
.cifra__valor { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; color: var(--tinta); font-size: var(--fs-8); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.cifra__valor small { color: var(--tenue); font-size: var(--fs-3); font-weight: 450; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cifra__pie { display: flex; justify-content: space-between; gap: var(--e-2); margin-top: 10px; color: var(--tenue); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.cifra__pie strong { color: var(--tinta); font-weight: 600; }
@media (max-width: 991.98px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra + .cifra { border-left: 0; }
  .cifra:nth-child(even) { border-left: 1px solid var(--borde); }
  .cifra:nth-child(n + 3) { border-top: 1px solid var(--borde); }
}
@media (max-width: 420px) { .cifra { padding: var(--e-4); } .cifra__valor { font-size: var(--fs-7); } }

/* Barra de avance: la proporcion real, extremos con su cifra */
.metro { position: relative; height: 8px; margin-top: 12px; border-radius: var(--r-pastilla); background: var(--marca-100); overflow: hidden; }
.metro > span {
  display: block; height: 100%; width: 0; border-radius: inherit; background: var(--marca);
  transition: width 700ms var(--curva);
}
.metro--lleno > span { background: var(--exito); }

/* Progress de Bootstrap, en la misma lengua */
.progress { height: 8px; background: var(--marca-100); border-radius: var(--r-pastilla); box-shadow: none; overflow: hidden; }
.progress-bar { background-color: var(--marca); color: var(--marca-sobre); transition: width 700ms var(--curva); }
.progress-bar.bg-success { background-color: var(--exito) !important; }
.progress-bar.bg-warning { background-color: var(--aviso) !important; }
.progress-bar.bg-danger { background-color: var(--peligro) !important; }
.progress-bar.bg-info { background-color: var(--info) !important; }

/* 8. Botones ---------------------------------------------------------------- */
.btn, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-alto);
  padding: 7px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-control);
  background: var(--superficie); color: var(--tinta); font-size: var(--fs-3); font-weight: 550; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color var(--t-rapida) ease, border-color var(--t-rapida) ease, color var(--t-rapida) ease, transform var(--t-rapida) var(--curva), box-shadow var(--t-rapida) ease;
}
.btn:hover, .boton:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; transform: none; box-shadow: none; }
.btn:active, .boton:active { transform: scale(.97); }
.btn:focus, .btn.focus { box-shadow: none; outline: 0; }
.btn:focus-visible, .boton:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--anillo); }
.btn:disabled, .btn.disabled, .boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn i, .boton i { font-size: 1.05em; }

.btn-primary, .boton--primario, .btn-primario {
  background: var(--marca) !important; border-color: var(--marca) !important; color: var(--marca-sobre) !important;
}
.btn-primary:hover, .boton--primario:hover, .btn-primario:hover,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
  background: var(--marca-fuerte) !important; border-color: var(--marca-fuerte) !important; color: var(--marca-sobre) !important;
}
.btn-success { background: var(--marca) !important; border-color: var(--marca) !important; color: var(--marca-sobre) !important; }
.btn-danger { background: var(--peligro-relleno) !important; border-color: var(--peligro-relleno) !important; color: #FFFFFF !important; }
.btn-warning { background: var(--aviso-suave) !important; border-color: color-mix(in srgb, var(--aviso) 45%, transparent) !important; color: var(--aviso-tinta) !important; }
.btn-info { background: var(--info-suave) !important; border-color: color-mix(in srgb, var(--info) 35%, transparent) !important; color: var(--info-tinta) !important; }
.btn-success:hover { background: var(--marca-fuerte) !important; border-color: var(--marca-fuerte) !important; }
.btn-danger:hover, .btn-warning:hover, .btn-info:hover { filter: brightness(.94); }
:root[data-theme="dark"] .btn-danger:hover { filter: brightness(1.12); }
.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  background: var(--superficie) !important; border-color: var(--borde-fuerte) !important; color: var(--tinta) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-default:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-light:hover { background: var(--superficie-3) !important; }
.btn-dark { background: var(--tinta) !important; border-color: var(--tinta) !important; color: var(--superficie) !important; }
.btn-outline-primary { background: transparent !important; border-color: var(--marca-300) !important; color: var(--marca-texto) !important; }
.btn-outline-primary:hover { background: var(--marca-50) !important; }
.btn-outline-success { background: transparent !important; border-color: color-mix(in srgb, var(--exito) 45%, transparent) !important; color: var(--exito) !important; }
.btn-outline-danger { background: transparent !important; border-color: color-mix(in srgb, var(--peligro) 45%, transparent) !important; color: var(--peligro) !important; }
.btn-outline-warning { background: transparent !important; border-color: color-mix(in srgb, var(--aviso) 45%, transparent) !important; color: var(--aviso) !important; }
.btn-outline-info { background: transparent !important; border-color: color-mix(in srgb, var(--info) 40%, transparent) !important; color: var(--info) !important; }
.btn-outline-success:hover { background: var(--exito-suave) !important; }
.btn-outline-danger:hover { background: var(--peligro-suave) !important; }
.btn-outline-warning:hover { background: var(--aviso-suave) !important; }
.btn-outline-info:hover { background: var(--info-suave) !important; }
.btn-link { background: transparent !important; border-color: transparent !important; color: var(--marca-texto) !important; padding-inline: 6px; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: var(--fs-2); border-radius: var(--r-chico); }
.btn-lg { min-height: 46px; padding: 10px 20px; font-size: var(--fs-4); }
.btn-block, .w-100.btn { display: flex; width: 100%; }
.boton--fantasma { background: transparent; border-color: transparent; }
.boton--fantasma:hover { background: var(--superficie-3); }
.boton--peligro { color: var(--peligro); }
.btn .fa-spinner, .btn .fa-circle-notch { animation: icono-girar 1s linear infinite; }

/* 9. Formularios ---------------------------------------------------------------- */
label, .form-label, .control-label { display: inline-block; margin-bottom: 6px; color: var(--tinta); font-size: var(--fs-3); font-weight: 550; }
.form-group, .campo { margin-bottom: var(--e-4); }
.form-control, .form-select, .custom-select,
input[type="text"]:not(.btn), input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="month"], select, textarea {
  display: block; width: 100%; min-height: var(--control-alto); padding: 8px 12px;
  background-color: var(--superficie); color: var(--tinta); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control);
  font-size: var(--fs-3); line-height: 1.4; box-shadow: none; background-clip: padding-box;
  transition: border-color var(--t-rapida) ease, box-shadow var(--t-rapida) ease, background-color var(--t-rapida) ease;
}
textarea, textarea.form-control { min-height: 88px; resize: vertical; }
select, .form-select, .custom-select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2364748B' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 12px; }
.form-control:focus, .form-select:focus, .custom-select:focus, input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px var(--anillo); background-color: var(--superficie); color: var(--tinta);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--sutil); opacity: 1; }
.form-control:disabled, .form-control[readonly], input:disabled, select:disabled, textarea:disabled { background-color: var(--superficie-2); color: var(--tenue); opacity: 1; }
.form-control.is-invalid, .was-validated .form-control:invalid, .form-control.falta { border-color: var(--peligro); }
.form-control.is-valid { border-color: var(--exito); }
.invalid-feedback { color: var(--peligro); font-size: var(--fs-2); }
.form-text, .help-block, .form-hint { color: var(--tenue); font-size: var(--fs-2); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--marca); vertical-align: -3px; display: inline-block; }
input[type="color"] { width: 44px; height: 38px; padding: 3px; cursor: pointer; }
input[type="file"] { padding: 6px; font-size: var(--fs-2); }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-chico);
  background: var(--superficie-2); color: var(--tinta); font: inherit; font-weight: 550; cursor: pointer;
}
input[type="range"] { accent-color: var(--marca); }
.input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; min-width: 0; }
.input-group-text, .input-group-prepend .input-group-text, .input-group-append .input-group-text {
  display: flex; align-items: center; padding: 0 12px; background: var(--superficie-2); color: var(--tenue); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control);
}
.form-check { display: flex; align-items: center; gap: 8px; min-height: 24px; padding-left: 0; }
.form-check-input { position: static; margin: 0; }
.form-check-label { margin: 0; font-weight: 450; color: var(--texto); }
@media (max-width: 767.98px) {
  .form-control, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="date"] { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* Interruptor */
.interruptor { position: relative; display: inline-flex; width: 36px; height: 20px; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: var(--r-pastilla); background: var(--borde-fuerte); transition: background-color var(--t-media) ease; pointer-events: none; }
.interruptor span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-media) var(--curva); }
.interruptor input:checked + span { background: var(--marca); }
.interruptor input:checked + span::after { transform: translateX(16px); }
.interruptor input:focus-visible + span { box-shadow: 0 0 0 3px var(--anillo); }

/* Control segmentado */
.segmentos { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; border-radius: var(--r-control); background: var(--superficie-3); }
.segmentos button, .segmentos label, .segmentos a { margin: 0; padding: 6px 12px; white-space: nowrap; border: 0; border-radius: var(--r-chico); background: transparent; color: var(--tenue); font-size: var(--fs-2); font-weight: 550; cursor: pointer; transition: background-color var(--t-rapida) ease, color var(--t-rapida) ease; }
.segmentos a { text-decoration: none; }
.segmentos [aria-pressed="true"], .segmentos [aria-current="true"], .segmentos input:checked + label { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-suave); }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }

/* 10. Tablas ---------------------------------------------------------------- */
.table, table.table {
  width: 100%; margin-bottom: 0; color: var(--texto); background: transparent; border-collapse: collapse;
  --bs-table-bg: transparent; --bs-table-color: var(--texto); --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--superficie-2);
  --bs-table-border-color: var(--regla); font-variant-numeric: tabular-nums;
}
.table th, .table td { padding: 11px 12px; vertical-align: middle; border-top: 0; border-bottom: 1px solid var(--regla); background: transparent; }
.table thead th, .table > thead > tr > th {
  position: sticky; top: 0; z-index: 1; padding-top: 10px; padding-bottom: 10px;
  background: var(--superficie); color: var(--tenue); font-size: var(--fs-2); font-weight: 500; text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.table thead.thead-dark th, .table thead.thead-light th, .table thead.table-dark th, .table thead.table-light th { background: var(--superficie); color: var(--tenue); border-color: var(--borde); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-striped tbody tr:nth-of-type(odd), .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent; --bs-table-accent-bg: transparent; }
.table-hover tbody tr { transition: background-color var(--t-rapida) ease; }
.table-hover tbody tr:hover, .table-hover > tbody > tr:hover > * { background-color: var(--superficie-2); --bs-table-accent-bg: transparent; color: inherit; }
.table-bordered, .table-bordered th, .table-bordered td { border: 0; border-bottom: 1px solid var(--regla); }
.table-sm th, .table-sm td { padding: 7px 10px; }
.table .text-right, .table .text-end, .table td.num, .table th.num { text-align: right; }
.table-responsive, .tabla-scroll { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll { border-radius: inherit; }
/* Relativo: lo posicionado dentro de la tabla no ensancha la pagina */
.table-responsive, .tabla-scroll { position: relative; }

/* 11. Etiquetas y avisos ---------------------------------------------------------- */
.badge, .etiqueta {
  display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 9px; border-radius: var(--r-pastilla);
  background: var(--neutro-suave); color: var(--neutro-tinta); font-size: var(--fs-1); font-weight: 550; line-height: 1.35;
  white-space: nowrap; vertical-align: middle; letter-spacing: 0; text-transform: none;
}
.badge-primary, .badge.bg-primary, .etiqueta--marca { background: var(--marca-100) !important; color: var(--marca-texto) !important; }
.badge-success, .badge.bg-success, .etiqueta--exito { background: var(--exito-suave) !important; color: var(--exito-tinta) !important; }
.badge-warning, .badge.bg-warning, .etiqueta--aviso { background: var(--aviso-suave) !important; color: var(--aviso-tinta) !important; }
.badge-danger, .badge.bg-danger, .etiqueta--peligro { background: var(--peligro-suave) !important; color: var(--peligro-tinta) !important; }
.badge-info, .badge.bg-info, .etiqueta--info { background: var(--info-suave) !important; color: var(--info-tinta) !important; }
.badge-secondary, .badge-light, .badge-dark, .badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background: var(--neutro-suave) !important; color: var(--neutro-tinta) !important; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.alert, .aviso-linea {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--e-4); padding: 12px 14px;
  border: 1px solid transparent; border-left-width: 1px; border-radius: var(--r-control);
  background: var(--neutro-suave); color: var(--neutro-tinta); font-size: var(--fs-3); font-weight: 450;
}
.alert i { margin-top: 2px; flex: none; }
.alert-success { background: var(--exito-suave) !important; color: var(--exito-tinta) !important; border-color: color-mix(in srgb, var(--exito) 22%, transparent) !important; }
.alert-danger, .alert-error { background: var(--peligro-suave) !important; color: var(--peligro-tinta) !important; border-color: color-mix(in srgb, var(--peligro) 22%, transparent) !important; }
.alert-warning { background: var(--aviso-suave) !important; color: var(--aviso-tinta) !important; border-color: color-mix(in srgb, var(--aviso) 26%, transparent) !important; }
.alert-info, .alert-primary { background: var(--info-suave) !important; color: var(--info-tinta) !important; border-color: color-mix(in srgb, var(--info) 22%, transparent) !important; }
.alert-secondary, .alert-light, .alert-dark { background: var(--neutro-suave) !important; color: var(--neutro-tinta) !important; border-color: var(--borde) !important; }
.alert .close, .alert .btn-close { margin-left: auto; }
.alert-dismissible { padding-right: 14px; }

/* Aviso flotante (SICEM.aviso) */
.avisos { position: fixed; z-index: 3000; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.aviso-flotante {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-control); pointer-events: auto;
  background: var(--tinta); color: var(--superficie); box-shadow: var(--sombra-flota); font-size: var(--fs-3); font-weight: 500;
  animation: aviso-entra var(--t-lenta) var(--curva) both;
}
.aviso-flotante.saliendo { animation: aviso-sale var(--t-media) var(--curva-salida) both; }
.aviso-flotante i { flex: none; font-size: 18px; }
.aviso-flotante--exito i { color: #4ADE80; }
.aviso-flotante--peligro i { color: #F87171; }
:root[data-theme="dark"] .aviso-flotante--exito i { color: var(--exito); }
:root[data-theme="dark"] .aviso-flotante--peligro i { color: var(--peligro); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(6px); } }
@media (max-width: 767.98px) { .avisos { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; } }

/* 12. Ventanas (Bootstrap 4 y 5, SweetAlert) ------------------------------------------ */
.modal-content {
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-panel);
  box-shadow: var(--sombra-flota); overflow: hidden;
}
.modal-header { align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--borde); background: var(--superficie) !important; color: var(--tinta) !important; }
.modal-header .modal-title, .modal-title { color: var(--tinta) !important; font-size: var(--fs-5); font-weight: 600; }
.modal-body { padding: 20px; }
.modal-footer { gap: 8px; padding: 14px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .45; background: #0B1220; }
.modal.fade .modal-dialog { transition: transform var(--t-lenta) var(--curva), opacity var(--t-media) ease; transform: translateY(12px) scale(.985); }
.modal.show .modal-dialog { transform: none; }
.close, .modal-header .close { float: none; margin: 0 0 0 auto; padding: 4px 8px; border: 0; background: transparent; color: var(--tenue) !important; font-size: 24px; font-weight: 400; line-height: 1; text-shadow: none; opacity: 1; cursor: pointer; border-radius: var(--r-chico); }
.close:hover { color: var(--tinta) !important; background: var(--superficie-3); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
.dropdown-menu { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-control); box-shadow: var(--sombra-flota); padding: 6px; }
.dropdown-item { border-radius: var(--r-chico); color: var(--texto); padding: 7px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--superficie-3); color: var(--tinta); }
.dropdown-item.active, .dropdown-item:active { background: var(--marca-100); color: var(--marca-texto); }
.dropdown-divider { border-color: var(--borde); }

div.swal2-popup { background: var(--superficie); color: var(--texto); border-radius: var(--r-panel); font-family: var(--fuente); }
div.swal2-popup .swal2-title { color: var(--tinta); font-size: var(--fs-6); }
div.swal2-popup .swal2-html-container { color: var(--texto); }
div.swal2-actions .swal2-confirm { background: var(--marca) !important; color: var(--marca-sobre) !important; border-radius: var(--r-control); }
div.swal2-actions .swal2-cancel { background: var(--superficie-3) !important; color: var(--tinta) !important; border-radius: var(--r-control); }

/* Pestanas */
.nav-tabs { gap: 4px; border-bottom: 1px solid var(--borde); }
.nav-tabs .nav-link { margin-bottom: -1px; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--tenue); font-weight: 550; }
.nav-tabs .nav-link:hover { color: var(--tinta); border-color: transparent; border-bottom-color: var(--borde-fuerte); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--tinta); border-bottom-color: var(--marca); }
.nav-pills .nav-link { border-radius: var(--r-chico); color: var(--tenue); }
.nav-pills .nav-link.active { background: var(--marca-100); color: var(--marca-texto); }
.pagination { gap: 4px; }
.page-link { border: 1px solid var(--borde); border-radius: var(--r-chico) !important; background: var(--superficie); color: var(--texto); }
.page-link:hover { background: var(--superficie-3); color: var(--tinta); }
.page-item.active .page-link { background: var(--marca); border-color: var(--marca); color: var(--marca-sobre); }
.page-item.disabled .page-link { background: var(--superficie-2); color: var(--sutil); }
.list-group-item { background: var(--superficie); color: var(--texto); border-color: var(--regla); }
.list-group-item.active { background: var(--marca-100); color: var(--marca-texto); border-color: var(--marca-200); }

/* 13. Graficas y mapas -------------------------------------------------------- */
.grafica { position: relative; width: 100%; height: 260px; }
/* .chart-container: en unas pantallas envuelve solo al lienzo (lleva alto), en otras es la tarjeta completa */
.chart-container:has(> canvas:only-child) { position: relative; width: 100%; height: 300px; }
.chart-container-wrapper { position: relative; padding: var(--e-5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-panel); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--tenue); font-size: var(--fs-2); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .punto { width: 8px; height: 8px; }
/* Cobertura por seccion: una celda por seccion, una sola escala del color de marca */
.cobertura { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--celda, 24px), 1fr)); gap: 4px; margin: 4px 0 var(--e-4); }
.celda {
  display: block; width: 100%; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 4px; cursor: default;
  transition: transform var(--t-rapida) var(--curva), box-shadow var(--t-rapida) ease;
}
.cobertura .celda:hover, .cobertura .celda:focus-visible { transform: scale(1.18); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--tinta); outline: 0; position: relative; z-index: 1; }
.nivel-0 { background: var(--superficie-3); box-shadow: inset 0 0 0 1px var(--borde); }
.nivel-1 { background: var(--marca-100); }
.nivel-2 { background: var(--marca-200); }
.nivel-3 { background: var(--marca-300); }
.nivel-4 { background: color-mix(in oklab, var(--marca) 72%, var(--superficie)); }
.nivel-5 { background: var(--marca); }
/* Barras con calor: la misma escala sobre todo el ancho de la pista; la punta de cada barra toma el tono de su valor.
   En la barra: class="barra-calor" style="width: 42%; --p: 42". En Chart.js: SICEM.calor() */
.barra-calor {
  background: linear-gradient(90deg, var(--marca-200), var(--marca-300) 35%, color-mix(in oklab, var(--marca) 72%, var(--superficie)) 70%, var(--marca))
    left center / calc(100% * 100 / max(var(--p, 100), 1)) 100% no-repeat;
}
.cobertura-leyenda .celda { width: 12px; height: 12px; aspect-ratio: auto; border-radius: 3px; }
.globo {
  position: absolute; z-index: 5; transform: translate(-50%, -100%); display: grid; gap: 2px; padding: 8px 10px; pointer-events: none;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-chico); box-shadow: var(--sombra-flota);
  color: var(--texto); font-size: var(--fs-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.globo strong { color: var(--tinta); font-weight: 600; }

/* Barra apilada al 100% con su leyenda en tabla */
.apilada { display: flex; gap: 2px; height: 12px; margin: 4px 0 var(--e-4); border-radius: var(--r-pastilla); overflow: hidden; background: var(--superficie-3); }
.apilada > span { display: block; min-width: 3px; height: 100%; }
.tabla-leyenda td { padding: 8px 0; border-bottom: 1px solid var(--regla); }
.tabla-leyenda td + td { padding-left: 12px; }
.tabla-leyenda .punto { margin-right: 6px; vertical-align: 1px; }

/* Lista con barras: nombre, cifra y su barra */
.barras-lista { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.barras-lista li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.barras-lista__nombre { color: var(--texto); }
.barras-lista__valor { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.barras-lista__barra { grid-column: 1 / -1; display: block; height: 8px; border-radius: var(--r-pastilla); background: var(--superficie-3); overflow: hidden; }
.barras-lista__barra > span { display: block; height: 100%; border-radius: inherit; min-width: 2px; }

/* Accesos a modulos */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-3); }
.acceso {
  display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--r-panel);
  background: var(--superficie); color: var(--tinta); font-weight: 600;
  transition: border-color var(--t-rapida) ease, background-color var(--t-rapida) ease, transform var(--t-rapida) var(--curva);
}
.acceso > i:first-child { color: var(--marca); font-size: 20px; }
.acceso:hover { border-color: var(--marca-300); background: var(--marca-50); color: var(--tinta); text-decoration: none; }
.acceso:active { transform: scale(.985); }
.acceso__flecha { margin-left: auto; color: var(--sutil); font-size: 14px; transition: transform var(--t-media) var(--curva); }
.acceso:hover .acceso__flecha { transform: translateX(3px); color: var(--marca); }

.leaflet-container { font-family: var(--fuente); background: var(--superficie-3); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-flota); }
.leaflet-popup-content-wrapper { border-radius: var(--r-control); }
.leaflet-bar a { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(23, 24, 27, .8); color: var(--tenue); }

/* 14. Utilidades -------------------------------------------------------------- */
.texto-tenue, .text-muted { color: var(--tenue) !important; }
.texto-marca { color: var(--marca-texto) !important; }
.text-primary { color: var(--marca-texto) !important; }
.text-success { color: var(--exito) !important; }
.text-danger { color: var(--peligro) !important; }
.text-warning { color: var(--aviso) !important; }
.text-info { color: var(--info) !important; }
.text-dark, .text-body { color: var(--tinta) !important; }
.text-secondary { color: var(--tenue) !important; }
.bg-primary { background-color: var(--marca) !important; color: var(--marca-sobre); }
.bg-white { background-color: var(--superficie) !important; }
.bg-light { background-color: var(--superficie-2) !important; }
.bg-dark { background-color: var(--tinta) !important; color: var(--superficie); }
.border, .border-top, .border-bottom, .border-left, .border-right, .border-start, .border-end { border-color: var(--borde) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.font-weight-bold, .fw-bold { font-weight: 650 !important; }
.display-4 { font-size: var(--fs-8); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.oculto-movil { }
@media (max-width: 767.98px) { .oculto-movil { display: none !important; } }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 15. Compatibilidad con Bootstrap 4 y 5 ------------------------------------------------ */
.card {
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-panel); box-shadow: none;
  --bs-card-bg: var(--superficie); --bs-card-border-color: var(--borde); --bs-card-cap-bg: transparent; --bs-card-color: var(--texto);
}
.card-header, .card-footer { background: transparent !important; border-color: var(--borde); color: var(--tinta); padding: 14px 20px; }
.card-header { border-bottom: 1px solid var(--borde); border-radius: var(--r-panel) var(--r-panel) 0 0 !important; font-weight: 600; }
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info, .card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark { background: transparent !important; color: var(--tinta) !important; }
.card-body { padding: 20px; color: var(--texto); }
.card-title { color: var(--tinta); font-size: var(--fs-4); font-weight: 600; }
.card-text { color: var(--texto); }
.container-fluid { padding-left: 0; padding-right: 0; }
:root {
  --bs-body-bg: var(--fondo); --bs-body-color: var(--texto); --bs-border-color: var(--borde); --bs-emphasis-color: var(--tinta);
  --bs-secondary-color: var(--tenue); --bs-tertiary-bg: var(--superficie-2); --bs-link-color: var(--marca-texto); --bs-link-hover-color: var(--marca-texto);
  --bs-font-sans-serif: var(--fuente); --bs-body-font-family: var(--fuente);
}
body { font-family: var(--fuente) !important; }
.row { --bs-gutter-x: 20px; }

/* Tailwind de la Agenda (CDN): sus colores fijos pasan a los tokens, asi siguen la marca y el modo oscuro */
.bg-gray-50 { background-color: var(--superficie-2) !important; }
.bg-gray-100 { background-color: var(--superficie-3) !important; }
.bg-gray-800 { background-color: var(--tinta) !important; color: var(--superficie) !important; }
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--superficie-3) !important; }
.hover\:bg-gray-700:hover { background-color: var(--texto) !important; }
.text-gray-400, .text-gray-500 { color: var(--sutil) !important; }
.text-gray-600, .text-gray-700 { color: var(--tenue) !important; }
.text-gray-800, .text-gray-900 { color: var(--tinta) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--borde) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--marca-100) !important; }
.hover\:bg-blue-100:hover, .hover\:bg-blue-200:hover { background-color: var(--marca-200) !important; }
.text-blue-600, .text-blue-800 { color: var(--marca-texto) !important; }
.border-blue-200, .border-blue-300 { border-color: var(--marca-200) !important; }
.bg-green-100 { background-color: var(--exito-suave) !important; }
.text-green-800 { color: var(--exito-tinta) !important; }
.border-green-200 { border-color: color-mix(in srgb, var(--exito) 30%, transparent) !important; }
.bg-red-50 { background-color: var(--peligro-suave) !important; }
.text-red-500 { color: var(--peligro) !important; }
.border-red-200 { border-color: color-mix(in srgb, var(--peligro) 30%, transparent) !important; }

/* Tarjetas del panel anterior (Dia D): icono simple junto al titulo, sin cuadro de color */
.card-icon { display: inline-grid !important; place-items: center; width: auto !important; height: auto !important; margin-right: 10px; padding: 0 !important; background: none !important; color: var(--marca) !important; font-size: 20px; flex: none; border-radius: 0 !important; }
.card-title-text { flex: 1; min-width: 0; }
.card-title-text h3 { margin: 0; color: var(--tinta); font-size: var(--fs-4); font-weight: 600; }
.card-title-text .subtitle { color: var(--tenue); font-size: var(--fs-2); }
.stats-summary { margin-top: 16px; padding: 12px 14px; background: var(--superficie-2); border-radius: var(--r-control); }
.stats-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.stat-label-text { color: var(--tenue); }
.stat-value-text { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Fila de cifras de los modulos (Estructura, Comites): mismas proporciones que el panel general */
.info-meta-cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); }
.info-meta-cards .card { flex: none !important; max-width: none !important; margin: 0 !important; }
.info-meta-cards .card-body { padding: var(--e-4) var(--e-5); text-align: left; }
.info-meta-cards .card-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--tenue); font-size: var(--fs-2); font-weight: 500; }
.info-meta-cards .card-title i { color: var(--sutil); }
.info-meta-cards .display-4 { margin: 0; color: var(--tinta) !important; font-size: 26px; font-weight: 600 !important; letter-spacing: -.02em; }

/* La pagina entra una sola vez, rapido (antes cada pantalla escalonaba sus tarjetas) */
/* Sin relleno (both): mientras dura, el navegador vuelve a .main-content el marco de lo fijo y atrapa los modales */
.main-content { animation: pagina-entra 180ms var(--curva); }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(4px); } }

/* Rejilla de tarjetas con grafica (Dia D, Resultados de actas, vista clasica del panel) */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: var(--e-4); }
.analytics-grid > .chart-card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.analytics-grid .stats-summary { margin-top: auto; }
.analytics-grid .chart-container { margin-bottom: 16px; }
@media (max-width: 1200px) { .analytics-grid { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); } }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: minmax(0, 1fr); } }
.enlace-tinta, .enlace-tinta:hover { color: inherit; text-decoration: none; }

/* Listas de registros: solo lectura, con ojo para abrir la ficha (Brigadas, Estructura, Comite) */
.filtro-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: var(--e-4); padding: 16px 20px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-panel); }
.filtro-barra__campo { display: flex; flex-direction: column; flex: 1 1 150px; gap: 4px; min-width: 0; }
.filtro-barra__campo label { margin: 0; color: var(--tenue); font-size: var(--fs-1); font-weight: 600; }
.filtro-barra__acciones { display: flex; gap: 8px; }
.tabla-panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-panel); overflow: hidden; }
.tabla-panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.tabla-panel__cabeza p { margin: 0; color: var(--tenue); font-size: var(--fs-2); }
.tabla-panel__cabeza strong { color: var(--tinta); }
.tabla-panel__vacio { margin: 0; padding: 40px 16px; color: var(--tenue); text-align: center; }
.tabla-registros { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.tabla-registros th { padding: 10px 12px; border-bottom: 1px solid var(--borde); background: var(--superficie); color: var(--tenue); font-size: var(--fs-1); font-weight: 600; text-align: left; white-space: nowrap; }
.tabla-registros td { padding: 10px 12px; border-bottom: 1px solid var(--borde); color: var(--texto); vertical-align: middle; }
.tabla-registros tbody tr:last-child td { border-bottom: 0; }
.tabla-registros tbody tr:hover td { background: var(--superficie-2); }
.celda-principal { display: block; color: var(--tinta); font-weight: 550; }
.celda-principal--normal { font-weight: 450; }
.celda-sub { display: block; color: var(--tenue); font-size: var(--fs-1); }
.celda-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.celda-ojo { width: 1%; text-align: right; }
.boton-ojo { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--borde); border-radius: var(--r-chico); background: var(--superficie); color: var(--tenue); cursor: pointer; transition: background-color var(--t-rapida) ease, border-color var(--t-rapida) ease, color var(--t-rapida) ease; }
.boton-ojo:hover, .boton-ojo:focus-visible { border-color: var(--marca); background: var(--marca-100); color: var(--marca-texto); }
@media (max-width: 768px) {
  .tabla-registros .col-opcional { display: none; }
  .filtro-barra { padding: 14px; }
}

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 14px 12px; border-top: 1px solid var(--borde); }
.paginacion[hidden] { display: none; }
.paginacion a, .paginacion button { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--borde); border-radius: var(--r-chico); background: var(--superficie); color: var(--texto); font-size: var(--fs-2); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.paginacion a:hover, .paginacion button:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.paginacion [aria-current="page"], .paginacion [aria-current="page"]:hover { border-color: var(--marca); background: var(--marca); color: var(--marca-sobre); }
.paginacion__hueco { padding: 0 4px; color: var(--sutil); }

/* Ficha de un registro (assets/js/ficha.js) */
.registro-ficha { width: min(720px, calc(100vw - 24px)); max-width: none; max-height: min(88vh, 860px); max-height: min(88dvh, 860px); margin: auto; padding: 0; border: 1px solid var(--borde); border-radius: var(--r-panel); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-flota); overflow: hidden; }
.registro-ficha[open] { display: flex; flex-direction: column; animation: pagina-entra 180ms var(--curva) both; }
.registro-ficha::backdrop { background: rgba(11, 18, 32, .5); }
.registro-ficha__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.registro-ficha__titulos { min-width: 0; }
.registro-ficha h2 { margin: 0; color: var(--tinta); font-size: var(--fs-5); font-weight: 650; overflow-wrap: anywhere; }
.registro-ficha__titulos p { margin: 2px 0 0; color: var(--tenue); font-size: var(--fs-2); }
.registro-ficha__cerrar { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-chico); background: transparent; color: var(--tenue); cursor: pointer; }
.registro-ficha__cerrar:hover { background: var(--superficie-3); color: var(--tinta); }
.registro-ficha__form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.registro-ficha__cuerpo { flex: 1; min-height: 0; padding: 16px 20px; overflow-y: auto; }
.registro-ficha__grupo + .registro-ficha__grupo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); }
.registro-ficha h3 { margin: 0 0 10px; color: var(--tenue); font-size: var(--fs-2); font-weight: 600; }
.registro-ficha__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.registro-ficha dt { margin: 0; color: var(--tenue); font-size: var(--fs-1); font-weight: 500; }
.registro-ficha dd { margin: 0; color: var(--tinta); font-size: var(--fs-3); overflow-wrap: anywhere; }
.registro-ficha__vacio { color: var(--sutil); }
.registro-ficha__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.registro-ficha__campos label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.registro-ficha__campos label > span { color: var(--tenue); font-size: var(--fs-1); font-weight: 600; }
.registro-ficha__nota { color: var(--aviso-tinta); font-size: var(--fs-1); }
.registro-ficha__ancho { grid-column: 1 / -1; }
.registro-ficha__error { margin: 0; padding: 10px 20px; background: var(--peligro-suave); color: var(--peligro-tinta); font-size: var(--fs-2); }
.registro-ficha__error[hidden] { display: none; }
.registro-ficha__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); }
.registro-ficha__pie > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.registro-ficha__pie .btn { margin: 0; }
.registro-ficha__pie--peligro strong { color: var(--peligro-tinta); font-size: var(--fs-2); font-weight: 600; }
.registro-ficha__borrar { color: var(--peligro-tinta); }
.registro-ficha__borrar[hidden] { display: none; }
.registro-ficha__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.registro-ficha__fotos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--borde); border-radius: var(--r-chico); }
.registro-ficha__borrar:hover { background: var(--peligro-suave); color: var(--peligro-tinta); }
@media (max-width: 560px) {
  .registro-ficha__datos, .registro-ficha__campos { grid-template-columns: minmax(0, 1fr); }
}

/* 16. Impresion y movimiento reducido ------------------------------------------------- */
@media print {
  .sidebar, .barra-movil, .menu-velo, .avisos, .btn, .no-imprimir { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  body { background: #FFFFFF !important; color: #000000 !important; }
  .panel, .card, .chart-card, .content-card { break-inside: avoid; border-color: #DDDDDD !important; }
}
@media (prefers-reduced-motion: reduce) {
  *:not(.fa-spin):not(.fa-spinner):not(.fa-circle-notch), *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Perfil unico (assets/js/perfil.js): resumen en las fichas, perfil completo y registrar asistencia */
.perfil-resumen { display: grid; gap: 14px; }
.perfil-resumen__cabeza:empty, .perfil-etiquetas:empty { display: none; }
.perfil-cargando, .perfil-vacio { margin: 0; color: var(--sutil); font-size: var(--fs-2); }
.perfil-nota { margin: 0; padding: 8px 12px; border-radius: var(--r-chico); background: var(--exito-suave); color: var(--exito-tinta); font-size: var(--fs-2); font-weight: 500; }
.perfil-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.perfil-cifra { padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--r-control); background: var(--superficie-2); }
.perfil-cifra strong { display: block; color: var(--tinta); font-size: var(--fs-5); font-weight: 650; line-height: 1.2; }
.perfil-cifra span { color: var(--tenue); font-size: var(--fs-1); }
.perfil-bloque h4 { margin: 0 0 6px; color: var(--tenue); font-size: var(--fs-1); font-weight: 600; }
.perfil-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.perfil-lista > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--r-chico); }
.perfil-lista__texto { min-width: 0; }
.perfil-lista__texto strong { display: block; color: var(--tinta); font-size: var(--fs-2); font-weight: 600; overflow-wrap: anywhere; }
.perfil-lista__texto small { display: block; color: var(--tenue); font-size: var(--fs-1); overflow-wrap: anywhere; }
.perfil-lista__enlaces { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.enlace-perfil { color: var(--marca-texto); font-size: var(--fs-1); font-weight: 600; }
.perfil-lista > li.perfil-mas { border-style: dashed; color: var(--tenue); font-size: var(--fs-1); }
.perfil-lista .etiqueta { flex: none; }
.perfil-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.perfil-datos dt { margin: 0; color: var(--tenue); font-size: var(--fs-1); font-weight: 500; }
.perfil-datos dd { margin: 0; color: var(--tinta); font-size: var(--fs-3); overflow-wrap: anywhere; }
.perfil-datos .perfil-ancho { grid-column: 1 / -1; }
.perfil-sin { color: var(--sutil) !important; }
.perfil-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-acciones .btn { margin: 0; }

.perfil-volver { margin: 0 0 var(--e-3); font-size: var(--fs-2); }
.perfil-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: var(--e-4); padding: 20px; border: 1px solid var(--borde); border-radius: var(--r-panel); background: var(--superficie); }
.perfil-avatar { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--marca-100); color: var(--marca-texto); font-size: var(--fs-6); font-weight: 700; }
.perfil-cabeza__texto { flex: 1 1 260px; min-width: 0; }
.perfil-cabeza h1 { margin: 0; color: var(--tinta); font-size: var(--fs-7); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.perfil-cabeza__texto > p { margin: 4px 0 8px; color: var(--tenue); font-size: var(--fs-2); }
.perfil-cabeza + .perfil-cifras { margin-bottom: var(--e-4); }
.perfil-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.perfil-rejilla > div { display: grid; gap: 16px; min-width: 0; }
.perfil-panel { padding: 16px 20px; border: 1px solid var(--borde); border-radius: var(--r-panel); background: var(--superficie); }
.perfil-panel h2 { margin: 0 0 12px; color: var(--tinta); font-size: var(--fs-4); font-weight: 650; }
.perfil-mapa { height: 220px; margin-top: 12px; border: 1px solid var(--borde); border-radius: var(--r-control); }
.perfil-tiempo { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.perfil-tiempo li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--borde); font-size: var(--fs-2); }
.perfil-tiempo li:first-child { border-top: 0; }
.perfil-tiempo time { color: var(--tenue); font-size: var(--fs-1); }
.perfil-tiempo span { color: var(--tinta); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .perfil-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .perfil-datos { grid-template-columns: minmax(0, 1fr); }
  .perfil-tiempo li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .perfil-cabeza { padding: 16px; }
}

.checkin-ayuda { margin: 0 0 12px; color: var(--tenue); font-size: var(--fs-2); }
.checkin-grupo { margin: 0 0 12px; padding: 0; border: 0; }
.checkin-grupo legend { margin: 0 0 6px; padding: 0; color: var(--tenue); font-size: var(--fs-1); font-weight: 600; }
.checkin-evento { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--r-control); cursor: pointer; }
.checkin-evento:hover { border-color: var(--borde-fuerte); }
.checkin-evento:has(input:checked) { border-color: var(--marca); background: var(--marca-100); }
.checkin-evento input { flex: none; margin-top: 3px; accent-color: var(--marca); }
.checkin-evento__texto { min-width: 0; }
.checkin-evento__texto strong { display: block; color: var(--tinta); font-size: var(--fs-3); font-weight: 600; overflow-wrap: anywhere; }
.checkin-evento__texto small { display: block; color: var(--tenue); font-size: var(--fs-1); }
.checkin-evento--ya { cursor: default; opacity: .6; }
.perfil-resumen__cabeza { display: flex; align-items: center; gap: 12px; }
/* Foto de perfil: sale de la INE, cuadrada y centrada en la cara (Personas::guardarFotos). Las viejas, verticales, se centran arriba */
.perfil-mini { flex: none; width: 56px; height: 56px; object-fit: cover; object-position: center 30%; border: 2px solid var(--superficie); border-radius: 50%; background: var(--superficie-3); box-shadow: 0 0 0 1px var(--borde); }
.perfil-avatar--foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde), var(--sombra-suave); }
.perfil-fotos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.perfil-fotos__item { display: grid; gap: 4px; color: var(--tenue); font-size: var(--fs-1); text-decoration: none; }
.perfil-fotos__item:hover { color: var(--tinta); text-decoration: none; }
.perfil-fotos__item img { display: block; border: 1px solid var(--borde); border-radius: var(--r-chico); background: var(--superficie-3); object-fit: cover; }
.perfil-fotos__rostro img { width: 120px; height: 120px; object-position: center 30%; border-radius: 50%; }
.perfil-fotos__ine img { width: min(260px, 100%); height: auto; aspect-ratio: 85.6 / 54; }
.perfil-fotos__ine { flex: 1 1 200px; max-width: 260px; }

/* Algunas pantallas traen su propia hoja (estructura.css) que pinta todo .btn del color de marca: en las ventanas manda el diseno comun */
.registro-ficha .btn:not(.btn-primary):not(.btn-danger) { padding: 7px 14px; border-color: var(--borde); background: var(--superficie); color: var(--tinta); }
.registro-ficha .btn:not(.btn-primary):not(.btn-danger):hover { background: var(--superficie-3); }
.registro-ficha .btn.registro-ficha__borrar:not(.btn-primary) { color: var(--peligro-tinta); }
.registro-ficha .btn-primary, .registro-ficha .btn-danger { padding: 7px 14px; }

/* Entrega de una gestion con prueba opcional: foto, firma y audio (gestiones/gestiones.php, assets/js/entrega.js) */
.entrega { display: grid; gap: 10px; min-width: 0; }
.entrega p { margin: 0; }
.entrega__vacio { color: var(--tenue); font-size: var(--fs-2); }
.entrega__prueba { display: flex; flex-wrap: wrap; gap: 8px; }
.entrega__img img { display: block; height: 120px; width: auto; max-width: 100%; object-fit: contain; border: 1px solid var(--borde); border-radius: var(--r-chico); }
.entrega audio { width: 100%; max-width: 380px; }
.entrega__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.entrega__error { margin: 0; padding: 8px 12px; border-radius: var(--r-chico); background: var(--peligro-suave); color: var(--peligro-tinta); font-size: var(--fs-2); }
.entrega__error[hidden] { display: none; }