/* Info CIOR — estilos de la aplicación.
   Se apoya en el Sistema de diseño del CIOR (public/design-system/tokens.css y componentes.css):
   todos los colores, tipografías, espacios, radios y sombras son tokens. Nunca valores propios
   de color: así el tema oscuro (data-theme="oscuro") funciona sin estilos duplicados. */

/* ---------- superficies por tema ---------- */
:root, [data-theme="claro"] {
  --fondo-pagina: var(--superficie);
  --fondo-panel: var(--superficie);      /* tarjetas y paneles */
  --fondo-hundido: var(--superficie-alt); /* datos originales SUACI, encabezados de tabla */
  color-scheme: light;
}
[data-theme="oscuro"] {
  --fondo-pagina: var(--superficie);
  --fondo-panel: var(--superficie-alt);  /* en oscuro los paneles suben a superficie-alt */
  --fondo-hundido: var(--superficie);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-textos);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo-pagina);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-texto); text-underline-offset: 3px; }
h1 { font-family: var(--font-titulares); font-weight: 800; font-size: 28px; line-height: 1.2; margin: 0; }
h2 { font-family: var(--font-titulares); font-weight: 700; font-size: 20px; line-height: 1.3; margin: 0 0 var(--espacio-3); }
/* h3 = estilo "rotulo": el único estilo en mayúsculas del sistema */
h3 {
  font-family: var(--font-titulares); font-weight: 500; font-size: 12px; line-height: 1.4;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 var(--espacio-2);
}
.muted { color: var(--tinta-suave); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.mt { margin-top: var(--espacio-3); }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--azul-suave); color: var(--tinta); }

/* ---------- encabezado (componente Encabezado) ---------- */
.encabezado-app { gap: var(--espacio-5); padding: var(--espacio-3) var(--espacio-6); flex-wrap: wrap; row-gap: var(--espacio-2); }
/* Banda de ambiente (fuera de producción): recuerda que los datos no son reales o que Ualabee está en prueba */
.banda-ambiente {
  padding: var(--espacio-1) var(--espacio-6); font-size: 13px; text-align: center;
  background: var(--advertencia-suave); color: var(--tinta); border-bottom: 1px solid var(--advertencia);
}
.banda-ambiente strong { color: var(--advertencia); letter-spacing: .04em; }
.banda-ambiente--simulador { background: var(--fondo-hundido); border-bottom-color: var(--linea-control); }
.banda-ambiente--simulador strong { color: var(--tinta-suave); }
.app-nombre {
  font-family: var(--font-titulares); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--tinta);
  padding-left: var(--espacio-5); border-left: 1px solid var(--linea); text-decoration: none;
}
.app-nombre:hover { color: var(--azul-texto); }
.encabezado-acciones { display: flex; align-items: center; gap: var(--espacio-4); margin-left: auto; flex-wrap: wrap; }
.usuario {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; font-size: 13px; text-align: left;
  min-height: 0; padding: var(--espacio-1) var(--espacio-2); border: 1px solid transparent; background: transparent; color: var(--tinta); font-weight: 400;
}
.usuario:hover { background: var(--fondo-hundido); border-color: var(--linea); }
.usuario strong { color: var(--tinta); }
.dlg-password { width: min(440px, 94vw); }
.usuario__rol { color: var(--tinta-suave); font-size: 12px; }
.tema { display: flex; align-items: center; gap: var(--espacio-2); margin: 0; font-weight: 600; font-size: 13px; }
.tema select.selector-tema { min-height: 36px; padding: 4px var(--espacio-6) 4px var(--espacio-2); width: auto; font-size: 13px; }

main { max-width: var(--contenedor); margin: 0 auto; padding: var(--espacio-6) var(--espacio-6) var(--espacio-8); }

/* ---------- botones (componente Boton) ---------- */
button, .btn {
  font-family: var(--font-textos); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: 40px; padding: var(--espacio-2) var(--espacio-4); border-radius: var(--radio-md);
  /* por defecto: secundario */
  border: 1px solid var(--linea-control); background: var(--fondo-panel); color: var(--azul-texto);
  text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
button:hover { border-color: var(--azul-texto); background: var(--azul-suave); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
button.primary:hover:not(:disabled) { background: var(--azul-hover); border-color: var(--azul-hover); }
button.primary:active:not(:disabled) { background: var(--azul-presionado); }
button.danger { color: var(--error); }
button.danger:hover { border-color: var(--error); background: var(--error-suave); }
button.link, button.mr-btn--terciario {
  border: 0; background: transparent; padding: 0 var(--espacio-1); min-height: 0; color: var(--azul-texto);
}
button.link:hover, button.mr-btn--terciario:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
button.small-btn { min-height: 32px; padding: var(--espacio-1) var(--espacio-3); font-size: 13px; white-space: nowrap; }

/* ---------- campos (componente CampoTexto) ---------- */
label { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; margin-bottom: var(--espacio-1); color: var(--tinta); }
input, select, textarea {
  font-family: var(--font-textos); font-size: 15px; width: 100%;
  min-height: 40px; padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--linea-control); border-radius: var(--radio-md);
  background: var(--superficie); color: var(--tinta);
}
input::placeholder, textarea::placeholder { color: var(--tinta-suave); }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-suave); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--azul-texto); }
input:disabled, select:disabled, textarea:disabled { opacity: .4; cursor: not-allowed; }
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.field { margin-bottom: var(--espacio-4); }
.field .hint { font-size: 13px; line-height: 1.4; color: var(--tinta-suave); margin-top: var(--espacio-1); }
.field .error { font-size: 13px; color: var(--error); margin-top: var(--espacio-1); font-weight: 600; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border: 2px solid var(--error); }
.field .counter { float: right; font-weight: 400; font-size: 12px; color: var(--tinta-suave); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-4); }
label.check { display: inline-flex; align-items: center; gap: var(--espacio-2); font-size: 14px; cursor: pointer; margin: 0; }
label.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--azul); margin: 0; }

/* ---------- paneles ---------- */
.card {
  background: var(--fondo-panel); border: 1px solid var(--linea); border-radius: var(--radio-md);
  box-shadow: var(--sombra-1); padding: var(--espacio-5);
}
.card + .card { margin-top: var(--espacio-4); }
.card.sua { background: var(--fondo-hundido); box-shadow: none; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-3); margin-bottom: var(--espacio-4); flex-wrap: wrap; }
.card-head h2 { margin: 0; }

/* ---------- avisos (componente Aviso) ---------- */
.aviso { max-width: none; margin-bottom: var(--espacio-3); }
.mr-aviso__icono { display: flex; padding-top: 1px; flex: none; }
.aviso ul { margin: var(--espacio-1) 0 0; padding-left: var(--espacio-5); }
.aviso li + li { margin-top: 2px; }

/* ---------- etiquetas de estado y modalidad (componente Etiqueta) ---------- */
.estado, .modalidad { white-space: nowrap; }
.estado-DESCARTADO { text-decoration: line-through; }

/* ---------- bandeja ---------- */
.page-head { display: flex; align-items: center; gap: var(--espacio-4); flex-wrap: wrap; margin-bottom: var(--espacio-5); }
.page-head .spacer { flex: 1; }
.sync-info { font-size: 13px; color: var(--tinta-suave); }

.tabs { display: flex; gap: var(--espacio-1); flex-wrap: wrap; margin-bottom: var(--espacio-2); border-bottom: 1px solid var(--linea); }
.tabs button {
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--radio-md) var(--radio-md) 0 0; background: transparent;
  color: var(--tinta); min-height: 40px; padding: var(--espacio-2) var(--espacio-3); font-size: 14px; margin-bottom: -1px;
}
.tabs button:hover { background: var(--fondo-hundido); color: var(--azul-texto); }
.tabs button.active { background: var(--azul-suave); color: var(--tinta); border-bottom-color: var(--azul-texto); }
.tabs .count {
  font-size: 12px; font-weight: 700; min-width: 22px; padding: 0 6px; border-radius: var(--radio-pill);
  background: var(--fondo-hundido); color: var(--tinta-suave); box-shadow: inset 0 0 0 1px var(--linea);
}
.tabs button.active .count { background: var(--azul); color: var(--blanco); box-shadow: none; }
.tabs .sep { width: 1px; background: var(--linea); margin: var(--espacio-2) var(--espacio-2); }
.tabs button.secundaria { color: var(--tinta-suave); }
.vista-ayuda { font-size: 13px; color: var(--tinta-suave); margin: var(--espacio-2) 0 var(--espacio-4); }

/* Barra de búsqueda + botón "Filtros"; el panel de filtros está oculto por defecto */
.filtros-barra { display: flex; align-items: flex-end; gap: var(--espacio-3); margin-bottom: var(--espacio-4); flex-wrap: wrap; }
.filtros-barra .search { flex: 1 1 320px; max-width: 560px; }
.btn-filtros { gap: var(--espacio-2); }
.btn-filtros .mr-icono { transition: transform .15s ease; }
.btn-filtros[aria-expanded="true"] { background: var(--azul-suave); border-color: var(--azul-texto); }
.btn-filtros[aria-expanded="true"] .mr-icono { transform: rotate(180deg); }
.filtros-activos {
  font-size: 12px; font-weight: 700; min-width: 20px; padding: 0 6px; border-radius: var(--radio-pill);
  background: var(--azul); color: var(--blanco); line-height: 20px;
}
#filtros-panel { padding: var(--espacio-4); background: var(--fondo-hundido); border: 1px solid var(--linea); border-radius: var(--radio-md); }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--espacio-3) var(--espacio-4); align-items: end; margin-bottom: var(--espacio-5); }
.filters label { font-size: 13px; }
.filters .check-field { display: flex; align-items: center; min-height: 40px; }

.table-wrap { overflow-x: auto; background: var(--fondo-panel); border: 1px solid var(--linea); border-radius: var(--radio-md); box-shadow: var(--sombra-1); }
table.eventos { width: 100%; border-collapse: collapse; }
table.eventos th {
  text-align: left; padding: var(--espacio-3); background: var(--fondo-hundido); border-bottom: 1px solid var(--linea);
  font-family: var(--font-titulares); font-weight: 700; font-size: 13px; color: var(--tinta-suave); white-space: nowrap;
}
table.eventos th button.link { color: inherit; font: inherit; gap: var(--espacio-1); }
table.eventos td { padding: var(--espacio-3); border-bottom: 1px solid var(--linea); vertical-align: top; }
table.eventos tbody tr:last-child td { border-bottom: 0; }
table.eventos tbody tr { cursor: pointer; transition: background-color .12s ease; }
table.eventos tbody tr:hover { background: var(--fondo-hundido); }
table.eventos tbody tr.sin-click { cursor: default; }
table.eventos td.num a { font-weight: 700; text-decoration: none; white-space: nowrap; }
table.eventos td.num a:hover { text-decoration: underline; }
table.eventos td.desc { max-width: 340px; }
table.eventos td.desc .titulo { font-weight: 600; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.warn-icon { color: var(--advertencia); display: inline-flex; vertical-align: middle; margin-left: var(--espacio-1); }
.empty { padding: var(--espacio-8) var(--espacio-4); text-align: center; color: var(--tinta-suave); }
.acciones-fila { display: flex; flex-direction: column; gap: var(--espacio-2); align-items: flex-start; }
ul.avisos { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--advertencia); }
ul.avisos li { display: flex; gap: var(--espacio-1); align-items: flex-start; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-3) 0; }
.pager > span:last-child { display: flex; gap: var(--espacio-2); }

/* ---------- ficha ---------- */
.ficha-head { margin-bottom: var(--espacio-5); }
.ficha-head .back { display: inline-flex; align-items: center; gap: var(--espacio-1); margin-bottom: var(--espacio-3); font-weight: 600; text-decoration: none; }
.ficha-head .back:hover { text-decoration: underline; }
.ficha-head .titulo-row { display: flex; align-items: center; gap: var(--espacio-3); flex-wrap: wrap; }
.ficha-head .sub { color: var(--tinta-suave); margin-top: var(--espacio-1); }

/* Ficha: dos columnas independientes (cada una apila sus tarjetas, sin huecos entre filas).
   Izquierda: SUACI, Validación, Publicación. Derecha: Datos para publicación, Historial. */
.ficha-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--espacio-4); align-items: start; }
.ficha-col { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.ficha-col > .card + .card { margin-top: 0; }

dl.datos { display: grid; grid-template-columns: 170px 1fr; gap: var(--espacio-2) var(--espacio-3); margin: 0; }
dl.datos dt { color: var(--tinta-suave); font-size: 13px; padding-top: 1px; }
dl.datos dd { margin: 0; word-break: break-word; }
dl.datos dd.vacio { color: var(--tinta-suave); font-style: italic; }
.sua-desc {
  background: var(--fondo-panel); border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: var(--espacio-3); margin: var(--espacio-2) 0 var(--espacio-4); white-space: pre-wrap;
}
.section-sep { border: 0; border-top: 1px solid var(--linea); margin: var(--espacio-4) 0; }
#sua-principales { margin-bottom: var(--espacio-4); }

/* Sección plegable (p. ej. "Más datos de SUACI"): flecha que gira al abrir */
.plegable { border-top: 1px solid var(--linea); padding-top: var(--espacio-3); }
.plegable > summary {
  display: inline-flex; align-items: center; gap: var(--espacio-2); cursor: pointer; list-style: none;
  color: var(--azul-texto); font-weight: 600; font-size: 14px;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.plegable[open] > summary::before { transform: rotate(45deg); }
.plegable > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--radio-sm); }
.plegable__cuerpo { padding-top: var(--espacio-3); }
.plegable__cuerpo h3 { margin-top: var(--espacio-4); }

.form-actions { display: flex; align-items: center; gap: var(--espacio-3); flex-wrap: wrap; margin-top: var(--espacio-1); }
.save-status { font-size: 13px; color: var(--tinta-suave); }
.save-status.dirty { color: var(--advertencia); font-weight: 600; }
.save-status.ok { color: var(--exito); font-weight: 600; }
.save-status.err { color: var(--error); font-weight: 600; }

.checklist { margin: var(--espacio-1) 0 0; padding-left: var(--espacio-5); }
.transiciones { display: flex; gap: var(--espacio-2); flex-wrap: wrap; margin-top: var(--espacio-3); }

.historial { list-style: none; margin: 0; padding: 0; }
.historial li { padding: var(--espacio-3) 0; border-bottom: 1px solid var(--linea); }
.historial li:last-child { border-bottom: 0; }
.historial .h-head { display: flex; gap: var(--espacio-2); flex-wrap: wrap; align-items: baseline; }
.historial .h-accion { font-weight: 600; }
.historial .h-meta { font-size: 12px; color: var(--tinta-suave); }
.historial .h-detalle { font-size: 13px; margin-top: var(--espacio-1); }
.historial .h-detalle ul { margin: 2px 0 0; padding-left: var(--espacio-5); }
.historial del { color: var(--error); }
.historial ins { color: var(--exito); text-decoration: none; }

/* ---------- corte ---------- */
.corte-card { margin-bottom: var(--espacio-4); }
.corte-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--espacio-6); }
.corte-resumen { display: flex; gap: var(--espacio-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--espacio-4); font-weight: 600; }
.corte-activo { display: inline-flex; align-items: center; gap: var(--espacio-2); color: var(--azul-texto); font-weight: 600; }
.corte-finalizado { display: inline-flex; align-items: center; gap: var(--espacio-2); color: var(--tinta-suave); }
/* La «O» del CIOR como indicador «en línea» (recurso gráfico del sistema), en azul-texto */
.indicador-o {
  display: inline-block; width: 12px; height: 12px; flex: none; background: var(--azul-texto);
  -webkit-mask: url('/design-system/logos/cior-simbolo-reducido-azul.svg') center / contain no-repeat;
  mask: url('/design-system/logos/cior-simbolo-reducido-azul.svg') center / contain no-repeat;
}
.tramos { margin: 0 0 var(--espacio-4); padding-left: var(--espacio-5); }
.tramos li { margin-bottom: var(--espacio-2); }
.tramos li .modalidad { margin-right: var(--espacio-2); }
/* Cortes de la misma solicitud: 1 = el más antiguo; el que se está viendo, resaltado */
.cortes-solicitud { margin-bottom: var(--espacio-4); }
.lista-cortes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-1); }
.lista-cortes__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1) var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-2); border: 1px solid transparent; border-radius: var(--radio-md); font-size: 14px;
}
.lista-cortes__item--actual { background: var(--azul-suave); border-color: var(--azul-texto); font-weight: 600; }
.lista-cortes__numero {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 var(--espacio-1);
  border-radius: var(--radio-pill); background: var(--fondo-hundido); border: 1px solid var(--linea-control); font-size: 12px; font-weight: 700;
}
.lista-cortes__item--actual .lista-cortes__numero { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.lista-cortes__texto { margin-right: auto; }
.lista-cortes__activo { font-size: 12px; font-weight: 600; color: var(--azul-texto); }
.lista-cortes__actual { font-size: 12px; font-weight: 600; color: var(--azul-texto); }
.lista-cortes__item .estado { font-size: 12px; }
.corte-acciones { display: flex; flex-direction: column; gap: var(--espacio-3); align-items: stretch; }
.corte-acciones > button { align-self: flex-start; }
.auto-fin { background: var(--fondo-hundido); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: var(--espacio-3) var(--espacio-4); }
.auto-fin .hint { font-size: 13px; color: var(--tinta-suave); margin-top: var(--espacio-1); }
.muto { display: inline-flex; align-items: center; gap: var(--espacio-1); font-size: 12px; color: var(--tinta-suave); white-space: nowrap; margin-top: var(--espacio-1); }
.fin-auto { display: inline-flex; align-items: center; gap: var(--espacio-1); font-size: 12px; color: var(--tinta-suave); margin-top: var(--espacio-1); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--espacio-4); border-left: 2px solid var(--linea); }
.timeline li { position: relative; padding: 0 0 var(--espacio-4) var(--espacio-3); }
.timeline li::before {
  content: ""; position: absolute; left: -23px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--fondo-panel); border: 2px solid var(--linea-control);
}
/* Excepción pedida al sistema de diseño: el inicio y el fin del corte se marcan con rojo y verde
   intensos para que resalten (siempre acompañados del nombre de la intervención). */
.timeline { --punto-inicio: #e3191f; --punto-fin: #12a33f; }
[data-theme="oscuro"] .timeline { --punto-inicio: #ff3b3f; --punto-fin: #2bd164; }
.timeline li.tl-INICIO-TOTAL::before, .timeline li.tl-INICIO-PARCIAL::before { border-color: var(--punto-inicio); background: var(--punto-inicio); }
.timeline li.tl-FIN::before { border-color: var(--punto-fin); background: var(--punto-fin); }
.timeline li.tl-ajena { opacity: .6; }
/* Intervenciones agrupadas por corte; el corte vigente (sin FIN) se resalta con una banda azul */
.timeline-grupos { display: grid; gap: var(--espacio-3); }
.tl-grupo { padding: var(--espacio-2) var(--espacio-3) 0; border: 1px solid var(--linea); border-radius: var(--radio-md); }
.tl-grupo--activo { background: var(--azul-suave); border-color: var(--azul-texto); box-shadow: inset 4px 0 0 var(--azul); }
.tl-grupo--otro { opacity: .7; }
.tl-grupo__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1) var(--espacio-3); margin-bottom: var(--espacio-2); font-size: 14px; }
.tl-grupo__titulo { font-weight: 700; }
.tl-grupo__estado { color: var(--tinta-suave); font-size: 13px; }
.tl-grupo .timeline { margin-left: var(--espacio-1); }
.tl-grupo .timeline li:last-child { padding-bottom: var(--espacio-3); }
.timeline li.tl-eliminada .tl-tipo { text-decoration: line-through; }
.tl-head { display: flex; gap: var(--espacio-2); flex-wrap: wrap; align-items: baseline; }
.tl-tipo { font-weight: 600; }
.tl-fecha { font-size: 13px; color: var(--tinta-suave); }
.tl-nota { font-size: 12px; color: var(--advertencia); font-weight: 600; }
.tl-detalle {
  margin-top: var(--espacio-1); background: var(--fondo-hundido); border: 1px solid var(--linea);
  border-radius: var(--radio-md); padding: var(--espacio-2) var(--espacio-3);
}
.tl-meta { font-size: 12px; color: var(--tinta-suave); margin-top: var(--espacio-1); }
.simulador { margin-top: var(--espacio-2); }
.simulador button { border-style: dashed; white-space: normal; text-align: left; }

/* ---------- mapa de ubicación (Leaflet) ---------- */
.mapa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); margin-bottom: var(--espacio-2); }
.mapa-titulo { font-weight: 600; }
#mapa-avisos .aviso { margin-bottom: var(--espacio-2); }
.mapa {
  height: 320px; border: 1px solid var(--linea-control); border-radius: var(--radio-md);
  background: var(--fondo-hundido); font-family: var(--font-textos); z-index: 0; /* los controles de Leaflet no tapan el encabezado ni los diálogos */
}
.mapa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mapa--editable:not(:has(.mapa-pin)) { cursor: crosshair; }
.mapa-acciones { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-2); }
.mapa-acciones button { margin-left: auto; }
.mapa-leyenda { display: inline-flex; align-items: center; gap: var(--espacio-2); font-size: 13px; color: var(--tinta-suave); }
.mapa-leyenda__punto, .mapa-punto-sua { stroke: var(--tinta-suave); stroke-width: 2; stroke-dasharray: 3 2; fill: var(--superficie); fill-opacity: .9; }
.mapa-leyenda__punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px dashed var(--tinta-suave); background: var(--superficie); }
/* Marcador: pin del sistema (trazo lineal) relleno en azul institucional. */
.mapa-pin { background: none; border: 0; }
.mapa-pin__svg { fill: var(--azul); stroke: var(--blanco); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.mapa-pin__svg circle { fill: var(--blanco); stroke: var(--azul); }
.mapa--editable .mapa-pin { cursor: grab; }
/* Controles y atribución de Leaflet con los colores del tema. */
.mapa .leaflet-bar a { background: var(--superficie); color: var(--tinta); border-bottom-color: var(--linea); }
.mapa .leaflet-bar a:hover, .mapa .leaflet-bar a:focus { background: var(--superficie-alt); }
.mapa .leaflet-bar a.leaflet-disabled { background: var(--superficie-alt); color: var(--tinta-suave); }
.mapa .leaflet-control-attribution { background: var(--superficie); color: var(--tinta-suave); opacity: .9; font-size: 11px; }
.mapa .leaflet-control-attribution a { color: var(--azul-texto); }
.mapa .leaflet-tooltip { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
/* Mapa base sin versión oscura propia (OpenStreetMap): se invierte y atenúa para no encandilar. */
.mapa--atenuado .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }

/* ---------- bandeja: selector listado / mapa y vista de mapa ---------- */
.selector-modo { margin-left: auto; display: inline-flex; border: 1px solid var(--linea-control); border-radius: var(--radio-md); overflow: hidden; flex: none; }
/* Botón de pantalla completa: a la derecha; junto al selector cuando éste se muestra. */
#btn-ampliar { margin-left: auto; flex: none; }
.selector-modo:not(.hidden) + #btn-ampliar { margin-left: 0; }
.selector-modo__btn {
  border: 0; border-radius: 0; min-height: 40px; background: var(--fondo-panel); color: var(--tinta);
  display: inline-flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-3); white-space: nowrap;
}
.selector-modo__btn + .selector-modo__btn { border-left: 1px solid var(--linea-control); }
.selector-modo__btn[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }
.selector-modo__btn:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.mapa-cortes { height: clamp(380px, calc(100vh - 340px), 760px); }

/* ---------- vistas ampliables (pantalla completa) ---------- */
.vista-barra { display: none; align-items: center; justify-content: flex-end; gap: var(--espacio-3); margin-bottom: var(--espacio-2); }
.vista-barra__titulo { display: none; margin-right: auto; font-family: var(--font-titulares); font-weight: 700; font-size: 18px; }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0;
  background: var(--fondo-panel); color: var(--tinta); border: 1px solid var(--linea-control); border-radius: var(--radio-md);
}
.btn-icono:hover { background: var(--azul-suave); color: var(--azul-texto); }
.btn-icono:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Ampliada: ocupa toda la pantalla (API nativa) o toda la ventana (si no hay API). */
.vista-ampliable.pantalla-completa {
  position: fixed; inset: 0; z-index: 40; overflow: auto;
  display: flex; flex-direction: column; padding: var(--espacio-4); background: var(--fondo-pagina);
}
.vista-ampliable.pantalla-completa .vista-barra { display: flex; }
.vista-ampliable.pantalla-completa .vista-barra__titulo { display: block; }
.vista-ampliable.pantalla-completa .table-wrap { flex: 1 0 auto; }
.vista-ampliable.pantalla-completa .table-wrap { overflow: visible; } /* la cabecera fija necesita que el desplazamiento sea el de la sección */
.vista-ampliable.pantalla-completa table.eventos thead th { position: sticky; top: calc(-1 * var(--espacio-4)); z-index: 1; }
/* Mapa ampliado: todo el alto disponible; avisos y referencias pasan debajo (se llega desplazando). */
.vista-ampliable.pantalla-completa .mapa-cortes { order: 1; flex: none; height: calc(100vh - 2 * var(--espacio-4) - 48px); min-height: 300px; }
.vista-ampliable.pantalla-completa .mapa-referencias { order: 2; }
.vista-ampliable.pantalla-completa #mapa-avisos { order: 3; margin-top: var(--espacio-3); }
.vista-ampliable.pantalla-completa #mapa-sin-ubicacion { order: 4; }
/* Con la API nativa, el navegador ya la muestra sola; la regla fija sirve para el caso sin API. */
.vista-ampliable:fullscreen { width: 100%; height: 100%; }
body.con-vista-ampliada { overflow: hidden; }
#mapa-avisos .aviso, #mapa-sin-ubicacion .aviso { margin-bottom: var(--espacio-3); }
#mapa-sin-ubicacion { margin-top: var(--espacio-3); }
.lista-sin-ubicacion { margin: var(--espacio-1) 0 0; padding-left: var(--espacio-5); }
.lista-sin-ubicacion li { margin-bottom: var(--espacio-1); }

/* Marcadores: color = modalidad (como las etiquetas); relleno = activo, contorno = finalizado. */
.marcador-corte { background: none; border: 0; }
.punto-corte {
  --color-corte: var(--advertencia);
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 18px; height: 18px; border-radius: 50%; background: var(--color-corte); border: 2px solid var(--blanco);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5); color: var(--blanco); font: 700 12px/1 var(--font-textos);
}
.punto-corte--TOTAL { --color-corte: var(--error); }
.punto-corte--PARCIAL { --color-corte: var(--advertencia); }
.punto-corte--finalizado { background: var(--superficie); border: 3px solid var(--color-corte); color: var(--tinta); }
.punto-corte--grupo { width: 26px; height: 26px; }
.marcador-corte:focus-visible { outline: none; }
.marcador-corte:focus-visible .punto-corte { outline: 3px solid var(--foco); outline-offset: 2px; }

.mapa-referencias { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); list-style: none; margin: var(--espacio-2) 0 0; padding: 0; font-size: 13px; color: var(--tinta-suave); }
.mapa-referencias li { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.mapa-referencias .punto-corte { width: 14px; height: 14px; box-shadow: none; border-color: var(--linea-control); font-size: 10px; }
.mapa-referencias .punto-corte--finalizado { --color-corte: var(--tinta-suave); border: 3px solid var(--color-corte); }
.mapa-referencias .punto-corte--grupo { --color-corte: var(--error); width: 18px; height: 18px; }

/* Ventana emergente de Leaflet con los colores del tema. */
.mapa .leaflet-popup-content-wrapper, .mapa .leaflet-popup-tip { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-2); }
.mapa .leaflet-popup-content { margin: var(--espacio-3) var(--espacio-4); font-size: 14px; line-height: 1.4; }
.mapa a.leaflet-popup-close-button { color: var(--tinta-suave); }
.popup-cortes { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.popup-corte + .popup-corte { border-top: 1px solid var(--linea); margin-top: var(--espacio-3); padding-top: var(--espacio-3); }
.popup-corte__enlace { font-weight: 700; color: var(--azul-texto); }
.popup-corte__titulo { font-weight: 600; margin-top: var(--espacio-1); }
.popup-corte__etiquetas { display: flex; flex-wrap: wrap; gap: var(--espacio-1); margin: var(--espacio-2) 0; }
.popup-corte__fechas { font-size: 13px; }

/* ---------- adjuntos de SUACI ---------- */
#h-adjuntos .count {
  display: inline-block; min-width: 24px; padding: 0 var(--espacio-2); margin-left: var(--espacio-1); border-radius: var(--radio-pill);
  background: var(--fondo-hundido); color: var(--tinta-suave); font-size: 14px; text-align: center; vertical-align: middle;
}
#h-adjuntos .count:empty { display: none; }
.corte-adjuntos { margin-top: var(--espacio-4); }
.corte-adjuntos h3 .small { font-weight: 400; }

/* Galería de imágenes: una imagen grande con flechas, su origen y una tira de miniaturas */
.galeria { display: grid; gap: var(--espacio-2); border-radius: var(--radio-md); }
.galeria:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }
.galeria__marco {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: clamp(160px, 26vh, 260px); background: var(--fondo-hundido); border: 1px solid var(--linea); border-radius: var(--radio-md); overflow: hidden;
}
.galeria__ampliar-zona {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; min-height: 0;
  border: 0; border-radius: 0; background: transparent; cursor: zoom-in; color: var(--tinta-suave);
}
.galeria__ampliar-zona:hover { background: transparent; }
.galeria__imagen { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.galeria__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  background: var(--fondo-panel); border: 1px solid var(--linea-control); border-radius: var(--radio-pill); box-shadow: var(--sombra-1);
}
.galeria__flecha--anterior { left: var(--espacio-2); }
.galeria__flecha--siguiente { right: var(--espacio-2); }
.galeria__posicion {
  position: absolute; top: var(--espacio-2); right: var(--espacio-2); padding: 2px var(--espacio-2);
  background: var(--fondo-panel); border: 1px solid var(--linea); border-radius: var(--radio-pill); font-size: 12px; font-weight: 600;
}
.galeria__pie { display: grid; gap: 2px; font-size: 13px; }
.galeria__origen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-1) var(--espacio-2); font-weight: 600; font-size: 14px; }
.galeria__meta { color: var(--tinta-suave); overflow-wrap: anywhere; }
.galeria__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); margin-top: var(--espacio-1); }
.galeria__acciones .small-btn { display: inline-flex; align-items: center; gap: var(--espacio-1); }
.galeria__acciones .adjunto__descarga { margin: 0; }
.galeria__tira { list-style: none; margin: 0; padding: 2px; display: flex; gap: var(--espacio-2); overflow-x: auto; }
.galeria__mini {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 40px; padding: 0; min-height: 0; flex: none;
  border: 2px solid transparent; border-radius: var(--radio-sm); background: var(--fondo-hundido); overflow: hidden; opacity: .75;
}
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__mini:hover { opacity: 1; background: var(--fondo-hundido); }
.galeria__mini--actual { border-color: var(--azul); opacity: 1; }

/* Otros archivos (PDF, documentos, imágenes no disponibles) */
.archivos { margin-top: var(--espacio-4); }
.lista-archivos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-2); }
.archivo { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); border: 1px solid var(--linea); border-radius: var(--radio-md); font-size: 13px; }
.archivo__icono { color: var(--tinta-suave); display: inline-flex; }
.archivo__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.adjunto--no-vigente { opacity: .7; }
.adjunto__fallo { display: inline-flex; flex-direction: column; align-items: center; gap: var(--espacio-1); }
.adjunto__nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto__meta { color: var(--tinta-suave); }
.adjunto__marcas { display: flex; flex-wrap: wrap; gap: var(--espacio-1); margin-top: var(--espacio-1); }
.adjunto__descarga { display: inline-flex; align-items: center; gap: var(--espacio-1); margin-top: var(--espacio-1); font-weight: 600; }
.adjunto__error { color: var(--error); }

/* Visor de imágenes */
dialog.visor { width: min(1200px, 96vw); max-width: none; height: min(92vh, 1000px); padding: var(--espacio-3); display: none; }
dialog.visor[open] { display: flex; flex-direction: column; gap: var(--espacio-2); }
.visor__barra { display: flex; align-items: center; gap: var(--espacio-2); }
.visor__posicion { margin-right: auto; color: var(--tinta-suave); font-size: 13px; }
.visor__marco { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--fondo-hundido); border-radius: var(--radio-md); }
.visor__imagen { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.visor__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-1) var(--espacio-3); font-size: 13px; }
.visor__pie .adjunto__descarga { margin: 0 0 0 auto; }

/* ---------- publicación en Ualabee ---------- */
#publicacion > * + * { margin-top: var(--espacio-3); }
.acciones-publicacion { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.acciones-publicacion--secundarias { padding-top: var(--espacio-3); border-top: 1px solid var(--linea); }
.cambios-ualabee { margin: 0; padding-left: var(--espacio-5); display: grid; gap: var(--espacio-1); }
.cambios-ualabee del { color: var(--error); }
.cambios-ualabee ins { color: var(--exito); text-decoration: none; }
.intentos { list-style: none; margin: 0; padding: 0; }
.intentos li { padding: var(--espacio-3) 0; border-bottom: 1px solid var(--linea); display: grid; gap: var(--espacio-1); }
.intentos li:last-child { border-bottom: 0; }
.intento-cabecera { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; }
.json-detalle summary { cursor: pointer; color: var(--azul-texto); font-size: 13px; font-weight: 600; }
.json {
  margin: var(--espacio-2) 0 0; padding: var(--espacio-3); max-height: 260px; overflow: auto;
  background: var(--fondo-hundido); border: 1px solid var(--linea); border-radius: var(--radio-md);
  font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
dialog.dlg-publicacion { width: min(620px, 94vw); max-height: 90vh; overflow: auto; }
dialog.dlg-publicacion > form > * + * { margin-top: var(--espacio-3); }
.vista-previa { border: 1px solid var(--linea); border-radius: var(--radio-md); padding: var(--espacio-4); background: var(--fondo-hundido); }
.vista-previa__titulo { font-family: var(--font-titulares); font-weight: 700; font-size: 18px; }
.vista-previa p { margin: var(--espacio-2) 0 var(--espacio-3); white-space: pre-wrap; }
/* Ventana de envío a Ualabee: espera con cuenta regresiva y resultado. */
.envio-ualabee:not(.hidden) { display: flex; gap: var(--espacio-4); align-items: flex-start; }
.envio-ualabee > .aviso { flex: 1; min-width: 0; }
/* Los mensajes técnicos (rutas, identificadores) pueden no tener espacios: que corten la línea. */
dialog.dlg-publicacion .aviso, .intentos li { overflow-wrap: anywhere; }
.envio-ualabee:has(> .aviso) { flex-direction: column; align-items: stretch; }
.envio-ualabee__icono { color: var(--azul-texto); flex: none; }
.envio-ualabee__titulo { font-family: var(--font-titulares); font-weight: 700; font-size: 18px; }
.envio-ualabee p { margin: var(--espacio-1) 0; }
.envio-ualabee__cuenta { font-weight: 600; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.escenario-mock { padding: var(--espacio-3); border: 1px dashed var(--advertencia); border-radius: var(--radio-md); }

/* ---------- configuración ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Texto con aspecto de etiqueta de campo (cuando no hay control asociado). */
.label-like { display: block; font-weight: 600; margin-bottom: var(--espacio-1); }
#form-publicacion h3 { margin: var(--espacio-4) 0 0; }
.acciones-publicacion--secundarias + .acciones-publicacion--secundarias { border-top: 0; padding-top: 0; }
.config-opciones { display: grid; gap: var(--espacio-3); margin: var(--espacio-4) 0; border: 0; padding: 0; }
.config-opcion {
  display: flex; gap: var(--espacio-3); align-items: flex-start; padding: var(--espacio-4);
  border: 1px solid var(--linea-control); border-radius: var(--radio-md); cursor: pointer; background: var(--fondo-panel); font-weight: 400;
}
.config-opcion:has(input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.config-opcion input { margin-top: 3px; width: auto; min-height: 0; flex: none; }
.config-opcion__nombre { font-weight: 600; display: block; }
.config-opcion__descripcion { font-size: 14px; color: var(--tinta-suave); }
.config-meta { font-size: 13px; color: var(--tinta-suave); }
.config-meta--error { color: var(--error); }

/* Descripción pública: copiar texto de SUACI (se agrega al principio) */
.descripcion-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espacio-1) var(--espacio-3); margin-bottom: var(--espacio-1); }
.descripcion-cabecera label { margin-bottom: 0; }
.copiar-desde { display: flex; flex-wrap: wrap; gap: var(--espacio-1); }

/* Publicación en redes */
#redes > * + * { margin-top: var(--espacio-3); }
#redes button { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.redes__ultimas { margin: 0; padding-left: var(--espacio-5); font-size: 13px; color: var(--tinta-suave); }
.dlg-redes { width: min(640px, 96vw); }
.dlg-redes__cuerpo { display: grid; gap: var(--espacio-3); }
.dlg-redes__cuerpo h2 { margin: 0; }
.dlg-redes textarea { width: 100%; }
.counter--excedido { color: var(--error); font-weight: 700; }
.redes__imagenes { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-1); }
.redes__img {
  position: relative; width: 96px; height: 72px; padding: 0; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--tinta-suave);
  border: 2px solid var(--linea); border-radius: var(--radio-sm); background: var(--fondo-hundido);
}
.redes__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.redes__img--elegida { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-suave); }
.redes__img-marcas { position: absolute; left: 2px; bottom: 2px; display: flex; gap: 2px; }
.redes__img-marcas .mr-etiqueta { font-size: 10px; padding: 0 4px; }
.redes__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.redes__acciones button { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.redes__estado:empty { display: none; }
.redes__estado ol { margin: var(--espacio-1) 0 0; padding-left: var(--espacio-5); }

/* Configuración en pestañas */
.pestana[hidden] { display: none; }
#pestanas { margin-bottom: var(--espacio-4); }
#pestanas + .card, .pestana { margin-top: 0; }

/* Usuarios */
.tabla-scroll { overflow-x: auto; }
.tabla-usuarios { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-usuarios th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tinta-suave); padding: var(--espacio-2); border-bottom: 1px solid var(--linea); background: var(--fondo-hundido); }
.tabla-usuarios td { padding: var(--espacio-2); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-usuarios tr:last-child td { border-bottom: 0; }
.usuarios__inactivo td { color: var(--tinta-suave); }
.usuarios__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-1); justify-content: flex-end; }
.dlg-usuario { width: min(480px, 94vw); }
.password-temporal__fila { display: flex; align-items: center; gap: var(--espacio-2); margin-bottom: var(--espacio-3); }
.password-temporal { font: 600 20px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; padding: var(--espacio-2) var(--espacio-3); background: var(--fondo-hundido); border: 1px solid var(--linea); border-radius: var(--radio-md); user-select: all; }

/* Ambientes (configuración): una tarjeta por ambiente; la activa, resaltada */
.ambientes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--espacio-4); margin: var(--espacio-4) 0 var(--espacio-2); align-items: start; }
.ambiente { display: grid; gap: var(--espacio-3); padding: var(--espacio-4); border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--fondo-panel); min-width: 0; }
.ambiente--activo { border-color: var(--azul-texto); box-shadow: inset 4px 0 0 var(--azul); background: var(--azul-suave); }
.ambiente__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); }
.ambiente__cabecera h3 { margin: 0; }
.ambiente > p { margin: 0; }
.ambiente dl.datos { grid-template-columns: 110px 1fr; font-size: 13px; }
.ambiente dl.datos dd { overflow-wrap: anywhere; }
.ambiente__codigos { display: grid; gap: var(--espacio-2); }
.ambiente__codigos .row2 { gap: var(--espacio-3); }
.ambiente__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-3); }
.ambiente fieldset.config-opciones legend { font-weight: 600; font-size: 14px; margin-bottom: var(--espacio-1); }
.dlg-ambiente { max-width: min(560px, 94vw); }
.dlg-ambiente ul { padding-left: var(--espacio-5); }
.config-intervalo select { max-width: 320px; }
.config-intervalo .hint { max-width: 80ch; }
#sync-estado .aviso, #avisos-sync .aviso { margin-bottom: var(--espacio-3); }
.config-acciones { display: flex; align-items: center; gap: var(--espacio-3); flex-wrap: wrap; }

/* ---------- diálogos y notificaciones ---------- */
dialog {
  border: 1px solid var(--linea); border-radius: var(--radio-md); padding: var(--espacio-5); width: min(480px, 92vw);
  background: var(--fondo-panel); color: var(--tinta); box-shadow: var(--sombra-2);
}
dialog::backdrop { background: rgba(15, 22, 32, .55); }
dialog h2 { margin-bottom: var(--espacio-2); }
dialog .actions { display: flex; justify-content: flex-end; gap: var(--espacio-2); margin-top: var(--espacio-4); }

.toast {
  position: fixed; right: var(--espacio-5); bottom: var(--espacio-5); z-index: 50;
  max-width: 440px; box-shadow: var(--sombra-2); border: 1px solid var(--linea); align-items: flex-start;
}

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: var(--espacio-4); background: var(--fondo-hundido);
}
.login-card { width: min(400px, 100%); padding: var(--espacio-6); }
.login-card .login-logo { margin-bottom: var(--espacio-6); }
.login-card h1 { margin-bottom: var(--espacio-1); }
.login-card .bajada { font-family: var(--font-titulares); font-size: 16px; line-height: 1.4; color: var(--tinta-suave); margin: 0 0 var(--espacio-5); }
.login-card button { width: 100%; min-height: 44px; margin-top: var(--espacio-1); }
.login-tema { margin-top: var(--espacio-5); display: flex; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .corte-grid { grid-template-columns: minmax(0, 1fr); }
  /* Una sola columna, en el orden de trabajo: SUACI, datos para publicación, validación, publicación, historial. */
  .ficha-columnas { display: flex; flex-direction: column; gap: var(--espacio-4); }
  .ficha-col { display: contents; }
  .ficha-columnas [aria-labelledby="h-sua"] { order: 1; }
  .ficha-columnas [aria-labelledby="h-pub"] { order: 2; }
  .ficha-columnas [aria-labelledby="h-val"] { order: 3; }
  .ficha-columnas [aria-labelledby="h-publ"] { order: 4; }
  .ficha-columnas [aria-labelledby="h-hist"] { order: 5; }
}
@media (max-width: 767px) {
  main { padding: var(--espacio-4); }
  .encabezado-app { padding: var(--espacio-3) var(--espacio-4); }
  .usuario, .tema__texto, .enlace-config__texto { display: none; }
  .mapa { height: 260px; }
  .encabezado-acciones { gap: var(--espacio-2); }
  dl.datos { grid-template-columns: 1fr; gap: 0; }
  dl.datos dd { margin-bottom: var(--espacio-2); }
  .row2 { grid-template-columns: 1fr; }
  .toast { left: var(--espacio-4); right: var(--espacio-4); }
}
.login-wrap { max-width: none; margin: 0; grid-template-columns: minmax(0, 400px); justify-content: center; align-content: center; }
.login-card { width: 100%; }
@media (max-width: 480px) { .login-card { padding: var(--espacio-5); } }
.pager { flex-wrap: wrap; }
/* Pantallas muy angostas: la firma baja a 30 px de alto, el mínimo del isologotipo */
@media (max-width: 400px) {
  .encabezado-app .mr-encabezado__marca .mr-logo, .login-logo .mr-logo { height: 30px !important; }
}
@media (max-width: 520px) { .app-nombre { display: none; } }