/* Código Civil · Tesauro (usa las variables del cuadro de mandos: .ccd) */
.cct { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); }
.cct-migas { font-size: 12.5px; color: var(--ink-2); margin: 0 0 14px !important; }
.cct-migas a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.cct-migas a:hover { color: var(--accent); }
.cct-lead { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; max-width: 820px; margin: 0 0 20px !important; }

.cct-barra { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 14px; }
.cct-buscar { flex: 1 1 280px; max-width: 460px; height: 46px; padding: 0 18px; font: 500 1rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; outline: none; }
.cct-buscar:focus { border-color: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 18%, transparent); }
.cct-cuenta { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cct-areas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.cct-areas button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 13px; font: 600 12.5px var(--sans); cursor: pointer; }
.cct-areas button:hover { border-color: var(--accent); color: var(--accent); }
.cct-areas button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cct-letras { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 0; margin: 0 0 8px; background: var(--paper); border-bottom: 2px solid var(--ink); }
.cct-letras a { min-width: 30px; padding: 4px 6px; text-align: center; text-decoration: none; font: 700 14px var(--sans); color: var(--ink); border-radius: 4px; }
.cct-letras a:hover { background: var(--accent-soft); color: var(--accent); }
.cct-letras a.off { opacity: .25; pointer-events: none; }

.cct-letra { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--line); scroll-margin-top: 60px; }
.cct-letra h2 { margin: 0 !important; font: 600 2.4rem/1 var(--serif); color: var(--accent); }
.cct-letra ul { list-style: none; margin: 0 !important; padding: 0 !important; columns: 3 250px; column-gap: 34px; }
.cct-letra li { break-inside: avoid; padding: 3px 0; font-family: var(--serif); font-size: 1.06rem; line-height: 1.35; }
.cct-letra li a { color: var(--ink); text-decoration: none; }
.cct-letra li a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cct-letra li small { font: 500 11.5px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; margin-left: 2px; }
.cct-ver { font-style: italic; color: var(--ink-2); }
.cct-vacio, .cct-nota { font-size: 13px; color: var(--ink-2); margin: 18px 0 0 !important; }
.cct-nota a { color: var(--accent); }

/* Página de una voz */
.cct-area { margin: -4px 0 18px !important; }
.cct-area span { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tc); background: color-mix(in srgb, var(--tc) 11%, var(--paper)); padding: 6px 9px; border-radius: 3px; }
.cct-area small { margin-left: 10px; font-size: 13px; color: var(--ink-2); }
.cct-rel { display: grid; gap: 0; margin: 0 0 26px; border-top: 1px solid var(--line); }
.cct-rel > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cct-rel dt { font: 700 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cct-rel dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cct-rel dd a { display: inline-block; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 550; }
.cct-rel dd a:hover { border-color: var(--accent); color: var(--accent); }
.cct-voz h2 { font: 700 12px/1.4 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; margin: 30px 0 0 !important; padding: 0 0 7px; border-bottom: 2px solid var(--ink); }
.cct-voz h2 small { font-weight: 500; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.cct-reg { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.cct-reg a { display: block; padding: 11px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; background: var(--card); text-decoration: none; color: var(--ink); }
.cct-reg a:hover { border-color: var(--accent); }
.cct-reg b { display: block; font-size: 15px; color: var(--accent); }
.cct-reg span { display: block; font-family: var(--serif); font-size: 1rem; line-height: 1.35; }
.cct-arts { list-style: none; margin: 0 !important; padding: 0 !important; }
.cct-arts li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 14px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cct-art { font: 700 14px var(--sans); color: var(--accent); text-decoration: none; white-space: nowrap; }
.cct-art:hover { text-decoration: underline; }
.cct-arts span { font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; max-width: 110ch; }
.cct mark { background: var(--accent-soft); color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 600; }

/* Conceptos en el panel de cada artículo del cuadro */
.cct-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cct-chips a { display: inline-block; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font: 550 12.5px var(--sans); }
.cct-chips a:hover { border-color: var(--accent); color: var(--accent); }
.cct-chips a.cct-todo { border-style: dashed; color: var(--ink-2); }

@media (max-width: 640px) {
	.cct-letra { grid-template-columns: 1fr; }
	.cct-letra h2 { font-size: 1.8rem; margin-bottom: 6px !important; }
	.cct-rel > div { grid-template-columns: 1fr; }
	.cct-arts li { grid-template-columns: 1fr; }
}

/* Accesos destacados bajo la cabecera del cuadro */
.ccd .cct-accesos { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px !important; }
.ccd .ccd-btn.cct-boton { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.ccd .ccd-btn.cct-boton:hover { background: var(--ink); border-color: var(--ink); }