:root {
--bg: #F8FAFC;
--surface: #FFFFFF;
--surface-elevated: #FFFFFF;
--border: #CBD5E1;
--border-subtle: #F1F5F9;

--text: #0F172A;
--text-muted: #56637A;      /* secundario: 6.07 sobre blanco */
--text-soft: #64748B;       /* terciario: etiquetas, NUNCA prosa. 4.76 */

--navy: #0F172A;
--navy-light: #1E293B;
--accent: #0370AB;
--accent-soft: #E0F2FE;
--accent-green: #0D9488;

--tag-bg: #F1F5F9;
--tag-text: #334155;
--pill-active-bg: #0F172A;
--pill-active-text: #FFFFFF;

--estado-vigente: var(--text-soft);
--estado-modificado: #B45309;
--estado-condicionado: #6D28D9;
--estado-inexequible: #B91C1C;
--estado-parcial: #B91C1C;
--estado-derogado: var(--text-soft);
--estado-modificado-bg: #FFFBEB;
--estado-condicionado-bg: #F5F3FF;
--estado-parcial-bg: #FEF2F2;

--alerta: #B91C1C;
--alerta-bg: #FEF2F2;
--aviso: #B45309;           /* matiz, discusión, dato sin confirmar */
--aviso-bg: #FFFBEB;
--ok: #0F766E;              /* confirmado, descuento aplicable, archivado */
--ok-bg: #F0FDFA;

--cita-bg: #FBFAF7;         /* papel */
--cita-borde: #8C8478;
--explica-borde: var(--accent);

--letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--letra-cita: Georgia, "Times New Roman", serif;
--letra-codigo: ui-monospace, SFMono-Regular, Menlo, monospace;

--t-micro: 11px;   --lh-micro: 16px;
--t-small: 12px;   --lh-small: 18px;
--t-base: 14px;    --lh-base: 21px;
--t-lead: 16px;    --lh-lead: 24px;
--t-h3: 18px;      --lh-h3: 25px;
--t-h2: 22px;      --lh-h2: 29px;
--t-h1: 28px;      --lh-h1: 34px;
--t-cita: 15px;    --lh-cita: 26px;
--t-cifra: 24px;   --lh-cifra: 28px;

--ancho-lectura: 34em;

--e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 20px;
--e6: 24px; --e7: 32px; --e8: 40px; --e9: 48px;

--r-chip: 8px;
--r-campo: 12px;
--r-tarjeta: 16px;
--r-hoja: 24px;
--card-radius: var(--r-tarjeta);   /* nombre viejo, mismo valor */

--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 10px 25px -4px rgba(15, 23, 42, 0.12);
--sombra-arriba: 0 -2px 12px rgba(15, 23, 42, 0.06);
--velo: rgba(15, 23, 42, 0.45);

--toque-min: 44px;

--mov-micro: 120ms;
--mov-normal: 200ms;
--mov-hoja: 280ms;
--curva: cubic-bezier(.2, .6, .2, 1);
}

[data-densidad="comoda"] {
--t-micro: 12px;   --lh-micro: 18px;
--t-small: 13px;   --lh-small: 20px;
--t-base: 16px;    --lh-base: 25px;
--t-lead: 18px;    --lh-lead: 28px;
--t-h3: 20px;      --lh-h3: 28px;
--t-h2: 24px;      --lh-h2: 32px;
--t-h1: 30px;      --lh-h1: 38px;
--t-cita: 17px;    --lh-cita: 30px;
--t-cifra: 28px;   --lh-cifra: 32px;
}

[data-theme="dark"] {
--bg: #0B1220;
--surface: #111827;
--surface-elevated: #1F2937;
--border: #2A3647;
--border-subtle: #162032;

--text: #F1F5F9;
--text-muted: #9AA8BC;
--text-soft: #8493A8;

--navy: #38BDF8;
--navy-light: #0EA5E9;
--accent: #38BDF8;
--accent-soft: #0C4A6E;
--accent-green: #2DD4BF;

--tag-bg: #1E293B;
--tag-text: #E2E8F0;
--pill-active-bg: #F8FAFC;
--pill-active-text: #0B1220;

--estado-modificado: #F59E0B;
--estado-condicionado: #A78BFA;
--estado-inexequible: #F87171;
--estado-parcial: #F87171;
--estado-modificado-bg: #2A2210;
--estado-condicionado-bg: #1E1433;
--estado-parcial-bg: #2A1416;

--alerta: #F87171;
--alerta-bg: #2A1416;
--aviso: #FBBF24;
--aviso-bg: #2A2210;
--ok: #2DD4BF;
--ok-bg: #0F2B2A;

--cita-bg: #141922;
--cita-borde: #5B6879;

--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
--sombra-arriba: 0 -2px 12px rgba(0, 0, 0, 0.4);
--velo: rgba(0, 0, 0, 0.6);
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
max-width: 580px;
margin: 0 auto;
padding: 0 0 75px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background-color 0.18s ease, color 0.18s ease;
}

.top-app-bar {
position: sticky;
top: 0;
z-index: 100;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.app-brand {
display: flex;
align-items: center;
gap: 10px;
}
.brand-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--navy);
color: var(--surface);
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="dark"] .brand-icon {
background: #FFFFFF;
color: #090D16;
}
.app-title {
font-size: 17px;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.1;
}
.app-subtitle {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.top-actions {
display: flex;
align-items: center;
gap: 8px;
}
.icon-btn {
background: var(--tag-bg);
border: 1px solid var(--border);
color: var(--text);
padding: 6px 11px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: transform 0.1s ease;
}
.icon-btn:active { transform: scale(0.94); }

.category-scroll {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.category-scroll::-webkit-scrollbar { display: none; }
.cat-chip {
white-space: nowrap;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 20px;
background: var(--tag-bg);
border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
transition: all 0.12s ease;
}
.cat-chip.active {
background: var(--accent);
color: #FFFFFF;
border-color: var(--accent);
}
[data-theme="dark"] .cat-chip.active {
background: #38BDF8;
color: #090D16;
}

.feed-container {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 16px;
}

.news-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.news-card:hover {
box-shadow: var(--shadow-md);
}
.news-card:active {
transform: scale(0.99);
}

.card-tags {
display: flex;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}    .card-title {
font-size: 16px;
font-weight: 750;
line-height: 1.35;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.card-lead {
font-size: 12.5px;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#view-reader {
display: none;
background: var(--surface);
min-height: 100vh;
animation: slideIn 0.2s ease;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

.reader-hero-header {
position: relative;
background: #0F172A;
background-size: cover;
background-position: center;
color: #FFFFFF;
padding: 20px 16px 26px;
}
.reader-hero-header::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.92) 100%);
pointer-events: none;
}
.reader-header-content {
position: relative;
z-index: 2;
}

.reader-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: #FFFFFF;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
margin-bottom: 16px;
backdrop-filter: blur(4px);
}
.reader-chips {
display: flex;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.reader-chip {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.25);
}
.reader-title {
font-size: 21px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.reader-score {
margin-left: auto; font-size: 11px; color: var(--text-soft);
font-variant-numeric: tabular-nums;
}

.reader-meta {
font-size: 12px;
opacity: 0.85;
display: flex;
gap: 10px;
align-items: center;
}


.reader-body {
padding: 0 16px 20px;
font-size: 14.5px;
line-height: 1.68;
color: var(--text);
}
.reader-body p {
margin-bottom: 14px;
}
.callout-box {
background: var(--tag-bg);
border-left: 3.5px solid var(--navy);
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin: 18px 0;
}
.callout-box.highlight {
border-left-color: var(--accent-green);
background: rgba(13, 148, 136, 0.08);
}
.callout-label {
font-size: 11px;
font-weight: 750;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
color: var(--text);
display: flex;
align-items: center;
gap: 5px;
}
.callout-text {
font-size: 13px;
line-height: 1.5;
}

.section-num-heading {
font-size: 16px;
font-weight: 750;
margin: 22px 0 8px;
color: var(--text);
letter-spacing: -0.01em;
display: flex;
align-items: baseline;
gap: 6px;
}
.num-pill {
font-family: ui-monospace, monospace;
font-size: 11.5px;
font-weight: 800;
background: var(--navy);
color: #FFFFFF;
padding: 2px 7px;
border-radius: 4px;
}
[data-theme="dark"] .num-pill {
background: #38BDF8;
color: #090D16;
}

.legal-quote-box {
background: var(--tag-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
margin: 16px 0;
font-style: italic;
font-size: 13px;
line-height: 1.55;
}
.legal-quote-citation {
display: block;
font-style: normal;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-top: 8px;
}

.reader-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: 580px;
margin: 0 auto;
background: var(--surface);
border-top: 1px solid var(--border);
padding: 10px 16px;
display: flex;
gap: 8px;
z-index: 90;
box-shadow: var(--shadow-lg);
}
.btn-reader-action {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-reader-action.primary {
background: var(--navy);
color: #FFFFFF;
border: 1px solid transparent;
}
[data-theme="dark"] .btn-reader-action.primary {
background: #38BDF8;
color: #090D16;
}
.btn-reader-action.outline {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-reader-action.icono { flex: none; width: var(--toque-min); padding: 10px 0; }

#toast {
position: fixed;
top: 16px;
left: 50%;
transform: translate(-50%, -30px) scale(0.94);
opacity: 0;
pointer-events: none;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 9999px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.2), 0 4px 6px -2px rgba(15, 23, 42, 0.08);
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;

background: rgba(15, 23, 42, 0.94);
color: #F8FAFC;
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] #toast {
background: rgba(255, 255, 255, 0.94);
color: #090D16;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#toast.show {
transform: translate(-50%, 0) scale(1);
opacity: 1;
}

#toast-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
#toast-icon svg {
width: 16px;
height: 16px;
stroke-width: 2.2;
}


.cod-buscador {
position: relative;
margin: 0 16px 14px;
}
.cod-buscador input {
width: 100%;
padding: 12px 14px 12px 40px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 14.5px;
}
.cod-buscador input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.cod-buscador svg {
position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
color: var(--text-soft); pointer-events: none;
}t {
display: flex; align-items: baseline; gap: 10px;
padding: 9px 10px; margin: 0 -10px; border-radius: 9px;
cursor: pointer; text-align: left; width: calc(100% + 20px);
background: none; border: 0; font: inherit; color: inherit;
}
.cod-art:hover { background: var(--tag-bg); }   /* Un punto por estado. Es la información que más importa de un vistazo: si
el artículo sigue en pie o le pasó algo.

Cambió en la fase 4 para hablar el mismo idioma que el resto de la app:

- VIGENTE ya no es verde, es gris. Son 118 de 181 artículos: pintarlos de
color gastaba el vocabulario en lo normal y dejaba sin fuerza a los 16
que sí traen algo.
- INEXEQUIBLE EN PARTE ya no es un punto rojo lleno igual que uno caído
entero: es un ANILLO. Al artículo 10 solo le tacharon dos expresiones
del parágrafo y salía como si no rigiera nada (pendiente B.1).
- DEROGADO sigue gris, pero la fila además va tachada. */
.cod-estado {
flex: none; width: 8px; height: 8px; border-radius: 50%;
background: var(--estado-vigente); align-self: center;
}
.cod-estado.modificado { background: var(--estado-modificado); }
.cod-estado.condicionado { background: var(--estado-condicionado); }
.cod-estado.inexequible { background: var(--estado-inexequible); }
.cod-estado.inexequible_parcial {
background: transparent; border: 2px solid var(--estado-parcial);
}
.cod-estado.derogado,
.cod-estado.subrogado { background: var(--estado-derogado); }


.art-cab { padding: 18px 16px 0; }
.art-kicker {
font-size: 11px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px;
}
.art-titulo {
font-size: 23px; font-weight: 800; line-height: 1.2;
letter-spacing: -.02em; margin-bottom: 10px;
}
.art-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.art-badge {
padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
background: var(--tag-bg); color: var(--tag-text);
}
.art-badge.vigente { background: #DCFCE7; color: #166534; }
.art-badge.modificado { background: #FEF3C7; color: #92400E; }
.art-badge.condicionado { background: #EDE9FE; color: #5B21B6; }
.art-badge.inexequible,
.art-badge.inexequible_parcial { background: #FEE2E2; color: #991B1B; }
[data-theme="dark"] .art-badge.vigente { background: #14532D; color: #BBF7D0; }
[data-theme="dark"] .art-badge.modificado { background: #78350F; color: #FDE68A; }
[data-theme="dark"] .art-badge.condicionado { background: #4C1D95; color: #DDD6FE; }
[data-theme="dark"] .art-badge.inexequible,
[data-theme="dark"] .art-badge.inexequible_parcial { background: #7F1D1D; color: #FECACA; }

.art-alerta {
margin: 14px 16px 0; padding: 12px 14px; border-radius: 12px;
background: #FEE2E2; color: #991B1B; border-left: 3px solid #DC2626;
font-size: 13px; line-height: 1.5; font-weight: 500;
}
[data-theme="dark"] .art-alerta { background: #450A0A; color: #FECACA; }

.art-ley {
margin: 16px 16px 0; padding: 16px 18px;
background: var(--tag-bg); border-left: 3px solid var(--navy);
border-radius: 0 12px 12px 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 15px; line-height: 1.7; white-space: pre-wrap;
}
[data-theme="dark"] .art-ley { border-left-color: var(--accent); }
.art-ley-sello {
display: block; margin-bottom: 10px; font-family: inherit;
font-size: 10px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--text-soft);
}

.art-seccion { margin: 24px 16px 0; }
.art-seccion-tit {
font-size: 11px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--text-soft);
padding-bottom: 8px; border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}

.art-mod { display: flex; gap: 12px; padding: 8px 0; }
.art-mod-punto {
flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
background: var(--accent); position: relative;
}
.art-mod:not(:last-child) .art-mod-punto::after {
content: ''; position: absolute; left: 4px; top: 12px;
width: 1px; height: calc(100% + 8px); background: var(--border);
}
.art-mod-tex { font-size: 13.5px; line-height: 1.45; }
.art-mod-tex b { font-weight: 700; }
.art-mod-tex span { color: var(--text-soft); font-size: 12px; }

.art-sent {
border: 1px solid var(--border); border-radius: 12px;
padding: 13px 15px; margin-bottom: 10px; background: var(--surface);
}
.art-sent-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.art-sent-num { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.art-sent-dec {
padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
background: var(--tag-bg); color: var(--tag-text);
}
.art-sent-dec.inexequible,
.art-sent-dec.inexequible_parcial { background: #FEE2E2; color: #991B1B; }
.art-sent-dec.exequible_condicionado { background: #EDE9FE; color: #5B21B6; }
[data-theme="dark"] .art-sent-dec.inexequible,
[data-theme="dark"] .art-sent-dec.inexequible_parcial { background: #7F1D1D; color: #FECACA; }
[data-theme="dark"] .art-sent-dec.exequible_condicionado { background: #4C1D95; color: #DDD6FE; }

.art-sent-ver {
font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
background: var(--tag-bg); color: var(--text-soft);
}
.art-sent-ver.texto_anterior { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .art-sent-ver.texto_anterior { background: #78350F; color: #FDE68A; }
.art-sent-alcance { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.45; }
.art-sent-res {
font-family: Georgia, "Times New Roman", serif; font-size: 13px;
line-height: 1.6; font-style: italic; padding-left: 11px;
border-left: 2px solid var(--border);
}
.art-sent a { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }

.art-nov {
display: block; width: 100%; text-align: left; background: var(--surface);
border: 1px solid var(--border); border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit;
}
.art-nov:hover { border-color: var(--accent); }
.art-nov-tit { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-bottom: 3px; }
.art-nov-meta { font-size: 11.5px; color: var(--text-soft); }

.art-concor { display: flex; flex-wrap: wrap; gap: 7px; }
.art-concor button {
padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit;
font-size: 12.5px; font-weight: 600;
background: var(--tag-bg); color: var(--accent); border: 0;
}

.art-nota {
margin: 24px 16px 0; padding: 14px 16px; border-radius: 12px;
background: var(--accent-soft); font-size: 13.5px; line-height: 1.55;
}
[data-theme="dark"] .art-nota { background: #0C4A6E; }
.art-nota b {
display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; opacity: .8;
}

.art-proc {
margin: 26px 16px 30px; padding-top: 14px;
border-top: 1px solid var(--border);
font-size: 11.5px; line-height: 1.55; color: var(--text-soft);
}
.art-proc a { color: var(--text-muted); }
.art-proc .aviso { color: #B45309; font-weight: 600; }

.cod-vacio {
margin: 30px 16px; text-align: center;
font-size: 14px; line-height: 1.6; color: var(--text-muted);
}


.drive-lista { padding: 0 16px 24px; }
.drive-item {
display: flex; align-items: center; gap: 12px;
padding: 13px 14px; margin-bottom: 8px;
border: 1px solid var(--border); border-radius: 12px;
background: var(--surface); text-decoration: none; color: inherit;
}
.drive-item:hover { border-color: var(--accent); }
.drive-item svg { flex: none; color: var(--accent); }
.drive-item > span { flex: 1 1 auto; min-width: 0; }
.drive-item-nom, .drive-item-meta { display: block; overflow-wrap: anywhere; }
.drive-item-nom { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.drive-item-meta { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }

.ctrl-grupo { padding: 0 16px 18px; }
.ctrl-tit {
font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--text-soft); margin: 18px 0 8px;
}
.ctrl-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctrl-btn {
padding: 13px 12px; border-radius: 12px; cursor: pointer;
border: 1px solid var(--border); background: var(--surface);
color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
text-align: left; line-height: 1.3;
}
.ctrl-btn:hover { border-color: var(--accent); }
.ctrl-btn.ancho { grid-column: 1 / -1; }
.ctrl-btn.fuerte { background: var(--navy); color: var(--surface); border-color: transparent; }
[data-theme="dark"] .ctrl-btn.fuerte { color: var(--bg); }
.ctrl-btn[disabled] { opacity: .5; cursor: progress; }
.ctrl-salida {
margin: 14px 16px 30px; padding: 14px 16px; border-radius: 12px;
background: var(--tag-bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px; line-height: 1.6; white-space: pre-wrap;
word-break: break-word; color: var(--text-muted); min-height: 60px;
}

.cargando {
padding: 40px 20px; text-align: center;
font-size: 13.5px; color: var(--text-soft);
}

.arch-resumen {
display: flex; flex-direction: column; gap: 3px;
padding: 14px 16px; margin-bottom: 12px; border-radius: 12px;
background: var(--tag-bg); border: 1px solid var(--border);
}
.arch-resumen b { font-size: 15px; letter-spacing: -.01em; }
.arch-resumen span { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.arch-resumen small { font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
.arch-busca input {
width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font: inherit; font-size: 14px;
}
.arch-chips { padding: 10px 0 12px !important; background: transparent !important; border: 0 !important; }
.arch-n { opacity: .6; font-weight: 600; margin-left: 2px; }
.arch-pend { margin: 14px 0 4px; font-size: 12.5px; color: var(--text-muted); }
.arch-pend summary { cursor: pointer; font-weight: 600; }
.arch-pend-f { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.arch-pend-f b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.arch-pend-f span { font-size: 11.5px; color: var(--text-soft); }

.visor-pdf {
margin: 20px 16px 0;
border: 1px solid var(--border);
border-radius: var(--card-radius);
overflow: hidden;
background: var(--surface);
}
.visor-cab {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
}
.visor-ico {
flex: none; width: 36px; height: 36px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-soft); color: var(--accent);
}
.visor-tex { flex: 1; min-width: 0; }
.visor-tit { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.visor-sub { display: block; font-size: 11.5px; color: var(--text-soft); margin-top: 1px; }
.visor-acc { display: flex; gap: 6px; flex: none; }
.visor-btn {
height: 32px; padding: 0 12px; border-radius: 8px;
display: inline-flex; align-items: center; gap: 5px;
font: inherit; font-size: 12px; font-weight: 600;
text-decoration: none; cursor: pointer; white-space: nowrap;
background: var(--tag-bg); color: var(--text); border: 1px solid var(--border);
transition: transform .1s ease, border-color .15s ease;
}
.visor-btn:hover { border-color: var(--accent); }
.visor-btn:active { transform: scale(.97); }
.visor-btn svg { transition: transform .2s ease; }
.visor-pdf.abierto .visor-btn.alternar svg { transform: rotate(180deg); }
.visor-marco { border-top: 1px solid var(--border); background: var(--tag-bg); }
.visor-pdf iframe {
display: block; width: 100%; height: 62vh; min-height: 380px;
border: 0; background: #fff;
}
@media (max-width: 430px) {
.visor-pdf iframe { height: 54vh; min-height: 300px; }
.visor-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.visor-nota {
padding: 10px 14px; font-size: 11.5px; line-height: 1.5;
color: var(--text-soft); border-top: 1px solid var(--border);
}

.fuente-citada { margin: 6px 16px 28px; }
.visor-pdf { margin-bottom: 28px; }
.fuente-citada .section-num-heading { margin-top: 8px; }
.fuente-cita {
margin: 10px 0 0;
border-left: 3.5px solid var(--navy);
border-radius: 0 8px 8px 0;
font-size: 13.5px; line-height: 1.6;
color: var(--text);
}
.fuente-cita .legal-quote-citation { margin-top: 10px; }
.fuente-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fuente-enlaces .visor-btn.principal { color: var(--accent); }
.fuente-aviso {
margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: #B45309;
}
[data-theme="dark"] .fuente-aviso { color: #FBBF24; }

.art-sent-ver.sin_verificar { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .art-sent-ver.sin_verificar { background: #78350F; color: #FDE68A; }
.art-sent-aviso {
font-size: 12px; line-height: 1.5; color: #B45309;
padding-left: 11px; border-left: 2px solid #F59E0B;
}
[data-theme="dark"] .art-sent-aviso { color: #FBBF24; }

#cod-modos {
background: transparent; border-bottom: 0;
padding: 0 16px 12px;
}
.inf-nota {
margin: -4px 16px 12px; font-size: 11.5px; color: var(--text-soft);
}
.inf-grua { flex: none; align-self: center; display: flex; }
.inf-pildora .inf-grua { color: inherit; opacity: 1; }
.inf-pildora .inf-grua-veto { stroke: currentColor; }
.inf-pildora svg { display: block; }
.inf-grua.si { color: #DC2626; }
.inf-grua.no { color: var(--text-soft); opacity: .55; }
.inf-grua.depende { color: #D97706; }
.inf-grua-veto { stroke: #DC2626; stroke-width: 2.2; }
.inf-grua-veto-fondo { stroke: var(--surface); stroke-width: 4.5; }
.inf-pildora .inf-grua-veto-fondo { stroke: var(--tag-bg); }

.inf-consec { display: flex; flex-wrap: wrap; gap: var(--e4); margin: 0 0 var(--e5); }
.inf-consec-b {
display: flex; flex-direction: column; align-items: center; gap: var(--e1);
width: 68px; padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; color: var(--text-muted);
}
.inf-consec-ico {
display: flex; align-items: center; justify-content: center;
width: var(--toque-min); height: var(--toque-min); border-radius: 999px;
background: var(--tag-bg); color: var(--text);
}
.inf-consec-b small { font-size: var(--t-micro); line-height: var(--lh-micro); text-align: center; }
.inf-consec-b:focus-visible { outline: none; }
.inf-consec-b:focus-visible .inf-consec-ico { box-shadow: 0 0 0 2px var(--accent); }
.inf-consec-ico.grua.si { background: var(--alerta-bg); color: var(--alerta); }
.inf-consec-ico.grua.depende { background: var(--aviso-bg); color: var(--aviso); }
.inf-consec-ico.licencia, .inf-consec-ico.registro { background: var(--aviso-bg); color: var(--aviso); }
.inf-consec-ico .inf-grua, .inf-consec-ico .inf-ico-consec { color: inherit; opacity: 1; display: flex; }
.inf-consec-ico .inf-grua-veto { stroke: currentColor; }
.inf-consec-ico .inf-grua-veto-fondo { stroke: var(--tag-bg); }
.inf-consec-ico.licencia .inf-grua-veto-fondo,
.inf-consec-ico.registro .inf-grua-veto-fondo { stroke: var(--aviso-bg); }
.inf-consec-ico.grua.si .inf-grua-veto-fondo { stroke: var(--alerta-bg); }
.inf-consec-ico.grua.depende .inf-grua-veto-fondo { stroke: var(--aviso-bg); }

.inf-pildora.consec { background: var(--tag-bg); color: var(--text-muted); }
.alc-grados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin: var(--e4) 0 var(--e3); }
.alc-grado {
display: flex; flex-direction: column; gap: 2px; min-height: var(--toque-min);
padding: var(--e2) var(--e3); text-align: left; cursor: pointer;
border: 1px solid var(--border); border-radius: var(--r-campo);
background: var(--surface); color: var(--text-muted); font: inherit;
}
.alc-grado b { font-size: var(--t-small); color: var(--text); }
.alc-grado small { font-size: var(--t-micro); line-height: var(--lh-micro); }
.alc-grado[aria-pressed="true"] {
background: var(--pill-active-bg); border-color: var(--pill-active-bg);
}
.alc-grado[aria-pressed="true"] b,
.alc-grado[aria-pressed="true"] small { color: var(--pill-active-text); }
.alc-grado:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.alc-rango {
margin: var(--e3) 0 var(--e2); font-size: var(--t-micro); font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft);
}
.alc-vez {
margin-top: var(--e3); padding: var(--e3) var(--e4) var(--e2);
border: 1px solid var(--border); border-radius: var(--r-tarjeta); background: var(--surface);
}
.alc-vez-tit { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.alc-vez-tit b { font-size: var(--t-base); }
.alc-baldosa { width: 34px; height: 34px; font-size: var(--t-base); }
.alc-medida { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e2) 0; }
.alc-medida + .alc-medida { border-top: 1px solid var(--border-subtle); }
.alc-medida .inf-consec-ico { width: 34px; height: 34px; flex: none; }
.alc-medida-t { font-size: var(--t-small); line-height: var(--lh-small); }
.alc-medida-t em {
display: block; margin-top: 2px; font-style: normal; font-weight: 700;
font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.alc-notas { margin-top: var(--e5); }
.alc-par { margin-bottom: var(--e3); }

.inf-aviso-f {
margin: var(--e3) var(--e4) 0; padding: var(--e3) var(--e4);
border-radius: var(--r-tarjeta); background: var(--aviso-bg);
font-size: var(--t-small); line-height: var(--lh-small);
}
.inf-aviso-f b { color: var(--aviso); }
.inf-aviso-f .inf-enlace { display: block; margin-top: var(--e2); }
.inf-row-alc .inf-baldosa { background: var(--aviso-bg); color: var(--aviso); }

.inf-cab-abre {
display: block; width: 100%; text-align: left; padding: 0;
border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.inf-cab-mas {
display: inline-flex; align-items: center; gap: var(--e1); margin-top: var(--e2);
font-size: var(--t-small); font-weight: 600; color: var(--accent);
}
.inf-cab-abre.abierto .inf-cab-mas svg { transform: rotate(180deg); }
.inf-cab-abre:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: var(--r-chip); }
.inf-conducta { margin: 0 0 var(--e4); }
.inf-valor-frase {
display: block; margin-top: var(--e1); max-width: var(--ancho-lectura);
font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 600;
}
.inf-pildora .inf-ico-consec { display: flex; color: inherit; }
.inf-pildora .inf-ico-consec .inf-grua-veto { stroke: currentColor; }
.inf-pildora .inf-ico-consec .inf-grua-veto-fondo { stroke: var(--tag-bg); }
[data-theme="dark"] .inf-grua.si { color: #F87171; }
[data-theme="dark"] .inf-grua.depende { color: #FBBF24; }
[data-theme="dark"] .inf-grua-veto { stroke: #F87171; }

.inf-ley s.sin-efecto {
text-decoration: line-through; text-decoration-color: #DC2626;
text-decoration-thickness: 2px; color: var(--text-soft);
}
.inf-ojo {
display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
background: #FEF3C7; color: #92400E; vertical-align: 1px;
}
[data-theme="dark"] .inf-ojo { background: #78350F; color: #FDE68A; }

.inf-avisos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.inf-aviso {
padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
border-left: 3px solid var(--text-soft); background: var(--surface);
font-size: 13px; line-height: 1.5;
}
.inf-aviso.ley_posterior { border-left-color: #DC2626; }
.inf-aviso.discutido { border-left-color: #D97706; }
.inf-aviso.firme { border-left-color: #7C3AED; }
.inf-aviso.subsanable { border-left-color: #16A34A; }
.inf-aviso.porte { border-left-color: #2563EB; }
.inf-aviso.licencia { border-left-color: #0F766E; }
.inf-aviso-tipo {
display: inline-block; margin-bottom: 4px; font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft);
}
.inf-cita {
margin: 8px 0 0; padding: 6px 0 6px 11px; border-left: 2px solid var(--border);
font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.55;
}
.inf-cita-pie {
display: block; margin-top: 4px; font-family: inherit; font-size: 11px;
font-style: normal; color: var(--text-soft);
}
.inf-cita-pie a { color: var(--text-muted); }
.inf-no-vinc {
padding: 1px 6px; border-radius: 999px; background: #FEF3C7; color: #92400E;
font-weight: 700; font-family: -apple-system, system-ui, sans-serif;
}
[data-theme="dark"] .inf-no-vinc { background: #78350F; color: #FDE68A; }
.inf-ver-guia, .inf-cod-btn {
margin-top: 8px; padding: 4px 10px; border-radius: 999px; border: 0; cursor: pointer;
background: var(--tag-bg); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600;
}
.inf-cod-btn { margin: 4px 4px 0 0; }

.inf-manual {
margin-top: 12px; border: 1px dashed var(--border); border-radius: 10px;
padding: 8px 12px; font-size: 13px; line-height: 1.55;
}
.inf-manual summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--text-muted); }
.inf-manual-tex { margin-top: 8px; font-family: Georgia, "Times New Roman", serif; }
.inf-manual-pie { margin-top: 6px; font-size: 11px; color: var(--text-soft); }

.inf-guia {
margin-top: 10px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 1.55;
}    .inf-guia-exp { margin-bottom: 8px; }
.inf-guia-rot {
display: block; margin-top: 6px; font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft);
}  /* Dentro del índice el bloque legal no lleva el margen lateral de la ficha. */
.inf-ley { margin: 8px 0 0; font-size: 14px; }

.inf-lineas { display: block; }
.inf-lin { display: block; white-space: normal; }
.inf-lin.lit { margin-top: 10px; padding-left: 1.5em; text-indent: -1.5em; }
.inf-lin.num { margin-top: 5px; padding-left: 3em; text-indent: -1.5em; }inf-fund a { color: var(--text-muted); }

.inf-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inf-acciones .visor-btn.principal { color: var(--accent); }
.inf-fund { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--text-soft); }

.inf-origen { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.inf-origen-rot { font-weight: 600; margin-right: 4px; }
.inf-sincod {
margin: 0 16px 14px; padding: 10px 12px; border-radius: 12px;
border: 1px dashed var(--border); background: var(--surface); font-size: 12.5px;
}
.inf-sincod-f { padding: 5px 0; line-height: 1.5; }
.inf-sincod-f span { display: block; color: var(--text-muted); font-size: 12px; }
.inf-manual { border-style: solid; border-left: 3px solid #0F766E; background: var(--surface); }
.inf-manual-tit {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #0F766E; margin-bottom: 4px;
}
[data-theme="dark"] .inf-manual { border-left-color: #2DD4BF; }
[data-theme="dark"] .inf-manual-tit { color: #5EEAD4; }
.inf-rel {
margin-top: 12px; padding: 8px 12px; border: 1px solid var(--border);
border-left: 3px solid #4F46E5; border-radius: 10px; background: var(--surface);
font-size: 13px; line-height: 1.55;
}
.inf-rel-tit {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #4F46E5; margin-bottom: 2px;
}
.inf-rel-item + .inf-rel-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.inf-rel-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inf-rel-art {
font: inherit; font-weight: 700; font-size: 13px; color: var(--accent);
background: none; border: 0; padding: 0; cursor: pointer;
}
span.inf-rel-art { color: var(--text); cursor: default; }
.inf-rel-tipo {
padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
background: var(--tag-bg); color: var(--text-muted);
}
.inf-rel-exp { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.inf-rel-exp .inf-guia-rot { margin-top: 0; }
[data-theme="dark"] .inf-rel { border-left-color: #818CF8; }
[data-theme="dark"] .inf-rel-tit { color: #A5B4FC; }

.art-sent { padding: 0; overflow: hidden; }
button.art-sent-cab {
width: 100%; margin: 0; padding: 12px 14px;
display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
background: none; border: 0; font: inherit; color: inherit;
text-align: left; cursor: pointer;
}
button.art-sent-cab:hover { background: var(--tag-bg); }
.art-sent-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.art-sent-fecha { font-size: 11.5px; color: var(--text-soft); }
.art-sent-marcas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.art-sent-chev { flex: none; color: var(--text-soft); transition: transform .2s ease; }
.art-sent-num, .art-sent-fecha { white-space: nowrap; }
@media (max-width: 520px) {
button.art-sent-cab {
display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 7px;
}
.art-sent-id { grid-column: 1; grid-row: 1; }
.art-sent-chev { grid-column: 2; grid-row: 1; }
.art-sent-marcas { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
.art-sent.abierta .art-sent-chev { transform: rotate(180deg); }

.art-sent-remite {
margin: -4px 14px 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-soft);
}
.art-sent-cuerpo { display: none; padding: 0 15px 13px; }
.art-sent.abierta .art-sent-cuerpo { display: block; }
.art-sent-parte { padding-top: 10px; }
.art-sent-parte + .art-sent-parte { border-top: 1px dashed var(--border); margin-top: 10px; }
.art-sent-parte > .art-sent-ver { display: inline-block; margin-bottom: 7px; }

.art-ley s.ap-tachado, .ap-cita.tachado {
text-decoration: line-through; text-decoration-color: #DC2626;
text-decoration-thickness: 2px; color: var(--text-soft);
}
.art-ley u.ap-subrayado, .ap-cita.subrayado {
text-decoration: underline; text-decoration-color: #7C3AED;
text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.art-titulo s.ap-tachado { text-decoration-thickness: 3px; }
.ap-aviso {
margin: 10px 16px 0; padding: 10px 14px; border-radius: 10px;
border: 1px solid var(--border); background: var(--surface);
font-size: 12.5px; line-height: 1.5;
}
.ap-bloque + .ap-bloque { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.ap-aviso ul { margin: 5px 0 0; padding-left: 0; list-style: none; }
.ap-aviso li { padding: 3px 0; }
.ap-cita { font-family: Georgia, "Times New Roman", serif; }
.ap-donde { color: var(--text-soft); font-size: 11.5px; }
.ap-quien { display: block; color: var(--text-muted); font-size: 11.5px; }

.art-mod-punto { background: var(--text-soft); }
.art-mod.ultima .art-mod-punto { background: var(--accent); }

.ef-hoy {
margin: 14px 16px 0; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--border); border-left: 3px solid var(--accent-green);
background: var(--surface); font-size: 13.5px; line-height: 1.55;
}
.ef-hoy-tit {
font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px;
}
.ef-hoy-tex { font-weight: 500; }
.ef-hoy-pie { margin-top: 6px; font-size: 11px; color: var(--text-soft); }

.ef-puntos { padding-top: 10px; }
.ef-puntos-tit {
font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--text-soft); margin: 4px 0 6px;
}
.ef-puntos + .ef-puntos-tit { margin-top: 14px; }
.ef-punto {
padding: 9px 11px; margin-bottom: 8px; border-radius: 10px;
background: var(--tag-bg); border-left: 3px solid var(--text-soft);
}
.ef-punto.anula { border-left-color: #DC2626; }
.ef-punto.condiciona { border-left-color: #7C3AED; }
.ef-punto.mantiene, .ef-punto.anula_derogatoria { border-left-color: #16A34A; }
.ef-punto.redaccion_anterior, .ef-punto.proyecto { border-left-color: #D97706; }
.ef-etq {
display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-muted);
}
.ef-cita {
margin-top: 4px; font-family: Georgia, "Times New Roman", serif;
font-size: 13px; line-height: 1.55; font-style: italic;
}
.ef-exp { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.ef-exp span { font-weight: 700; color: var(--text-soft); }

.ap-hueco {
display: inline-block; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
font-family: -apple-system, system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
background: #FEE2E2; color: #991B1B; white-space: nowrap;
}
[data-theme="dark"] .ap-hueco { background: #7F1D1D; color: #FECACA; }
.art-mod-nota { font-size: 12px; color: #166534; font-style: normal; font-weight: 600; }
[data-theme="dark"] .art-mod-nota { color: #86EFAC; }
.art-sent-dec.proyecto { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .art-sent-dec.proyecto { background: #78350F; color: #FDE68A; }
.art-sent-ver.proyecto, .art-sent-ver.derogatoria { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .art-sent-ver.proyecto,
[data-theme="dark"] .art-sent-ver.derogatoria { background: #78350F; color: #FDE68A; }

.art-sent a.art-copia { margin-left: 10px; }
.art-copia-f { display: block; font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.art-mod-link {
font-size: 11.5px; font-weight: 600; color: var(--accent); text-decoration: none;
padding: 0 6px; border-radius: 999px; background: var(--tag-bg);
}

.or-chip {
display: inline-block; margin: 0 2px 2px 0; padding: 1px 8px; border-radius: 999px;
font-family: -apple-system, system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
line-height: 1.6; vertical-align: 1px; white-space: normal; text-decoration: none;
border: 0; cursor: pointer; background: #FEF3C7; color: #92400E;
}
.or-chip.adicionado { background: #DCFCE7; color: #166534; }
.or-chip.eliminado, .or-chip.derogado { background: #FEE2E2; color: #991B1B; }
.or-chip.corte { background: #EDE9FE; color: #5B21B6; }
[data-theme="dark"] .or-chip { background: #78350F; color: #FDE68A; }
[data-theme="dark"] .or-chip.adicionado { background: #14532D; color: #BBF7D0; }
[data-theme="dark"] .or-chip.eliminado, [data-theme="dark"] .or-chip.derogado { background: #7F1D1D; color: #FECACA; }
[data-theme="dark"] .or-chip.corte { background: #4C1D95; color: #DDD6FE; }
.or-chip.cabecera { font-size: 11px; padding: 3px 10px; vertical-align: 0; }
.or-chip.destello { animation: or-destello 1.4s ease-out; }
@keyframes or-destello {
0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 35%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .or-chip.destello { animation: none; outline: 2px solid currentColor; } }
button.art-mod-link { border: 0; cursor: pointer; font-family: inherit; }
.or-linea { display: block; line-height: 1; margin-bottom: 4px; }

.vt-fila {
display: flex; align-items: flex-start; gap: var(--e3);
width: 100%; box-sizing: border-box; text-align: left;
min-height: var(--toque-min); padding: var(--e3) var(--e4);
background: none; border: 0; border-bottom: 1px solid var(--border-subtle);
font: inherit; color: var(--text); cursor: pointer;
}
.vt-fila:hover { background: var(--bg); }
.vt-fila:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.vt-fila-num {
flex: none; width: 34px; font-family: var(--letra-codigo);
font-size: var(--t-small); font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums;
}
.vt-fila-cuerpo { flex: 1; min-width: 0; }
.vt-fila-tit { font-size: var(--t-base); line-height: var(--lh-base); }
.vt-fila-sub {
display: block; margin-top: 2px;
font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted);
}
.vt-fila.leida .vt-fila-tit { color: var(--text-muted); }

.vt-punto {
flex: none; width: 10px; height: 10px; margin-top: 6px;
border-radius: 50%; background: var(--estado-vigente);
}
.vt-punto[data-estado="modificado"] { background: var(--estado-modificado); }
.vt-punto[data-estado="condicionado"] { background: var(--estado-condicionado); }
.vt-punto[data-estado="inexequible"] { background: var(--estado-inexequible); }
.vt-punto[data-estado="inexequible_parcial"] {
background: transparent; border: 2px solid var(--estado-parcial);
}
.vt-punto[data-estado="derogado"] { background: var(--estado-derogado); }
.vt-fila[data-estado="derogado"] .vt-fila-tit { text-decoration: line-through; color: var(--text-soft); }

.vt-sello {
display: inline-flex; align-items: center; gap: var(--e1);
padding: 4px var(--e2); border-radius: var(--r-chip);
font-size: var(--t-micro); line-height: 1.3; font-weight: 700;
background: var(--tag-bg); color: var(--tag-text);
}
.vt-sello.alerta { background: var(--alerta-bg); color: var(--alerta); }
.vt-sello.aviso { background: var(--aviso-bg); color: var(--aviso); }
.vt-sello.ok { background: var(--ok-bg); color: var(--ok); }
.vt-sello.codigo { font-family: var(--letra-codigo); letter-spacing: .02em; }

.vt-tarjeta {
display: block; width: 100%; box-sizing: border-box; text-align: left;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-tarjeta);
overflow: hidden; font: inherit; cursor: pointer;
transition: border-color var(--mov-micro) var(--curva);
}
.vt-tarjeta:hover { border-color: var(--text-soft); }
.vt-tarjeta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.vt-tarjeta-foto { display: block; width: 100%; height: 148px; object-fit: cover; background: var(--border-subtle); }
.vt-tarjeta-cuerpo { padding: var(--e4); }
.vt-tarjeta-quien {
display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted);
margin-bottom: var(--e2);
}
.vt-tarjeta-quien b { color: var(--text); font-weight: 600; }
.vt-tarjeta-tit {
margin: 0 0 var(--e2); font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 700;
}
.vt-tarjeta-lead {
margin: 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--text-muted);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vt-tarjeta-pie { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.vt-tarjeta.leida { opacity: .72; }

.vt-icono {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: var(--toque-min); height: var(--toque-min);
border: 0; border-radius: var(--r-campo); background: none;
color: var(--text); cursor: pointer;
}
.vt-icono:hover { background: var(--bg); }
.vt-icono:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.vt-icono svg { width: 20px; height: 20px; }

.vt-cita {
font-family: var(--letra-cita); font-size: var(--t-cita); line-height: var(--lh-cita);
background: var(--cita-bg); color: var(--text);
border-left: 3px solid var(--cita-borde);
padding: var(--e4); border-radius: 0 var(--r-campo) var(--r-campo) 0;
max-width: var(--ancho-lectura);
}
.vt-cita s { text-decoration-thickness: 2px; color: var(--text-soft); }
.vt-cita u { text-decoration-color: var(--estado-condicionado); text-underline-offset: 3px; }
.vt-cita-pie {
display: block; margin-top: var(--e3); font-family: var(--letra);
font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted);
}
.vt-explica {
background: var(--surface); border-left: 3px dashed var(--explica-borde);
padding: var(--e4); border-radius: 0 var(--r-campo) var(--r-campo) 0;
font-size: var(--t-base); line-height: var(--lh-base); max-width: var(--ancho-lectura);
}
.vt-explica-rot {
display: block; margin-bottom: var(--e2);
font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase;
font-weight: 700; color: var(--accent);
}
.vt-aviso {
border-left: 3px solid var(--aviso); background: var(--aviso-bg); color: var(--text);
padding: var(--e3) var(--e4); border-radius: 0 var(--r-campo) var(--r-campo) 0;
font-size: var(--t-small); line-height: var(--lh-small); max-width: var(--ancho-lectura);
}
.vt-aviso-rot {
display: block; margin-bottom: var(--e1); font-weight: 700; color: var(--aviso);
font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
}

.vt-bloque { border-top: 1px solid var(--border-subtle); }
.vt-bloque > summary {
display: flex; align-items: center; gap: var(--e2); cursor: pointer;
min-height: var(--toque-min); padding: var(--e2) 0;
font-size: var(--t-small); font-weight: 600; color: var(--text-muted);
list-style: none;
}
.vt-bloque > summary::-webkit-details-marker { display: none; }
.vt-bloque > summary::after {
content: ''; width: 7px; height: 7px; margin-left: auto;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform var(--mov-micro) var(--curva);
}
.vt-bloque[open] > summary::after { transform: rotate(-135deg); }
.vt-bloque > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.vt-cuenta {
font-family: var(--letra-codigo); font-size: var(--t-micro);
padding: 2px 6px; border-radius: var(--r-chip); background: var(--tag-bg); color: var(--tag-text);
}

.vt-nav {
display: flex; background: var(--surface); border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom);
}
.vt-nav button {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
min-height: 56px; padding: var(--e2) 0; border: 0; background: none;
font: inherit; font-size: var(--t-micro); color: var(--text-soft); cursor: pointer;
}
.vt-nav button[aria-current="page"] { color: var(--accent); font-weight: 700; }
.vt-nav button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.vt-nav svg { width: 22px; height: 22px; }

.vt-vacio { padding: var(--e7) var(--e4); text-align: center; color: var(--text-muted); }
.vt-vacio b { display: block; margin-bottom: var(--e1); color: var(--text); font-size: var(--t-base); }

.vt-tarjeta-banda {
display: flex; align-items: center; gap: var(--e2);
padding: var(--e2) var(--e4);
border-top: 3px solid var(--tema, var(--border));
background: var(--bg);
font-size: var(--t-micro); line-height: var(--lh-micro);
color: var(--text-muted);
}
.vt-tarjeta-banda svg { width: 16px; height: 16px; flex: none; color: var(--tema, var(--text-muted)); }
.vt-tarjeta-banda b { color: var(--text); font-weight: 600; }
.vt-tarjeta-banda .sello-estado {
margin-left: auto; font-weight: 700; letter-spacing: .04em;
color: var(--alerta); text-transform: uppercase;
}

.vt-tarjeta-acciones {
display: flex; gap: var(--e1); padding: 0 var(--e2) var(--e2);
border-top: 1px solid var(--border-subtle); margin-top: var(--e3);
}
.vt-tarjeta-acciones button {
display: inline-flex; align-items: center; gap: var(--e1);
min-height: var(--toque-min); padding: 0 var(--e3);
border: 0; border-radius: var(--r-campo); background: none;
font: inherit; font-size: var(--t-micro); color: var(--text-muted); cursor: pointer;
}
.vt-tarjeta-acciones button:hover { background: var(--bg); color: var(--text); }
.vt-tarjeta-acciones button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.vt-tarjeta-acciones svg { width: 18px; height: 18px; }
.vt-tarjeta-acciones button.guardado { color: var(--aviso); }
.vt-tarjeta-acciones button.guardado svg { fill: currentColor; }


.app-nav {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100%; max-width: 580px; z-index: 40;
box-shadow: var(--sombra-arriba);
}

.hub { padding: var(--e4) var(--e4) 0; }
.hub-titulo {
margin: 0 0 var(--e3); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 700;
}
.hub-buscar {
display: flex; align-items: center; gap: var(--e2); width: 100%;
min-height: var(--toque-min); padding: 0 var(--e3); margin-bottom: var(--e4);
background: var(--surface); color: var(--text-muted);
border: 1px solid var(--border); border-radius: var(--r-campo);
font: inherit; font-size: var(--t-base); text-align: left; cursor: pointer;
}
.hub-buscar svg { width: 18px; height: 18px; flex: none; }
.hub-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.hub-tarjeta {
display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start;
padding: var(--e4); min-height: 92px;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-tarjeta);
font: inherit; text-align: left; cursor: pointer;
transition: border-color var(--mov-micro) var(--curva);
}
.hub-tarjeta:hover { border-color: var(--text-soft); }
.hub-tarjeta:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hub-tarjeta svg { width: 22px; height: 22px; color: var(--text-muted); }
.hub-tarjeta b { font-size: var(--t-base); }
.hub-tarjeta small { color: var(--text-muted); font-size: var(--t-micro); line-height: var(--lh-micro); }
.bus-caja { padding: var(--e4) var(--e4) var(--e2); }
.bus-campo {
width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-base);
color: var(--text); min-height: var(--toque-min); padding: 0 var(--e3);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-campo);
}
.bus-campo:focus-visible {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.bus-rot {
padding: var(--e4) var(--e4) var(--e2);
font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
color: var(--text-soft); font-weight: 700;
}
.bus-nota { padding: 0 var(--e4) var(--e2); }

.mas-fila {
display: flex; align-items: center; gap: var(--e3); width: 100%;
min-height: var(--toque-min); padding: var(--e3) var(--e4);
background: none; border: 0; border-bottom: 1px solid var(--border-subtle);
font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.mas-fila:hover { background: var(--bg); }
.mas-fila:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.mas-fila > svg { width: 20px; height: 20px; flex: none; color: var(--text-muted); }
.mas-fila b { display: block; font-size: var(--t-base); font-weight: 600; }
.mas-fila small { display: block; color: var(--text-muted); font-size: var(--t-micro); }
.mas-fila .flecha { margin-left: auto; color: var(--text-soft); }

.sub-cab {
display: flex; align-items: center; gap: var(--e2);
padding: var(--e2) var(--e4); border-bottom: 1px solid var(--border);
background: var(--surface);
}
.sub-cab b { font-size: var(--t-base); }

#carrusel-inicio { padding: var(--e6) 0 var(--e7); }
.car-cab {
display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
padding: 0 var(--e4) var(--e2);
}
.car-tit {
font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
color: var(--text-soft); font-weight: 700;
}
.car-tit small {
margin-left: var(--e2); padding: 2px 6px; border-radius: var(--r-chip);
background: var(--tag-bg); color: var(--tag-text);
text-transform: none; letter-spacing: 0; font-weight: 600;
}
.car-todas {
display: inline-flex; align-items: center; gap: 2px;
min-height: var(--toque-min); padding: 0 var(--e2); margin-right: calc(-1 * var(--e2));
border: 0; background: none; font: inherit; font-size: var(--t-small);
color: var(--accent); font-weight: 600; cursor: pointer;
}
.car-pista {
display: flex; gap: var(--e3); overflow-x: auto;
padding: var(--e1) var(--e4) var(--e3);
scroll-snap-type: x mandatory; scroll-padding: 0 var(--e4);
overscroll-behavior-x: contain; scrollbar-width: none;
}
.car-pista::-webkit-scrollbar { display: none; }
.car-tarjeta {
flex: 0 0 78%; max-width: 260px; min-height: 148px; scroll-snap-align: start;
display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start;
padding: var(--e3) var(--e4) var(--e4); box-sizing: border-box;
background: var(--surface); color: var(--text); text-align: left;
border: 1px solid var(--border); border-top: 3px solid var(--tema, var(--border));
border-radius: var(--r-tarjeta); font: inherit; cursor: pointer;
transition: border-color var(--mov-micro) var(--curva);
}
.car-tarjeta:hover { border-color: var(--text-soft); border-top-color: var(--tema, var(--text-soft)); }
.car-tarjeta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.car-tarjeta.leida { opacity: .72; }
.car-tema {
display: inline-flex; align-items: center; gap: var(--e1);
font-size: var(--t-micro); color: var(--text-muted); font-weight: 600;
}
.car-tema svg { color: var(--tema, var(--text-muted)); }
.car-quien { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted); }
.car-quien b { color: var(--text); font-weight: 600; }
.car-titular {
font-size: var(--t-base); line-height: var(--lh-base); font-weight: 700;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.car-estado-norma {
margin-top: auto; font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--alerta);
}
.car-mas {
flex-basis: 46%; justify-content: center; background: var(--bg);
border-style: dashed; border-top-width: 1px; color: var(--accent);
}
.car-mas .car-titular { color: var(--accent); }
.car-estado { padding: 0 var(--e4); }
.car-estado .cargando, .car-estado .vt-vacio { padding: var(--e4) 0; text-align: left; }


.vt-hoja-fondo {
position: fixed; inset: 0; z-index: 200;   /* encima de la cabecera (100); el aviso (9999) sigue arriba */
display: flex; align-items: flex-end; justify-content: center;
background: var(--velo);
}
.vt-hoja {
width: 100%; max-width: 580px; max-height: 86vh; overflow-y: auto;
overscroll-behavior: contain;
background: var(--surface); color: var(--text);
border-radius: var(--r-hoja) var(--r-hoja) 0 0;
box-shadow: var(--shadow-lg);
padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: no-preference) {
.vt-hoja-fondo { animation: vt-velo var(--mov-hoja) var(--curva); }
.vt-hoja { animation: vt-subir var(--mov-hoja) var(--curva); }
@keyframes vt-velo { from { opacity: 0 } to { opacity: 1 } }
@keyframes vt-subir { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
}
.vt-hoja-cab {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: var(--e2);
padding: var(--e2) var(--e2) var(--e2) var(--e4);
background: var(--surface); border-bottom: 1px solid var(--border-subtle);
}
.vt-hoja-cab h2 { flex: 1; margin: 0; font-size: var(--t-h3); line-height: var(--lh-h3); }
.vt-hoja-tirador {
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
width: 38px; height: 4px; border-radius: 999px; background: var(--border);
}
.vt-hoja-sec { padding: var(--e2) 0 var(--e4); }
.vt-hoja-sec + .vt-hoja-sec { border-top: 1px solid var(--border-subtle); }
.vt-hoja-p {
margin: 0 var(--e4) var(--e3); max-width: var(--ancho-lectura);
font-size: var(--t-small); line-height: var(--lh-small); color: var(--text-muted);
}
.vt-hoja-bloque { padding: 0 var(--e4) var(--e3); }
.vt-hoja-bloque .vt-cita { white-space: pre-line; }

.copia-ta {
width: 100%; box-sizing: border-box; height: 40vh; resize: none;
padding: var(--e3); border: 1px solid var(--border); border-radius: var(--r-campo);
background: var(--cita-bg); color: var(--text);
font: inherit; font-size: var(--t-small); line-height: var(--lh-small);
white-space: pre-wrap;
}
.copia-ta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }

.ley-estado { cursor: default; }
.ley-estado:hover { background: none; }
.ley-estado.elegido { background: var(--accent-soft); }
.ley-cuenta {
flex: none; font-family: var(--letra-codigo); font-size: var(--t-micro);
color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.ley-ejemplo {
display: inline-flex; align-items: center; min-height: 32px; margin-top: var(--e1);
padding: var(--e1) var(--e2); text-align: left; border: 1px solid var(--border); border-radius: var(--r-chip);
background: var(--surface); color: var(--accent);
font: inherit; font-size: var(--t-micro); cursor: pointer;
}
.ley-ejemplo:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.ley-ejemplo-no { display: block; margin-top: var(--e1); font-size: var(--t-micro); color: var(--text-soft); }

.ley-consec { padding: var(--e3) 0 var(--e2); }
.ley-consec + .ley-consec { border-top: 1px solid var(--border-subtle); }
.ley-consec.elegido { background: var(--accent-soft); }
.ley-consec-cab { display: flex; align-items: center; gap: var(--e3); padding: 0 var(--e4) var(--e2); }
.ley-consec-tit b { display: block; font-size: var(--t-base); }
.ley-consec-tit small { display: block; font-size: var(--t-micro); color: var(--text-soft); }
.ley-consec-pie { display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0 var(--e4); }
.ley-consec-pie:empty { display: none; }
.ley-grua { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4); }
.ley-grua .inf-grua { flex: none; }
.ley-grua span:last-child { font-size: var(--t-small); line-height: var(--lh-small); }

.ley-tabla-caja { overflow-x: auto; padding: 0 var(--e4); }
.ley-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: var(--lh-small); }
.ley-tabla th {
text-align: left; font-weight: 700; font-size: var(--t-micro); color: var(--text-soft);
text-transform: uppercase; letter-spacing: .04em; padding: var(--e1) var(--e2) var(--e1) 0;
border-bottom: 1px solid var(--border);
}
.ley-tabla td { padding: var(--e2) var(--e2) var(--e2) 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ley-tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ley-tabla .ley-dep { display: block; white-space: normal; color: var(--text-muted); }
.ley-tabla td.letra { font-family: var(--letra-codigo); font-weight: 700; }

.cod-estado { position: relative; cursor: pointer; }
.cod-estado::after { content: ''; position: absolute; inset: -14px; }
[data-leyenda] { cursor: pointer; }
.ley-enlace {
display: block; margin: var(--e4) auto var(--e6); min-height: var(--toque-min);
padding: 0 var(--e4); border: 0; background: none;
font: inherit; font-size: var(--t-small); color: var(--accent);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.aj-grupo { padding: var(--e4) var(--e4) var(--e2); border-bottom: 1px solid var(--border-subtle); }
.aj-tit { display: block; font-size: var(--t-base); font-weight: 600; }
.aj-sub { display: block; margin: 2px 0 var(--e3); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted); }
.aj-seg {
display: flex; gap: 2px; padding: 2px;
background: var(--tag-bg); border-radius: var(--r-campo);
}
.aj-seg button {
flex: 1; min-height: 40px; padding: 0 var(--e2);
border: 0; border-radius: 10px; background: none;
font: inherit; font-size: var(--t-small); color: var(--text-muted); cursor: pointer;
}
.aj-seg button[aria-pressed="true"] {
background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm);
}
.aj-seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.aj-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.aj-acerca { padding: var(--e4); font-size: var(--t-small); line-height: var(--lh-small); color: var(--text-muted); }
.aj-acerca b { color: var(--text); }
.aj-acerca dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e1) var(--e3); margin: var(--e3) 0 0; }
.aj-acerca dt { color: var(--text-soft); }
.aj-acerca dd { margin: 0; font-family: var(--letra-codigo); font-size: var(--t-micro); }

html[data-letra="grande"] body { zoom: 1.12; }
html[data-letra="enorme"] body { zoom: 1.25; }
.vt-hoja-p.ley-mas-aire { margin-top: var(--e3); }

.ficha-barra { gap: var(--e2); padding: var(--e1) var(--e2); }
.ficha-barra .top-actions { gap: var(--e1); margin-left: auto; }
.ficha-barra .icon-btn { width: var(--toque-min); height: var(--toque-min); }
.ficha-barra .icon-btn.guardado { color: var(--aviso); }
.ficha-barra .icon-btn.guardado svg { fill: currentColor; }
.ficha-barra-tit { font-weight: 700; font-size: var(--t-base); font-family: var(--letra-codigo); }
.ficha-indice {
display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none;
padding: var(--e3) var(--e4) 0;
}
.ficha-indice::-webkit-scrollbar { display: none; }
.ficha-indice button {
flex: none; display: inline-flex; align-items: center; gap: var(--e1);
min-height: 36px; padding: 0 var(--e3); border-radius: 999px;
border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
font: inherit; font-size: var(--t-small); cursor: pointer;
}
.ficha-indice button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.ficha-ancla { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: no-preference) {
.pasa-izq { animation: vt-pasa-izq 140ms var(--curva); }
.pasa-der { animation: vt-pasa-der 140ms var(--curva); }
@keyframes vt-pasa-izq { from { transform: translateX(22px); opacity: .4 } to { transform: none; opacity: 1 } }
@keyframes vt-pasa-der { from { transform: translateX(-22px); opacity: .4 } to { transform: none; opacity: 1 } }
}
.ef-hoy {
border: 0; border-left: 3px dashed var(--explica-borde);
border-radius: 0 var(--r-campo) var(--r-campo) 0; background: var(--surface);
}
.ef-hoy-tit { color: var(--accent); }

.arch-fila { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--e2); }
.arch-fila-prin {
display: flex; align-items: flex-start; gap: var(--e3);
padding: var(--e3) 0 var(--e1); color: var(--text); text-decoration: none;
}
.arch-fila-prin:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.arch-fila-prin .vt-fila-tit { font-weight: 600; overflow-wrap: anywhere; }
.arch-fmt {
flex: none; width: 40px; padding: 3px 0; margin-top: 2px; text-align: center;
border-radius: var(--r-chip); background: var(--tag-bg); color: var(--tag-text);
font-family: var(--letra-codigo); font-size: var(--t-micro); font-weight: 700;
}
.arch-estado { display: block; margin-top: var(--e1); }
.arch-enlaces { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); padding-left: 52px; }
.arch-enlaces a {
display: inline-flex; align-items: center; min-height: 32px;
font-size: var(--t-micro); color: var(--accent); text-decoration: none;
}
.arch-enlaces a:hover { text-decoration: underline; }

.ctrl-nota {
margin: var(--e3) var(--e4) 0; font-family: var(--letra-codigo);
font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted);
}

.cat-chip.active,
[data-theme="dark"] .cat-chip.active {
background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg);
}
.vt-seg { display: flex; gap: var(--e2); padding: 0 var(--e4) var(--e3); }
.vt-seg .cat-chip {
min-height: 36px; padding: 0 var(--e4); font-size: var(--t-small);
background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
}
.vt-seg .cat-chip.active { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }
#view-codigo .cod-buscador { margin-top: var(--e3); margin-bottom: var(--e3); }


.inf-letras {
display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: none;
padding: var(--e1) var(--e4) var(--e3);
}
.inf-letras::-webkit-scrollbar { display: none; }
.inf-extras { margin-top: var(--e6); border-top: 1px solid var(--border); background: var(--surface); }
.inf-extra .vt-cuenta { margin-left: auto; }
.inf-extra .flecha { margin-left: var(--e2); }

#view-inf .ficha-barra .vt-sello { margin-left: var(--e1); }
.inf-ficha { padding: var(--e3) var(--e4) var(--e8); }    .inf-ficha .art-ley { margin: 0; }
.inf-ficha-tit { margin: var(--e2) 0 var(--e3); font-size: var(--t-h3); line-height: var(--lh-h3); }
.inf-ficha-intro { margin: 0 0 var(--e4); font-size: var(--t-small); line-height: var(--lh-small); color: var(--text-muted); }    .inf-guia > summary { color: var(--text); font-size: var(--t-base); }
.inf-guia[open] { padding-bottom: var(--e4); }

.inf-letra {
flex: none; width: 48px; height: 44px; border-radius: var(--r-campo);
border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
font-family: var(--letra-codigo); font-size: var(--t-base); font-weight: 700; cursor: pointer;
}
.inf-letra[aria-pressed="true"] { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }
.inf-letra:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.inf-resumen {
padding: var(--e1) var(--e4) 0;
font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-soft);
}

.inf-row {
display: flex; align-items: center; gap: var(--e3);
width: calc(100% - 2 * var(--e4)); box-sizing: border-box; margin: var(--e2) var(--e4) 0;
padding: var(--e3); text-align: left; font: inherit; color: var(--text); cursor: pointer;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-tarjeta);
transition: border-color var(--mov-micro) var(--curva);
}
.inf-row:hover { border-color: var(--text-soft); }
.inf-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.inf-baldosa {
flex: none; width: 60px; height: 60px; border-radius: var(--r-campo);
display: flex; align-items: center; justify-content: center;
background: var(--tag-bg); color: var(--text);
font-size: var(--t-lead); font-weight: 800; letter-spacing: -.01em;
}
.inf-row-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e2); }
.inf-row-tit {
font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inf-row-pie { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.inf-row-valor { font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.inf-pildora {
display: inline-flex; align-items: center; gap: var(--e1);
padding: 3px var(--e2); border-radius: var(--r-chip);
font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600;
background: var(--tag-bg); color: var(--text-muted);
}
.inf-pildora.si { background: var(--alerta-bg); color: var(--alerta); }
.inf-pildora.depende { background: var(--aviso-bg); color: var(--aviso); }
.inf-extras { margin-top: var(--e5); }

.inf-cab-pildoras { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.inf-cab-pildoras .inf-pildora { font-size: var(--t-small); padding: var(--e1) var(--e3); }
.inf-cab-cod {
margin-top: var(--e4); font-weight: 800; letter-spacing: -.02em;
font-size: var(--t-h1); line-height: var(--lh-h1);
}
.inf-cab-tit { margin: var(--e1) 0 var(--e4); font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 500; }
.inf-valor {
display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e3);
padding: var(--e4); border: 1px solid var(--border); border-radius: var(--r-tarjeta); background: var(--surface);
}
.inf-valor-et { display: block; font-size: var(--t-small); color: var(--text-muted); }
.inf-valor-pesos { display: block; margin-top: var(--e1); font-size: var(--t-cifra); line-height: var(--lh-cifra); font-weight: 700; font-variant-numeric: tabular-nums; }
.inf-valor-pesos small { font-size: var(--t-small); font-weight: 600; color: var(--text-muted); }
.inf-valor-unid { display: flex; gap: var(--e4); text-align: right; }
.inf-valor-unid small { display: block; font-size: var(--t-micro); color: var(--text-soft); }
.inf-valor-unid b { font-size: var(--t-base); font-variant-numeric: tabular-nums; }

.inf-desc { margin-top: var(--e5); }
.inf-desc-tit { font-size: var(--t-base); font-weight: 700; margin-bottom: var(--e2); }
.inf-desc-tit span { margin-left: var(--e2); font-size: var(--t-micro); font-weight: 500; color: var(--text-soft); }
.inf-desc-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.inf-desc-caja {
display: flex; flex-direction: column; gap: 2px; padding: var(--e3) var(--e4);
border: 1px solid var(--border); border-radius: var(--r-tarjeta); background: var(--surface);
}
.inf-desc-caja b { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--ok); }
.inf-desc-caja span { font-size: var(--t-small); line-height: var(--lh-small); color: var(--text-muted); }
.inf-desc-caja em { margin-top: var(--e1); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.inf-desc-nota { margin: var(--e2) 0 0; font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--text-muted); }
.inf-cita-136 { white-space: pre-line; margin-bottom: var(--e3); }

.inf-inmov {
margin-top: var(--e4); padding: var(--e3) var(--e4); border-radius: var(--r-tarjeta);
background: var(--alerta-bg); font-size: var(--t-small); line-height: var(--lh-small);
}
.inf-inmov b { display: block; color: var(--alerta); font-size: var(--t-base); }
.inf-inmov.depende { background: var(--aviso-bg); }
.inf-inmov.depende b { color: var(--aviso); }
.inf-enlace {
display: inline; padding: 0; border: 0; background: none; font: inherit;
color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.inf-otras-medidas { margin-top: var(--e2); font-size: var(--t-small); }
.inf-bloques { margin-top: var(--e4); }
.inf-bloque > summary { color: var(--text); font-size: var(--t-base); }
.inf-bloque-cuerpo { padding-bottom: var(--e4); }
.inf-num-res { color: var(--text-soft); }
.inf-copiar { margin-top: var(--e4); }

.cod-tit-btn { width: 56px; }
.cod-tit-cab { padding: var(--e1) var(--e4) 0; }
.cod-tit-cab span {
display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--text-soft);
}
.cod-tit-cab b { display: block; margin-top: 2px; font-size: var(--t-lead); line-height: var(--lh-lead); }
.cod-cap-sep {
margin: var(--e5) var(--e4) 0; font-size: var(--t-micro); font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.cod-art.inf-row { margin: var(--e2) var(--e4) 0; width: calc(100% - 2 * var(--e4)); border-radius: var(--r-tarjeta); align-items: center; }
.cod-art.inf-row .inf-baldosa { font-size: var(--t-base); }
.cod-estado.cod-pildora {
width: auto; height: auto; margin: 0; flex: none;
display: inline-flex; align-items: center; gap: var(--e1);
padding: 3px var(--e2); border: 0; border-radius: var(--r-chip);
font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600;
background: var(--tag-bg); color: var(--text-muted);
}
.cod-estado.cod-pildora::after { content: none; }
.cod-pildora.modificado { background: var(--estado-modificado-bg); color: var(--estado-modificado); }
.cod-pildora.condicionado { background: var(--estado-condicionado-bg); color: var(--estado-condicionado); }
.cod-pildora.inexequible,
.cod-pildora.inexequible_parcial { background: var(--estado-parcial-bg); color: var(--estado-parcial); }
.cod-pildora.derogado { text-decoration: line-through; }
.cod-art[data-estado="derogado"] .inf-row-tit { color: var(--text-soft); }

.pega {
position: sticky; top: var(--pega-top, 56px); z-index: 20;
background: var(--bg); padding: var(--e2) 0 var(--e3);
border-bottom: 1px solid var(--border-subtle);
}
.pega .inf-letras { padding-top: 0; }
.cod-cap-sep {
position: sticky; top: calc(var(--pega-top, 56px) + var(--pega-alto, 0px)); z-index: 19;
margin: var(--e3) 0 0; padding: var(--e2) var(--e4);
background: var(--bg);
}
.bus-frag {
display: block; margin-top: var(--e1); font-size: var(--t-small); line-height: var(--lh-small);
color: var(--text-muted); font-weight: 400;
}
.bus-frag b { font-weight: 600; color: var(--text-muted); }
mark { background: var(--aviso-bg); color: inherit; border-bottom: 2px solid var(--aviso); padding: 0 1px; }
mark.actual { background: var(--aviso); color: var(--surface); }
.bus-barra {
position: sticky; top: 60px; z-index: 18;
display: flex; align-items: center; gap: var(--e2);
margin: 0 0 var(--e3); padding: var(--e2) var(--e3);
background: var(--surface); border: 1px solid var(--aviso); border-radius: var(--r-campo);
font-size: var(--t-small); box-shadow: var(--shadow-sm);
}
.bus-barra span { flex: 1; }
.bus-barra button {
min-height: 32px; padding: 0 var(--e3); border: 1px solid var(--border); border-radius: var(--r-chip);
background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-small); cursor: pointer;
}
.inf-row-valor.aprox { color: var(--text-muted); }
.inf-valor.aprox { flex-wrap: wrap; border-style: dashed; }
.inf-valor-aviso {
flex-basis: 100%; margin: var(--e2) 0 0; font-size: var(--t-micro); line-height: var(--lh-micro);
color: var(--text-muted);
}
.inf-desc-caja .nw { white-space: nowrap; }