/* AbogaMaster · la hoja única del sitio. Variables de la marca (provisional: azul tinta y dorado), claro y oscuro,
   y los componentes que usan todas las pantallas. Una pieza nueva se agrega aquí, nunca en una plantilla. */

:root {
  --tinta: #1f2a44;
  --tinta-2: #2e3d63;
  --oro: #b08d3c;
  --oro-suave: #f3ecdc;
  --fondo: #f6f5f1;
  --superficie: #ffffff;
  --superficie-2: #f0eee8;
  --borde: #dcd8cd;
  --texto: #1d2330;
  --texto-2: #545b6b;
  --enlace: #23407a;
  --aviso: #8a5a00;
  --aviso-fondo: #fdf4e1;
  --error: #a3261f;
  --error-fondo: #fbe9e7;
  --bien: #1f6b3a;
  --bien-fondo: #e6f4ea;
  --primario: var(--tinta);
  --primario-texto: #ffffff;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-ley: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --r1: 6px; --r2: 10px; --r3: 16px;
  --sombra: 0 1px 2px rgba(20, 24, 35, .06), 0 4px 14px rgba(20, 24, 35, .06);
  --foco: var(--tinta);
  --sobre-error: #ffffff;
  --barra-texto: #ffffff;
  --barra-tenue: rgba(255, 255, 255, .7);
  --barra-velo: rgba(255, 255, 255, .12);
  --barra-campo: rgba(255, 255, 255, .1);
  --barra-borde: rgba(255, 255, 255, .25);
  --toque: 44px;
  --barra: 60px;
  color-scheme: light;
}

:root[data-tema="oscuro"] {
  --fondo: #11151d;
  --superficie: #19202c;
  --superficie-2: #212a39;
  --borde: #323d50;
  --texto: #ebe8e0;
  --texto-2: #b3b7c2;
  --enlace: #a9c1f2;
  --aviso: #f0c46b;
  --aviso-fondo: #3a2e14;
  --error: #ff9c92;
  --error-fondo: #3d1d1b;
  --bien: #8fd9a8;
  --bien-fondo: #17311f;
  --primario: var(--oro);
  --primario-texto: #11151d;
  --oro-suave: #2d2716;
  --foco: var(--oro);
  --sobre-error: #11151d;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #11151d; --superficie: #19202c; --superficie-2: #212a39; --borde: #323d50; --texto: #ebe8e0;
    --texto-2: #b3b7c2; --enlace: #a9c1f2; --aviso: #f0c46b; --aviso-fondo: #3a2e14; --error: #ff9c92;
    --error-fondo: #3d1d1b; --bien: #8fd9a8; --bien-fondo: #17311f; --primario: var(--oro);
    --primario-texto: #11151d; --oro-suave: #2d2716; --foco: var(--oro); --sobre-error: #11151d; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--letra); font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--fondo);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--enlace); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--e3); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--e3); }
.oculto { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenue { color: var(--texto-2); }
.chico { font-size: .875rem; }

/* ---------- barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 20; height: var(--barra); display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e4); background: var(--tinta); color: var(--barra-texto); border-bottom: 3px solid var(--oro);
}
.barra a { color: var(--barra-texto); text-decoration: none; }
.barra :focus-visible { outline-color: var(--oro); }
.marca { font-family: var(--letra-ley); font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
         display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; min-height: var(--toque); }
.marca-nombre span { color: var(--oro); }
.marca-logo { display: block; height: 36px; width: auto; max-width: 140px; object-fit: contain; border-radius: var(--r1); }
.buscador { flex: 1; max-width: 520px; display: flex; }
.buscador input {
  width: 100%; min-height: 40px; border-radius: var(--r2); border: 1px solid var(--barra-borde);
  background: var(--barra-campo); color: var(--barra-texto); padding: 0 var(--e3); font: inherit;
}
.buscador input::placeholder { color: var(--barra-tenue); }
.menu { display: flex; align-items: center; gap: var(--e1); margin-left: auto; }
.menu a, .menu button {
  min-height: var(--toque); display: inline-flex; align-items: center; padding: 0 var(--e3); border-radius: var(--r1);
  color: var(--barra-texto); background: none; border: 0; font: inherit; cursor: pointer;
}
.menu a:hover, .menu button:hover, .menu a[aria-current="page"] { background: var(--barra-velo); }
.menu-boton { display: none; }
@media (max-width: 760px) {
  .barra { gap: var(--e2); padding: 0 var(--e2); }
  .marca { font-size: 1.1rem; }
  .menu-boton { display: inline-flex; }
  .menu { display: none; position: absolute; top: var(--barra); right: 0; left: 0; flex-direction: column;
          align-items: stretch; background: var(--tinta); padding: var(--e2); border-bottom: 3px solid var(--oro); }
  .menu.abierto { display: flex; }
}

/* ---------- página ---------- */
.pagina { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: var(--e5) var(--e4); }
.pie { padding: var(--e4); text-align: center; color: var(--texto-2); font-size: .85rem; border-top: 1px solid var(--borde); }
.pie a { color: var(--texto-2); }

/* ---------- tarjetas, avisos, botones ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r3); padding: var(--e5);
           box-shadow: var(--sombra); margin-bottom: var(--e4); }
.aviso { border-radius: var(--r2); padding: var(--e3) var(--e4); margin-bottom: var(--e3); background: var(--aviso-fondo);
         color: var(--texto); border-left: 4px solid var(--aviso); }
.aviso.error { background: var(--error-fondo); border-left-color: var(--error); }
.aviso.bien { background: var(--bien-fondo); border-left-color: var(--bien); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--toque);
  padding: 0 var(--e4); border-radius: var(--r2); border: 1px solid transparent; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; background: var(--primario); color: var(--primario-texto);
  transition: transform .08s ease, filter .15s ease;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: scale(.98); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton.discreto { background: transparent; color: var(--enlace); border-color: transparent; font-weight: 500; }
.boton.peligro { background: var(--error); color: var(--sobre-error); }
.boton[disabled] { opacity: .55; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input, .campo select, .campo textarea, .entrada {
  min-height: var(--toque); border: 1px solid var(--borde); border-radius: var(--r2); background: var(--superficie);
  color: var(--texto); padding: var(--e2) var(--e3); font: inherit; width: 100%;
}
.campo.casilla { flex-direction: row; align-items: center; gap: var(--e2); }
.campo.casilla input { width: 22px; min-height: 22px; }
.errores { color: var(--error); font-size: .9rem; margin: 0; padding-left: var(--e4); }
.fila-form { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-end; }
.fila-form .campo { margin-bottom: 0; flex: 1 1 180px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------- tablas ---------- */
.tabla-caja { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r2); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--superficie-2); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td select.entrada, td .fila-form select { min-width: 8rem; }
td .acciones { align-items: center; }
/* Tabla que en el teléfono se lee como fichas: cada fila una tarjeta, cada dato con su etiqueta (data-etiqueta). */
@media (max-width: 760px) {
  .tabla-fichas table, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td { display: block; width: 100%; }
  .tabla-fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-fichas tr { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
  .tabla-fichas tr:last-child { border-bottom: 0; }
  .tabla-fichas td { border: 0; padding: var(--e1) var(--e3); }
  .tabla-fichas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .78rem;
                                            font-weight: 600; color: var(--texto-2); }
  .tabla-fichas td:empty { display: none; }
  .tabla-fichas td.vacio { text-align: center; }
}

/* ---------- estados vacíos, etiquetas, avisos breves ---------- */
.vacio { text-align: center; color: var(--texto-2); padding: var(--e6) var(--e4); }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
            background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.etiqueta.con-texto { background: var(--bien-fondo); color: var(--bien); border-color: transparent; }
.etiqueta.sin-texto { background: var(--aviso-fondo); color: var(--aviso); border-color: transparent; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; padding: 3px 10px; border-radius: 999px;
        background: var(--aviso-fondo); color: var(--aviso); text-decoration: none; margin: 0 4px 4px 0; }
.brindis { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); opacity: 0;
           background: var(--texto); color: var(--fondo); padding: var(--e2) var(--e4); border-radius: var(--r2);
           transition: opacity .2s ease, transform .2s ease; z-index: 50; display: flex; gap: var(--e3); align-items: center; }
.brindis.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.brindis form { margin: 0; }
.brindis .boton { min-height: 36px; }
.mensajes-sitio { list-style: none; padding: 0; margin: 0 0 var(--e3); }

/* ---------- chat ---------- */
.chat { display: grid; grid-template-columns: 280px 1fr; gap: 0; flex: 1; min-height: calc(100vh - var(--barra)); }
.historial { border-right: 1px solid var(--borde); background: var(--superficie); padding: var(--e3); overflow-y: auto;
             height: calc(100vh - var(--barra)); position: sticky; top: var(--barra); }
.historial ul { list-style: none; margin: var(--e2) 0 0; padding: 0; }
.historial li a { display: block; padding: var(--e2) var(--e3); border-radius: var(--r1); text-decoration: none;
                  color: var(--texto); min-height: var(--toque); }
.historial li a:hover, .historial li a[aria-current="page"] { background: var(--superficie-2); }
.historial .fecha { display: block; font-size: .78rem; color: var(--texto-2); }
.conversacion { display: flex; flex-direction: column; min-width: 0; }
.hilo { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: var(--e5) var(--e4) var(--e4); }
.burbuja { background: var(--oro-suave); border-radius: var(--r3) var(--r3) var(--r1) var(--r3); padding: var(--e3) var(--e4);
           margin: 0 0 var(--e4) auto; max-width: 85%; width: fit-content; white-space: pre-wrap; overflow-wrap: anywhere; }
.respuesta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r3); padding: var(--e5);
             margin-bottom: var(--e5); box-shadow: var(--sombra); overflow-wrap: anywhere; }
.respuesta .corta { font-weight: 700; font-size: 1.05rem; }
.respuesta h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin-top: var(--e4); }
.respuesta .no-alcanza { background: var(--aviso-fondo); border-radius: var(--r2); padding: var(--e3) var(--e4); }
.respuesta .no-alcanza ul { margin: 0; padding-left: var(--e4); }
.respuesta .aviso-pie { font-size: .82rem; color: var(--texto-2); border-top: 1px solid var(--borde); padding-top: var(--e3); margin-top: var(--e4); }
.respuesta .busco { font-size: .82rem; color: var(--texto-2); }
.respuesta .busco summary { cursor: pointer; min-height: 32px; }
.respuesta .redactando { font-size: .95rem; color: var(--texto-2); animation: latido 1.6s ease-in-out infinite; }
.respuesta .encontrados ul { margin: var(--e1) 0 0; padding-left: 1.2em; }
.respuesta .encontrados li { margin: 2px 0; }
.etiqueta.nueva { background: var(--bien-fondo); color: var(--bien); border-color: transparent; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .respuesta .redactando { animation: none; } }
.escribiendo::after { content: "▍"; animation: parpadeo 1s steps(1) infinite; color: var(--oro); }
@keyframes parpadeo { 50% { opacity: 0; } }
.sin-confirmar { text-decoration: underline dotted var(--error); text-underline-offset: 3px; cursor: help; position: relative; }
.sin-confirmar:hover::after, .sin-confirmar:focus::after {
  content: attr(data-nota); position: absolute; left: 0; top: 1.6em; white-space: nowrap; background: var(--texto);
  color: var(--fondo); font-size: .78rem; padding: 2px 8px; border-radius: var(--r1); z-index: 5; }
.caja-pregunta { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fondo) 18%); padding: var(--e4) var(--e4) var(--e3); }
.caja-pregunta form { max-width: 860px; margin: 0 auto; display: flex; gap: var(--e2); align-items: flex-end;
                      background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r3); padding: var(--e2);
                      box-shadow: var(--sombra); }
.caja-pregunta textarea { flex: 1; border: 0; resize: none; background: transparent; color: var(--texto); font: inherit;
                          min-height: var(--toque); max-height: 200px; padding: var(--e2); }
.caja-pregunta textarea:focus { outline: none; }
.caja-pregunta .aviso-orientacion { max-width: 860px; margin: var(--e2) auto 0; font-size: .78rem; color: var(--texto-2); text-align: center; }
.ejemplos { display: flex; flex-direction: column; gap: var(--e2); max-width: 560px; margin: var(--e4) auto 0; }
.ejemplos button { text-align: left; min-height: var(--toque); padding: var(--e2) var(--e4); border-radius: var(--r2);
                   border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; }
.ejemplos button:hover { border-color: var(--oro); }
.contexto-norma { max-width: 860px; margin: 0 auto var(--e3); }
.boton-historial { display: none; }
.cabecera-conversacion { justify-content: flex-end; align-items: flex-start; margin-bottom: var(--e3); }
.cabecera-conversacion .boton-historial { margin-right: auto; }
.renombrar summary { list-style: none; }
.renombrar summary::-webkit-details-marker { display: none; }
.renombrar[open] { flex-basis: 100%; order: 3; }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; }
  .historial { display: none; position: fixed; inset: var(--barra) 0 0 0; z-index: 15; max-height: none; border-right: 0; }
  .historial.abierto { display: block; }
  .boton-historial { display: inline-flex; }
  .hilo { padding: var(--e3) var(--e3) var(--e2); }
  .respuesta { padding: var(--e4); }
  .caja-pregunta { padding: var(--e2); }
}

/* ---------- tarjeta de cita ---------- */
.cita { border: 1px solid var(--borde); border-left: 4px solid var(--oro); border-radius: var(--r2); padding: var(--e3) var(--e4);
        margin-bottom: var(--e3); background: var(--superficie); animation: aparece .25s ease; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cita .cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2); }
.cita .articulo { font-weight: 700; }
.cita .norma { font-size: .88rem; color: var(--texto-2); }
.texto-ley { font-family: var(--letra-ley); font-size: 17px; line-height: 1.6; white-space: pre-wrap; margin: var(--e2) 0; }
.cita .frase { font-family: var(--letra-ley); font-style: italic; color: var(--texto-2); margin: 0 0 var(--e2); }
.franja-derogada { background: var(--error); color: var(--sobre-error); font-weight: 600; padding: var(--e2) var(--e3); border-radius: var(--r1);
                   margin-bottom: var(--e2); }
.franja-derogada a { color: var(--sobre-error); }
.esqueleto { border: 1px dashed var(--borde); border-radius: var(--r2); padding: var(--e3) var(--e4); color: var(--texto-2);
             margin-bottom: var(--e3); animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .5; } }

/* ---------- ficha de ley ---------- */
.ficha { display: grid; grid-template-columns: 220px 1fr; gap: var(--e5); align-items: start; }
.indice-articulos { position: sticky; top: calc(var(--barra) + var(--e3)); max-height: calc(100vh - var(--barra) - 32px);
                    overflow-y: auto; font-size: .9rem; }
.indice-articulos ul { list-style: none; padding: 0; margin: 0; }
.indice-articulos a { display: block; padding: 6px var(--e2); border-radius: var(--r1); text-decoration: none; }
.indice-articulos a:hover { background: var(--superficie-2); }
.articulo-ley { padding: var(--e4); border-radius: var(--r2); border: 1px solid transparent; scroll-margin-top: calc(var(--barra) + 16px); }
.articulo-ley:target { border-color: var(--oro); background: var(--oro-suave); }
.articulo-ley h3 { font-family: var(--letra-ley); }
/* Lo que la publicación trae junto al artículo y no es ley: plegado, en otro fondo y con su rótulo. */
.comentario { margin: 0 0 var(--e3); }
.comentario summary { list-style: none; cursor: pointer; }
.comentario summary::-webkit-details-marker { display: none; }
.comentario summary::after { content: "▾"; margin-left: 6px; transition: transform .2s ease; }
.comentario[open] summary::after { transform: rotate(180deg); }
.comentario-cuerpo { margin-top: var(--e2); padding: var(--e3) var(--e4); background: var(--superficie-2);
                     border-left: 4px solid var(--borde); border-radius: var(--r2); animation: aparece .2s ease; }
.comentario-rotulo { margin: 0 0 var(--e2); font-size: .78rem; color: var(--texto-2); text-transform: uppercase;
                     letter-spacing: .04em; font-weight: 600; }
.comentario-texto { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.datos-norma { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e2) var(--e4); margin: 0; }
.datos-norma dt { font-size: .78rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.datos-norma dd { margin: 0 0 var(--e2); font-weight: 600; }
.inventario-norma { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); margin: 0 0 var(--e3);
                   color: var(--texto-2); font-size: .92rem; }
.inventario-norma .chip { margin: 0; }
.inventario-norma > span:nth-child(n+3)::before { content: "· "; color: var(--texto-2); font-weight: 400; }
.inventario-norma .chip.con-texto { background: var(--bien-fondo); color: var(--bien); }
.inventario-norma .vigencia-roja { color: var(--error); font-weight: 600; }
.resultado { padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.resultado:last-child { border-bottom: 0; }
.resultado mark { background: var(--oro-suave); color: inherit; border-radius: 3px; padding: 0 2px; font-weight: 600; }
.extracto { margin: var(--e1) 0 0; overflow-wrap: anywhere; }
.paginas { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap;
           padding-top: var(--e3); border-top: 1px solid var(--borde); margin-top: var(--e2); }
.buscador-leyes .fila-form + .filtros { margin-top: var(--e3); }
.filtros > summary, .indice-articulos summary {
  min-height: var(--toque); display: flex; align-items: center; gap: var(--e2); cursor: pointer; font-weight: 600;
  color: var(--texto-2); list-style: none; }
.filtros > summary::-webkit-details-marker, .indice-articulos summary::-webkit-details-marker { display: none; }
.filtros > summary::before, .indice-articulos summary::before { content: "▸"; transition: transform .15s ease; }
.filtros[open] > summary::before, .indice-articulos details[open] summary::before { transform: rotate(90deg); }
.filtros .fila-form { align-items: flex-end; }
.nada-coincide ul { margin: 0 0 var(--e3); padding-left: var(--e5); }
.nada-coincide li { margin-bottom: var(--e2); }
@media (max-width: 760px) {
  .ficha { grid-template-columns: 1fr; }
  .indice-articulos { position: static; max-height: none; }
  .tarjeta { padding: var(--e4); }
  .pagina { padding: var(--e4) var(--e3); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.barra .menu-boton { color: var(--barra-texto); display: none; }
@media (max-width: 760px) { .barra .menu-boton { display: inline-flex; } }
.menu.menu-fijo { display: flex; position: static; flex-direction: row; background: none; border: 0; padding: 0; }
.arriba { margin-top: var(--e2); }
.sin-margen { margin: 0; }
.formulario-angosto { max-width: 460px; margin: var(--e5) auto; }
.tabla-caja td, .tabla-caja th { min-width: 7.5rem; }
.tabla-caja td:first-child { min-width: 10rem; }

/* Ajustes: índice de secciones, medidor del tope, conectores con semáforo. */
.indice-secciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e4); }
.indice-secciones .chip { text-decoration: none; min-height: 36px; background: var(--superficie); color: var(--enlace);
                          border: 1px solid var(--borde); }
.seccion-ajustes { scroll-margin-top: calc(var(--barra) + 12px); }
.rejilla-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--e5); }
.rejilla-ajustes .pie-formulario, .rejilla-ajustes .campo.casilla { grid-column: 1 / -1; }
.pie-formulario { margin-top: var(--e2); }
.entrada.corta { width: 7rem; min-width: 0; }
.texto-error { color: var(--error); }
.medidor { display: block; width: 100%; height: 10px; border-radius: 999px; border: 1px solid var(--borde); overflow: hidden;
           background: var(--superficie-2); appearance: none; -webkit-appearance: none; --medidor: var(--bien); }
.medidor.alto { --medidor: var(--aviso); }
.medidor.lleno { --medidor: var(--error); }
.medidor::-webkit-progress-bar { background: var(--superficie-2); }
.medidor::-webkit-progress-value { background: var(--medidor); transition: width .4s ease; }
.medidor::-moz-progress-bar { background: var(--medidor); }
.conectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); }
.conector { border: 1px solid var(--borde); border-radius: var(--r2); padding: var(--e4); background: var(--fondo); min-width: 0; }
.conector-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.conector-cabecera h3 { margin: 0; }
.semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; }
.semaforo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--texto-2); }
.semaforo.verde { color: var(--bien); } .semaforo.verde::before { background: var(--bien); }
.semaforo.rojo { color: var(--error); } .semaforo.rojo::before { background: var(--error); }
.semaforo.ambar { color: var(--aviso); } .semaforo.ambar::before { background: var(--aviso); }
.semaforo.gris { color: var(--texto-2); }
/* La llave recién generada: se ve una sola vez, para copiarla. */
.llave-nueva { display: grid; gap: var(--e2); margin: var(--e3) 0; padding: var(--e3); border-radius: var(--r2);
               border: 1px solid var(--aviso); background: var(--superficie-2); }
.llave-texto { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere;
               user-select: all; padding: var(--e2); border-radius: var(--r1); background: var(--fondo); }
.guia summary, details > summary.boton { cursor: pointer; min-height: var(--toque); display: inline-flex; align-items: center; font-weight: 600; }
/* Los proyectos que consultan la ley: a lo ancho, debajo de las conexiones; «Agregar proyecto» abre el campo ahí. */
.proyectos-consulta { margin-top: var(--e4); }
.agregar-proyecto { margin-top: var(--e3); }
.agregar-proyecto > summary { list-style: none; }
.agregar-proyecto > summary::-webkit-details-marker { display: none; }
.guia ol { margin: var(--e2) 0 var(--e3); padding-left: var(--e5); }
.guia li { margin-bottom: var(--e1); }

/* Panel: pestañas, cifras del tablero, campana de alertas. */
.pestanas { display: flex; gap: var(--e1); overflow-x: auto; margin: 0 0 var(--e4); border-bottom: 1px solid var(--borde);
            scrollbar-width: thin; }
.pestanas a { min-height: var(--toque); display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--e3);
              white-space: nowrap; text-decoration: none; color: var(--texto-2); border-bottom: 3px solid transparent;
              margin-bottom: -1px; font-weight: 600; transition: color .15s ease, border-color .15s ease; }
.pestanas a:hover { color: var(--texto); }
.pestanas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--oro); }
.cuenta { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
          border-radius: 999px; background: var(--error); color: var(--sobre-error); font-size: .75rem; font-weight: 700; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.cifra { display: flex; flex-direction: column; gap: 2px; background: var(--superficie); border: 1px solid var(--borde);
         border-radius: var(--r2); padding: var(--e3) var(--e4); min-width: 0; animation: aparece .25s ease; }
.cifra.ancha { grid-column: span 2; }
.cifra.mala { border-left: 4px solid var(--error); }
.tarjeta h2 .semaforo { margin-left: var(--e2); vertical-align: middle; }
.cifra .nombre { font-size: .8rem; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.cifra .valor { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cifra .nota { font-size: .82rem; color: var(--texto-2); }
.cifra .medidor { margin: var(--e1) 0; }
/* Un bloque de cifras que se toca entero para ir a su pantalla. */
a.cifras-enlace { color: inherit; text-decoration: none; }
a.cifras-enlace .cifra { transition: border-color .15s ease, transform .15s ease; }
a.cifras-enlace:hover .cifra, a.cifras-enlace:focus-visible .cifra { border-color: var(--primario); transform: translateY(-1px); }
.etiqueta.prioridad-alta { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.etiqueta.prioridad-media { background: var(--aviso-fondo); color: var(--aviso); border-color: transparent; }
details.intentos > summary { cursor: pointer; min-height: var(--toque); display: inline-flex; align-items: center;
                             color: var(--primario); font-weight: 600; }
details.intentos .lista-corta { font-size: .85rem; padding-left: var(--e4); }
.cabecera-seccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2);
                    margin-bottom: var(--e2); }
.cabecera-seccion h2 { margin: 0; }
.lista-corta { margin: var(--e2) 0; padding-left: var(--e5); }
.lista-corta li { margin-bottom: var(--e1); }
.campana { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--toque);
           min-height: var(--toque); border-radius: var(--r1); color: var(--barra-texto); margin-left: auto; }
.campana:hover { background: var(--barra-velo); }
.campana .cuenta { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; font-size: .7rem; }
.campana.con-alertas svg { animation: timbre 1.2s ease 1; transform-origin: 50% 10%; }
@keyframes timbre { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(6deg); } 80% { transform: none; } }
.campana + .menu-boton + .menu { margin-left: 0; }
@media (max-width: 760px) {
  .cifra.ancha { grid-column: auto; }
  .cifras { grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .cifra { padding: var(--e2) var(--e3); }
  .cifra .valor { font-size: 1.3rem; }
  .cifra.ancha { grid-column: 1 / -1; }
}
/* Tabla de muchas filas cortas: en el teléfono se desliza de lado en vez de volverse fichas. */
.tabla-compacta td, .tabla-compacta th { min-width: 0; white-space: nowrap; }
.tabla-compacta td:first-child { min-width: 0; }

/* Ajustes › Marca: selector de color y muestra en vivo con los colores elegidos. */
.selector-color { display: flex; gap: var(--e2); align-items: stretch; }
.selector-color input[type="color"] { width: var(--toque); min-width: var(--toque); min-height: var(--toque); padding: 2px;
                                       border: 1px solid var(--borde); border-radius: var(--r2); background: var(--superficie);
                                       cursor: pointer; flex: 0 0 auto; }
.selector-color input:not([type="color"]) { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.muestra-marca { border: 1px solid var(--borde); border-radius: var(--r2); overflow: hidden; margin: 0 0 var(--e4);
                 max-width: 560px; background: var(--fondo); }
.muestra-barra { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); padding: 0 var(--e4);
                 background: var(--tinta); color: var(--barra-texto); border-bottom: 3px solid var(--oro);
                 font-family: var(--letra-ley); font-size: 1.2rem; font-weight: 700; transition: background .2s ease; }
.muestra-cuerpo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; padding: var(--e4); }
.muestra-boton { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e4);
                 border-radius: var(--r2); background: var(--tinta); color: var(--barra-texto); font-weight: 600;
                 transition: background .2s ease; }
.muestra-cita { flex: 1 1 100%; margin: 0; }

/* ---------- vigencia y origen del texto en la cita ---------- */
.chip.incorporada { background: var(--superficie-2); color: var(--texto-2); }
.chip em { font-style: normal; font-weight: 600; }
.cita .origen { font-size: .82rem; color: var(--texto-2); margin: 0 0 var(--e2); }