/* ===================================================================== FINANZAS · LA FORMA DE LA PORTADA (encargo 065)
   Cabecera de página compartida (coliseo_paginas.css, `cgp-`) + la libreta a la derecha, portada de
   `maqueta/paginas/fin_cuenta.html` con prefijo `cg-`. Los colores salen de los tokens `--cg-*` de la
   portada; el segundo valor de cada `var()` es solo el respaldo mientras ese token no esté en tokens.css. */
.cg-fin { background: var(--cg-marfil, #F4F0E7); border-radius: 12px; overflow: hidden; color: var(--cg-texto, #172B26); }
.cg-fin-cuerpo { max-width: 1520px; margin: 0 auto; padding: 26px 32px 40px; box-sizing: border-box; }
.cg-fin-cab > .esq { display: none; }
.cg-fin-nota { margin: 10px 0 0; max-width: 470px; font-size: 12.5px; line-height: 1.55; color: var(--cg-texto-2, #5F645C); }
.cg-libreta { position: relative; flex: 0 0 auto; width: 720px; max-width: 100%; box-sizing: border-box; padding: 18px 22px 16px; border-radius: 10px;
  border: 1px solid rgba(128, 98, 48, .34); background-color: var(--cg-superficie, #FAF7F0);
  background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 36px rgba(50, 38, 18, .22); }
.cg-libreta::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: var(--cg-sillar, #E6DAC0); background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.cg-libreta > * { position: relative; }
.cg-libreta svg { width: 20px; height: 20px; stroke: var(--cg-bronce-osc, #806230); fill: none; flex: 0 0 auto; }
.cg-libreta-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(128, 98, 48, .2); }
.cg-libreta-num { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; font-size: 19px; font-weight: 800; letter-spacing: 1.6px; color: var(--cg-texto, #172B26); }
.cg-libreta-pausa { margin-left: auto; font-size: 12px; color: var(--cg-texto-3, #666B64); text-align: right; }
.cg-libreta-celdas { display: flex; align-items: stretch; padding: 14px 0 12px; }
.cg-libreta-celdas .cgp-celda { flex: 1 1 0; padding: 0 18px; }
.cg-libreta-celdas .cgp-celda:first-child { padding-left: 0; }
.cg-libreta-celdas .cgp-celda > span:last-child { flex: 1 1 auto; }
.cg-libreta-celdas .cgp-pie { white-space: normal; }
.cg-fin-ug { display: block; font-size: 26px; line-height: 40px; color: var(--cg-texto, #172B26); }
.cg-fin-ug-vacia { color: var(--cg-texto-3, #666B64); }
.cg-libreta-bot { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .2); }
.cg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 7px; border: 0; margin: 0; cursor: pointer;
  font-family: var(--fuente); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; text-align: center; }
.cg-btn.cg-pri { background: linear-gradient(180deg, var(--cg-bronce, #B3945C), var(--cg-bronce-osc, #806230)); color: var(--cg-superficie-alta, #FFFDF8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(96, 72, 32, .28); }
.cg-btn.cg-lin { background: transparent; border: 1px solid rgba(179, 148, 92, .55); color: var(--cg-bronce-osc, #806230); }
.cg-btn.cg-apag { background: var(--cg-papel-3, #F2ECDF); color: var(--cg-texto-3, #666B64); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .18); cursor: default; }
.cg-btn.cg-chico { height: 30px; padding: 0 10px; font-size: 12px; }
.cg-btn.cg-chico svg { width: 13px; height: 13px; }
.cg-btn:disabled { cursor: default; }
@media (max-width: 820px) {
  .cg-fin-cuerpo { padding: 18px 14px 30px; }
  .cg-libreta { width: 100%; padding: 14px; }
  .cg-libreta-cab { flex-wrap: wrap; }
  .cg-libreta-pausa { flex-basis: 100%; margin-left: 0; text-align: left; }
  .cg-libreta-celdas { flex-wrap: wrap; }
  .cg-libreta-celdas .cgp-celda { flex: 1 1 100%; padding: 8px 0; }
  .cg-libreta-celdas .cgp-div { display: none; }
  .cg-libreta-bot { flex-wrap: wrap; }
  .cg-libreta-bot .cg-btn { flex: 1 1 100% !important; }
}

/* ---- 065 · tarea 2 · LA CUENTA: Mis bonos + Tu liquidación (portada de `fin_cuenta.html`, prefijo `cg-`) ---- */
.cg-aviso { display: flex; align-items: center; gap: 14px; padding: 12px 20px; margin-bottom: 22px; border-radius: 10px;
  background: linear-gradient(180deg, var(--cg-aviso-1, #F6E9CC), var(--cg-aviso-2, #EFDFBB)); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .35); }
.cg-aviso svg { width: 18px; height: 18px; stroke: var(--cg-bronce-osc, #806230); flex: 0 0 auto; }
.cg-aviso p { margin: 0; font-size: 13px; color: #4A3C22; }
.cg-aviso .cg-aviso-btn { height: 34px; font-size: 12px; background: var(--cg-bronce-osc, #806230); color: var(--cg-superficie-alta, #FFFDF8); }
.cg-fila2 { display: flex; gap: 22px; align-items: stretch; }
.cg-sup { position: relative; background: var(--cg-superficie, #FAF7F0); border: 1px solid rgba(128, 98, 48, .34); border-radius: 10px; box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(60, 42, 18, .14); color: var(--cg-texto, #172B26); }
.cg-sup::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: var(--cg-sillar, #E6DAC0); background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.cg-sup > * { position: relative; }
.cg-sup-piedra { background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.cg-fin-bonos { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-fin-liq { flex: 0 0 400px; padding: 20px 24px; display: flex; flex-direction: column; }
.cg-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; flex-wrap: wrap; }
.cg-sec { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 27px; font-weight: 600; line-height: 1; margin: 0; color: var(--cg-texto, #172B26); }
.cg-hilo { flex-grow: 1; height: 1px; min-width: 16px; background: rgba(128, 98, 48, .28); }
.cg-pils { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.cg-pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); background: transparent;
  color: var(--cg-texto-2, #5F645C); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cg-pil.on { background: var(--cg-verde, #103C34); color: var(--cg-bronce-claro, #E8D5A8); border-color: var(--cg-verde, #103C34); font-weight: 700; }
.cg-ver { font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.cg-bono { border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-bono:last-child { border-bottom: 0; }
.cg-bono.apagado { opacity: .65; }
.cg-bono > summary { display: flex; align-items: center; gap: 13px; padding: 14px 0; cursor: pointer; list-style: none; }
.cg-bono > summary::-webkit-details-marker { display: none; }
.cg-bono-concepto { flex: 1 1 auto; min-width: 0; }
.cg-bono-concepto b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.cg-bono-sub { display: block; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-premio { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: 15px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; }
.cg-bono-detalle { padding: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.cg-vida { display: flex; align-items: center; min-width: 300px; }
.cg-vida .cg-p { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #666B64; }
.cg-vida .cg-p i { width: 13px; height: 13px; border-radius: 50%; background: var(--cg-superficie-alta, #FFFDF8); border: 2px solid #C8BDA4; }
.cg-vida .cg-p.ok { color: var(--cg-ok, #1F6349); }
.cg-vida .cg-p.ok i { background: var(--verde-f, #2E7A62); border-color: var(--verde-f, #2E7A62); box-shadow: 0 0 0 3px rgba(46, 122, 98, .16); }
.cg-vida .cg-t { flex: 1 1 auto; height: 2px; background: #DED6C4; margin: 0 4px 16px; min-width: 24px; }
.cg-vida .cg-t.ok { background: var(--verde-f, #2E7A62); }
.cg-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cg-tag.cg-gris { background: var(--cg-papel-3, #F2ECDF); color: var(--cg-texto-2, #5F645C); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-bonos-mas { display: flex; justify-content: flex-end; margin-top: 10px; }
.cg-nota-reloj { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-nota-reloj svg { width: 15px; height: 15px; stroke: var(--cg-bronce-osc, #806230); flex: 0 0 auto; }
.cg-vacio { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-style: italic; font-size: 19px; color: var(--cg-texto-3, #666B64); padding: 6px 0; }
.cg-pedida { border: 1px solid rgba(179, 148, 92, .55); border-radius: 8px; padding: 12px 14px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; background: rgba(179, 148, 92, .08); }
.cg-fin-bonos .fin-niveles, .cg-fin-bonos .fin-niveles-pie { color: var(--cg-texto, #172B26); }
/* Tu liquidación */
.cg-liq-cab { display: flex; align-items: center; gap: 14px; }
.cg-liq-total { display: block; min-height: 44px; }
.cg-liq-cuando { margin-left: auto; text-align: right; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-liq-cuando b { color: var(--cg-texto, #172B26); }
.cg-liq-form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.cg-liq-desglose { display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding: 0; border: 0; background: none; }
.cg-liq-desglose > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-liq-desglose > div:last-child { border-bottom: 0; }
.cg-liq-aviso { padding: 10px 12px; border-radius: 7px; background: rgba(179, 148, 92, .12); font-size: 12px; line-height: 1.5; color: #5E4720; }
.cg-liq-pie { font-size: 12px; color: var(--cg-texto-3, #666B64); text-align: center; }
.cg-liq-corte { font-size: 12px; color: var(--cg-texto-3, #666B64); text-align: center; }
.cg-liq-bonos > summary, .cg-liq-ya > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
.cg-liq-ya { margin-top: auto; padding-top: 12px; }
.cg-liq-ya .liq-historial { margin-top: 8px; }
.cg-btn.cg-ancho { width: 100%; }
.cg-btn:disabled.cg-pri { opacity: .5; }
/* Lo plegado bajo la liquidación */
.cg-fin-mas { margin-top: 22px; }
.cg-fin-mas > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cg-bronce-osc, #806230); padding: 8px 0; }
@media (max-width: 1100px) {
  .cg-fila2 { flex-direction: column; }
  .cg-fin-liq { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cg-fin-bonos { padding: 16px 14px; }
  .cg-fin-liq { padding: 16px 14px; }
  .cg-bono > summary { flex-wrap: wrap; }
  .cg-vida { order: 3; flex: 1 1 100%; min-width: 0; }
  .cg-aviso { flex-wrap: wrap; padding: 12px 14px; }
}
/* los campos del formulario de la liquidación sobre papel (los del resto de la app son de fondo oscuro) */
.cg-fin-liq .campo label { color: var(--cg-texto-2, #5F645C); }
.cg-fin-liq .campo input { background: var(--cg-superficie-alta, #FFFDF8); color: var(--cg-texto, #172B26); border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; }
.cg-fin-liq .campo input::placeholder { color: var(--cg-texto-3, #666B64); }
.cg-fin-liq .mini.tenue { color: var(--cg-texto-3, #666B64); }
.cg-vacio { text-transform: none; font-variant: normal; letter-spacing: 0; }

/* ---- 065 · tarea 3 · TU MES (portada de `fin_mes.html`, prefijo `cg-`) ---- */
.cg-cab-grande .cg-sec { font-size: 31px; }
.cg-rot { font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; }
.cg-banda { display: flex; flex-wrap: nowrap; align-items: stretch; padding: 17px 4px; }
.cg-banda .cgp-celda { flex: 1 1 0; padding: 0 22px; }
.cg-banda .cgp-celda > span:last-child { flex: 1 1 auto; }
.cg-banda .cgp-pie { white-space: normal; }
.cg-fin-mes-fila { margin-top: 22px; }
.cg-fin-mes-escala { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-fin-mes-meta { flex: 0 0 400px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-tabla { width: 100%; border-collapse: collapse; }
.cg-tabla th { font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--cg-texto-2, #5F645C); text-align: left; padding: 0 0 10px; border-bottom: 1px solid rgba(128, 98, 48, .28); }
.cg-tabla td { padding: 12px 0; border-bottom: 1px solid rgba(128, 98, 48, .14); font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
.cg-tabla td.cg-der, .cg-tabla th.cg-der { text-align: right; }
.cg-nota-mes { margin-top: 12px; font-size: 12px; color: var(--cg-texto-3, #666B64); }
/* La tarjeta verde: sobre fondo oscuro, así que sus textos son claros (no los del papel) */
.cg-verde { background: linear-gradient(180deg, #14473C 0%, var(--cg-verde, #103C34) 55%, #0B332B 100%); border-color: rgba(179, 148, 92, .45); box-shadow: 0 12px 28px rgba(30, 20, 8, .26); color: #F3EBD9; }
.cg-verde::before { display: none; }
.cg-k { display: block; font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: var(--cg-texto-2, #5F645C); margin-bottom: 6px; }
.cg-k.cg-k-m { color: #8CD6AA; margin-top: 4px; }
.cg-barra { position: relative; height: 10px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); }
.cg-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cg-bronce, #B3945C), var(--cg-bronce-osc, #806230)); }
.cg-verde .cg-barra { background: rgba(0, 0, 0, .25); }
.cg-verde .cg-barra > span { background: linear-gradient(90deg, #8CD6AA, #2E7A62); }
.cg-barra-gruesa { height: 12px; margin-top: 12px; }
.cg-meta-pie { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: #93B3A8; }
.cg-meta-pie strong { color: #F3EBD9; }
.cg-meta-pie span:last-child strong { color: var(--cg-bronce-claro, #E8D5A8); }
.cg-desp { margin-top: 18px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-desp > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; }
.cg-desp > summary::-webkit-details-marker { display: none; }
.cg-desp-t { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 19px; font-weight: 600; color: #FAF7F0; }
.cg-desp > summary::after { content: '⌄'; margin-left: auto; color: #93B3A8; font-size: 20px; line-height: 1; transition: transform .15s; }
.cg-desp[open] > summary::after { transform: rotate(180deg); }
.cg-desp-cuerpo { font-size: 12px; line-height: 1.6; color: #A8C4BA; padding-bottom: 6px; }
.cg-desp-cuerpo b { color: #F3EBD9; }
.cg-ver-claro { margin-top: auto; padding-top: 14px; color: var(--cg-bronce-claro, #E8D5A8); text-align: left; }
@media (max-width: 1100px) {
  .cg-fin-mes-meta { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cg-banda { flex-wrap: wrap; padding: 8px 4px; }
  .cg-banda .cgp-celda { flex: 1 1 100%; padding: 12px 14px; }
  .cg-banda .cgp-div { display: none; }
  .cg-fin-mes-escala { padding: 16px 14px; }
  .cg-fin-mes-meta { padding: 18px 16px; }
  .cg-tabla th, .cg-tabla td { font-size: 12px; }
  .cg-cab .cg-rot { white-space: normal; flex-basis: 100%; order: 3; line-height: 1.6; }
  .cg-cab .cg-hilo { display: none; }
}

/* ---- 065 · tarea 4 · EXTRAORDINARIOS (portada de `fin_extra.html`, prefijo `cg-`) ---- */
.cg-fin-extra-fila { margin-top: 22px; }
.cg-fin-extra-lista { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-fin-extra-meta { flex: 0 0 380px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-xtr-proxs { display: flex; gap: 14px; margin-bottom: 14px; }
.cg-xtr-prox { flex: 1 1 0; min-width: 0; padding: 16px 18px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .18); background: transparent; }
.cg-xtr-prox-on { background: var(--cg-superficie-alta, #FFFDF8); border-color: rgba(128, 98, 48, .3); }
.cg-xtr-prox-on .cg-k { color: var(--cg-bronce-osc, #806230); }
.cg-xtr-prox-t { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--cg-texto, #172B26); overflow-wrap: anywhere; }
.cg-xtr-prox-fila { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cg-xtr-barra { flex: 1 1 auto; }
.cg-premio { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.cg-xtr-prox-pie { margin-top: 6px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-xtr-cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; align-items: start; }
.cg-desp-p { border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-desp-p > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; }
.cg-desp-p > summary::-webkit-details-marker { display: none; }
.cg-desp-p-t { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 20px; font-weight: 600; color: var(--cg-texto, #172B26); }
.cg-desp-p-n { margin-left: auto; font-size: 12px; color: var(--cg-texto-2, #5F645C); white-space: nowrap; }
.cg-desp-p > summary::after { content: '⌄'; color: var(--cg-bronce-osc, #806230); font-size: 20px; line-height: 1; transition: transform .15s; }
.cg-desp-p[open] > summary::after { transform: rotate(180deg); }
.cg-fin-cobrado { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 22px; margin-bottom: 20px; }
.cg-fin-cobrado-cifra { display: block; min-height: 44px; }
.cg-fin-cobrado-pie { font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-fin-mas .vidrio.tarjeta { color: var(--texto); }   /* lo de siempre vive en tarjetas oscuras: no hereda el texto oscuro de la página clara */
.cg-vacio-n { margin: 0; padding: 6px 0; font-size: 13px; color: var(--cg-texto-2, #5F645C); }
.cg-liq-campos { display: flex; flex-direction: column; gap: 12px; }
.cg-xtr-filas { padding-bottom: 10px; }
.cg-xtr-fila { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dashed rgba(128, 98, 48, .16); }
.cg-xtr-fila b { font-size: 13px; color: var(--cg-texto, #172B26); }
.cg-xtr-fila p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--cg-texto-2, #5F645C); }
.cg-xtr-id { display: inline-block; text-align: center; padding: 4px 0; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--cg-texto-3, #666B64); border: 1px solid rgba(128, 98, 48, .24); }
.cg-xtr-id.ganado { background: var(--cg-bronce, #B3945C); border-color: var(--cg-bronce-osc, #806230); color: #fff; }
.cg-xtr-v { text-align: right; font-size: 13px; font-weight: 700; color: var(--cg-bronce-osc, #806230); font-variant-numeric: tabular-nums lining-nums; }
.cg-xtr-v small { display: block; font-size: 12px; font-weight: 600; color: #2E7A62; }
.cg-xtr-mas { font-style: italic; text-transform: none; font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 21px; color: #A8C4BA; margin-top: 4px; }
.cg-xtr-frase { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 24px; color: #F3EBD9; line-height: 1.2; }
.cg-xtr-irias { margin-top: 18px; }
.cg-verde .cg-xtr-irias .cg-k { color: #93B3A8; }
.cg-xtr-irias-fila { display: flex; gap: 8px; }
.cg-interna { flex: 1 1 0; min-width: 0; padding: 9px 10px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .2); }
.cg-interna .cg-k { font-size: 12px; letter-spacing: 1.2px; color: #93B3A8; margin-bottom: 4px; }
.cg-interna b { font-variant-numeric: tabular-nums lining-nums; font-size: 17px; font-weight: 700; color: #F3EBD9; }
.cg-xtr-irias-pie { font-size: 12px; color: #93B3A8; margin-top: 6px; }
.cg-xtr-nota { margin-top: auto; padding-top: 16px; font-size: 12px; line-height: 1.55; color: #A8C4BA; }
@media (max-width: 1100px) {
  .cg-fin-extra-meta { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cg-fin-extra-lista { padding: 16px 14px; }
  .cg-fin-extra-meta { padding: 18px 16px; }
  .cg-xtr-proxs { flex-direction: column; }
  .cg-xtr-cats { grid-template-columns: 1fr; }
}

/* ---- 065 · tarea 5 · DEPÓSITOS A PLAZO (portada de `fin_depositos.html`, prefijo `cg-dep-`) ---- */
.cg-tag.cg-bronce { background: var(--cg-superficie-alta, #FFFDF8); color: var(--cg-bronce-osc, #806230); box-shadow: inset 0 0 0 1px var(--cg-bronce, #B3945C); }
.cg-dep-sim { flex: 1 1 0; min-width: 0; padding: 22px 26px 20px; }
.cg-dep-lado { flex: 0 0 380px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-dep-mis { flex: 1 1 0; min-width: 0; padding: 18px 26px 16px; }
.cg-dep-simu { display: flex; align-items: center; gap: 22px; }
.cg-dep-monto-col { flex: 1 1 0; min-width: 0; }
.cg-dep-toca-col { flex: 1 1 0; min-width: 0; }
.cg-dep-monto { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; border-bottom: 2px solid var(--cg-bronce, #B3945C); padding-bottom: 4px; }
.cg-dep-monto span { font-size: 15px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
.cg-dep-monto input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-monto:focus-within { border-bottom-color: var(--cg-bronce-osc, #806230); }
.cg-dep-aviso { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
.cg-dep-flecha { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(179, 148, 92, .12); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .4); }
.cg-dep-flecha svg { width: 22px; height: 22px; stroke: var(--cg-bronce, #B3945C); }
.cg-k.cg-k-b { color: var(--cg-bronce-osc, #806230); margin-bottom: 8px; }
.cg-dep-toca { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 34px; font-weight: 600; line-height: 1; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-gana { margin-top: 6px; font-size: 13px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-gana b { color: var(--cg-bronce-osc, #806230); font-size: 15px; }
.cg-dep-nota { margin-top: 8px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-plazos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cg-dep-plazo { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px 12px; border-radius: 9px; background: var(--cg-superficie-alta, #FFFDF8); border: 1px solid rgba(128, 98, 48, .22); text-align: left; font-family: inherit; cursor: default; }
.cg-dep-plazo.cand { cursor: pointer; box-shadow: 0 0 0 2px var(--cg-bronce, #B3945C); }
.cg-dep-plazo.on { background: linear-gradient(180deg, #14473C, #0B332B); border-color: #0B332B; box-shadow: 0 0 0 3px rgba(179, 148, 92, .35), 0 10px 20px rgba(11, 51, 43, .25); }
.cg-dep-pz { font-size: 12px; letter-spacing: 1.8px; font-weight: 800; color: var(--cg-texto-2, #5F645C); }
.cg-dep-pc { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 30px; font-weight: 700; line-height: 1; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-tr { font-size: 12px; line-height: 1.35; color: var(--cg-texto-2, #5F645C); }
.cg-dep-gn { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--cg-bronce-osc, #806230); }
.cg-dep-plazo.on .cg-dep-pz { color: #8CD6AA; }
.cg-dep-plazo.on .cg-dep-pc, .cg-dep-plazo.on .cg-dep-gn { color: var(--cg-bronce-claro, #E8D5A8); }
.cg-dep-plazo.on .cg-dep-tr { color: #A8C4BA; }
.cg-dep-notas { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--cg-texto-2, #5F645C); }
.cg-dep-notas > span { flex: 1; }
.cg-dep-notas svg { width: 15px; height: 15px; vertical-align: -3px; stroke: var(--cg-bronce-osc, #806230); }
.cg-k.cg-k-v { color: #8CD6AA; margin: 10px 0 4px; }
.cg-dep-pie-v { font-size: 12px; color: #A8C4BA; margin-top: 6px; }
.cg-dep-pie-v b { color: var(--cg-bronce-claro, #E8D5A8); }
.cg-dep-ancho { width: 100%; margin-top: 18px; justify-content: center; }
.cg-dep-pronto { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--cg-bronce-claro, #E8D5A8); text-align: center; }
.cg-dep-pronto-c { color: var(--cg-bronce-osc, #806230); }
.cg-dep-tope { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-dep-tope-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: 12px; color: var(--cg-bronce-claro, #E8D5A8); }
.cg-dep-fila { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0 12px; }
.cg-dep-fila + .cg-dep-fila { border-top: 1px solid rgba(128, 98, 48, .16); padding-top: 14px; }
.cg-dep-fila-cuerpo { flex: 1; min-width: 0; }
.cg-dep-fila-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cg-dep-fila-cab > b { font-size: 18px; color: var(--cg-texto, #172B26); }
.cg-dep-fila-plazo { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 19px; font-weight: 600; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-fila-fechas { margin-left: auto; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-barra { margin-top: 10px; height: 8px; }
.cg-dep-fila-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-fila-pie b { color: var(--cg-texto, #172B26); }
.cg-dep-fila-pie b.cg-dep-bronce { color: var(--cg-bronce-osc, #806230); }
.cg-dep-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cg-papel-3, #F2ECDF); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-dep-ico svg { width: 20px; height: 20px; stroke: var(--cg-verde-claro, #2E6B57); }
.cg-dep-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-dep-op { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--cg-texto, #172B26); }
button.cg-dep-op { cursor: pointer; background: var(--cg-superficie-alta, #FFFDF8); }
.cg-dep-op-txt { cursor: default; }
.cg-dep-decide { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cg-dep-ayuda { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-dep-mas { gap: 0; }
.cg-dep-mas-cab { display: flex; align-items: center; gap: 14px; }
.cg-dep-mas-t { display: block; font-size: 13px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-dep-pie-c { margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-3, #666B64); }
.cg-dep-explorar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cg-dep-exp { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.cg-dep-exp > div { flex: 1; min-width: 0; }
.cg-dep-exp b { display: block; font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 21px; font-weight: 600; line-height: 1.1; color: var(--cg-texto, #172B26); }
.cg-dep-exp span { display: block; font-size: 12px; color: var(--cg-texto-2, #5F645C); margin-top: 3px; }
.cg-dep-exp > span.cg-tag { display: inline-flex; margin-top: 0; }
@media (max-width: 1100px) {
  .cg-dep-lado { flex: 1 1 auto; }
  .cg-dep-plazos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cg-dep-sim { padding: 18px 16px; }
  .cg-dep-mis { padding: 16px 14px; }
  .cg-dep-lado { padding: 18px 16px; }
  .cg-dep-simu { flex-direction: column; align-items: stretch; }
  .cg-dep-flecha { transform: rotate(90deg); align-self: center; }
  .cg-dep-plazos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-dep-notas { flex-direction: column; gap: 8px; }
  .cg-dep-explorar { grid-template-columns: 1fr; }
  .cg-dep-fila-fechas { margin-left: 0; flex-basis: 100%; }
}
/* 5-oct (PARTY): la tabla aprobada por José tiene 7 plazos. En escritorio van 4 + 3 (la segunda fila centrada); en
   tableta y celular, la última carta (1 año) ocupa la fila entera en vez de quedar sola en una columna. */
.cg-dep-plazos.cg-dep-7 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cg-dep-plazos.cg-dep-7 > * { grid-column: span 2; }
.cg-dep-plazos.cg-dep-7 > :nth-child(5) { grid-column: 2 / span 2; }
@media (max-width: 1100px) {
  .cg-dep-plazos.cg-dep-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-dep-plazos.cg-dep-7 > *, .cg-dep-plazos.cg-dep-7 > :nth-child(5) { grid-column: auto; }
  .cg-dep-plazos.cg-dep-7 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cg-dep-plazos.cg-dep-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ENCARGO 065 · tarea 6: Movimientos con la forma de la maqueta (fin_mov.html). */
.cg-fin-mov-caja { padding: 18px 26px 10px; }
.cg-mov td { vertical-align: top; }
.cg-mov-cargo { color: var(--cg-rojo, #B4472F); }
.cg-mov-abono { color: var(--cg-verde-ok, #1F6349); }
.cg-mov-pie { padding: 12px 0 6px; font-size: 12px; color: var(--cg-texto-3, #666B64); }

/* ===================================================================== MI PERFIL · LA FORMA DE LA PORTADA (encargo 066)
   Cabecera de página compartida (`cgp-`, coliseo_paginas.css) con retrato, frase, avance y la credencial a la derecha:
   portada de `maqueta/paginas/per_grado.html` con prefijo `cg-`. Tarea 1: la cabecera y las cinco pestañas. */
.cg-per { background: var(--cg-marfil, #F4F0E7); border-radius: 12px; overflow: hidden; color: var(--cg-texto, #172B26); }
.cg-per-cuerpo { padding-top: 26px; }
.cg-per-cab > .esq { display: none; }
.cgp-retrato { position: relative; }
.cg-per-inicial { display: grid; place-items: center; width: 132px; height: 170px; background: var(--cg-papel-3, #F2ECDF); color: var(--cg-bronce-osc, #806230);
  font: 600 64px/1 var(--fuente-titulos); }
.cg-per-camara { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(128, 98, 48, .5); background: var(--cg-superficie-alta, #FFFDF8); box-shadow: 0 4px 10px rgba(50, 38, 18, .25); }
.cg-per-camara svg { width: 16px; height: 16px; stroke: var(--cg-bronce-osc, #806230); fill: none; }
.cg-per-lapiz { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(128, 98, 48, .4); background: rgba(255, 253, 248, .7); }
.cg-per-lapiz svg { width: 13px; height: 13px; stroke: var(--cg-bronce-osc, #806230); fill: none; }
.cg-per-sin { font-style: normal; font-family: var(--fuente); font-size: 13px; color: var(--cg-texto-3, #666B64); }
.cg-per-avance { display: flex; align-items: center; gap: 12px; margin-top: 14px; max-width: 440px; }
.cg-per-avance-t { font-size: 12px; color: #4A4F48; white-space: nowrap; }
.cg-per-avance .perfil-pct { font: inherit; font-weight: 700; color: var(--cg-texto, #172B26); }
.cg-per-barra { position: relative; flex: 1 1 auto; height: 8px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); }
.cg-per-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #B3945C, #806230); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.cg-per-avance-b { font-size: 12px; color: var(--cg-bronce-osc, #806230); font-weight: 700; white-space: nowrap; }
/* La credencial de miembro: la tarjeta verde con filo de bronce de la maqueta. */
.cg-credencial { flex: 0 0 auto; width: 470px; max-width: 100%; box-sizing: border-box; padding: 18px 22px; border-radius: 10px; color: #F3EBD9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--cg-verde-2, #14473C) 0%, var(--cg-verde, #103C34) 45%, var(--cg-verde-borde, #0B332B) 100%); border: 1px solid rgba(179, 148, 92, .55);
  box-shadow: 0 18px 36px rgba(30, 20, 8, .32), inset 0 1px 0 rgba(255, 255, 255, .08); }
.cg-credencial::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(179, 148, 92, .16) 0 1px, transparent 1px 7px); }
.cg-credencial > * { position: relative; z-index: 1; }
.cg-cred-cab { display: flex; align-items: center; gap: 10px; }
.cg-cred-desde { font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--cg-bronce, #B3945C); }
.cg-cred-cuerpo { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.cg-brillo { position: relative; display: inline-block; }
.cg-brillo::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 134, .7) 0%, rgba(214, 170, 90, .3) 36%, rgba(214, 170, 90, 0) 70%); }
.cg-brillo > * { position: relative; }
.cg-cred-insignia { height: 86px; width: auto; display: block; opacity: 1; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-cred-grado { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 30px; font-weight: 600; color: var(--cg-superficie, #FAF7F0); line-height: 1; }
.cg-cred-rango { font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--cg-bronce, #B3945C); margin-top: 4px; }
.cg-cred-num { font-variant-numeric: tabular-nums lining-nums; font-size: 14px; font-weight: 800; letter-spacing: 1.2px; color: var(--cg-bronce-claro, #E8D5A8); margin-top: 10px; overflow-wrap: anywhere; }
.cg-cred-vig { font-size: 12px; color: var(--cg-texto-verde-2, #93B3A8); margin-top: 2px; }
.cg-cred-bot { display: flex; gap: 8px; margin-top: 14px; }
.cg-cred-bot .cg-btn { text-decoration: none; }
.cg-btn.cg-sobre-verde { color: var(--cg-bronce-claro, #E8D5A8); border-color: rgba(179, 148, 92, .5); }
.cg-sobre-verde svg, .cg-credencial .cg-pri svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.cg-credencial .cg-pri svg { stroke: var(--cg-superficie-alta, #FFFDF8); }
@media (max-width: 820px) {
  .cg-credencial { width: 100%; padding: 16px; }
  .cg-per-avance { flex-wrap: wrap; max-width: none; }
  .cg-per-avance .cg-per-barra { flex: 1 1 100%; order: 3; }
  .cg-cred-bot { flex-direction: column; }
  .cg-per-inicial { width: 96px; height: 124px; font-size: 48px; }
}

/* ===================================================================== MI PERFIL · TU GRADO (encargo 066 · tarea 2)
   Patrón D de `maqueta/paginas/per_grado.html`: «Tu camino» a la izquierda, tarjeta verde de privilegios a la derecha y
   debajo la única tira verde de la página (la placa `cgp-` de coliseo_paginas.css). */
.cg-gr-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-gr-camino-caja { flex: 1 1 0; min-width: 0; padding: 20px 26px 22px; }
.cg-gr-camino { position: relative; display: flex; align-items: flex-start; margin-top: 18px; }
.cg-gr-camino::before { content: ''; position: absolute; left: 8%; right: 8%; top: 40px; height: 1px; background: rgba(128, 98, 48, .3); }
.cg-gr-peldano { flex: 1 1 0; text-align: center; position: relative; }
.cg-gr-ins { height: 74px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-gr-ins.cg-gr-ins-aqui { height: 104px; }
.cg-gr-nom { margin-top: 10px; font: 500 14.5px/1.2 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto-2, #5F645C); }
.cg-gr-rango { margin-top: 3px; font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: #666B64; }
.cg-gr-peldano.cg-aqui .cg-gr-nom { font-weight: 700; font-size: 17px; color: var(--cg-texto, #172B26); }
.cg-gr-peldano.cg-aqui .cg-gr-rango { color: var(--cg-bronce-osc, #806230); }
.cg-gr-peldano.cg-aqui .cg-gr-rango::after { content: ''; display: block; width: 28px; height: 2px; margin: 6px auto 0; background: var(--cg-bronce, #B3945C); }
.cg-gr-prox { margin-top: 22px; padding: 16px 18px; border-radius: 7px; background: var(--cg-superficie-alta, #FFFDF8); border: 1px solid rgba(128, 98, 48, .24); }
.cg-gr-prox-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cg-gr-prox-nom { font: italic 600 22px/1 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto, #172B26); }
.cg-gr-prox-prom { margin-left: auto; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-gr-prox-prom b { color: var(--cg-texto, #172B26); font-variant-numeric: tabular-nums lining-nums; }
.cg-gr-prox .cg-barra { margin-top: 10px; }
.cg-gr-dos { display: flex; margin-top: 14px; }
.cg-gr-dos > div { flex: 1 1 0; min-width: 0; padding-right: 18px; }
.cg-gr-dos > div + div { padding: 0 0 0 18px; border-left: 1px solid rgba(128, 98, 48, .18); }
.cg-gr-txt { display: block; font-size: 13px; line-height: 1.45; color: var(--cg-texto-2, #5F645C); }
.cg-gr-ult { margin: 12px 0 0; }
.cg-gr-verde { flex: 0 0 400px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-gr-priv { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(179, 148, 92, .18); }
.cg-gr-priv:last-of-type { border-bottom: 0; }
.cg-gr-priv b { font-size: 13.5px; color: var(--cg-superficie, #FAF7F0); display: block; }
.cg-gr-priv .cg-gr-priv-s { display: block; font-size: 12px; color: #93B3A8; }
.cg-gr-priv b.cg-gr-priv-v { margin-left: auto; font-size: 15px; color: var(--cg-bronce-claro, #E8D5A8); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cg-gr-ico, .cg-gr-tira .cgp-ico-c { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(179, 148, 92, .14); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .3); }
.cg-gr-ico svg, .cg-gr-tira .cgp-ico-c svg { width: 20px; height: 20px; stroke: var(--cg-bronce, #B3945C); fill: none; }
/* La tira verde de la maqueta: la placa de PARTY con el fondo y los filos de «Tus números». */
.cgp-placa.cg-gr-tira { width: 100%; box-sizing: border-box; align-items: center; padding: 15px 4px; border-color: rgba(179, 148, 92, .4);
  background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); background-size: auto; box-shadow: 0 12px 28px rgba(30, 20, 8, .26); }
.cg-gr-tira .cgp-celda { flex: 1 1 0; align-items: center; gap: 13px; padding: 0 20px; }
.cg-gr-tira .cgp-celda:last-child { flex: 1.3 1 0; }
.cg-gr-tira .cgp-div { background: rgba(179, 148, 92, .26); }
.cg-gr-tira .cgp-k { font-size: 12px; letter-spacing: 2px; color: var(--cg-bronce, #B3945C); margin-bottom: 5px; }
.cg-gr-tira .cgp-pie { font-size: 12px; color: #8CA49C; margin-top: 4px; }
.cg-gr-escudos { margin-top: 14px; padding: 12px 14px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .25); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cg-gr-escudos > svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: #8CD6AA; fill: none; }
.cg-gr-escudos > span { flex: 1 1 140px; font-size: 12px; line-height: 1.45; color: #A8C4BA; }
.cg-gr-escudos b { color: var(--cg-superficie, #FAF7F0); }
.cg-gr-planilla { margin-top: auto; padding-top: 12px; font-size: 12px; color: #7E9A92; }
.cg-gr-cab-num { margin: 24px 0 14px; }
.cg-gr-meses { display: flex; align-items: flex-end; gap: 14px; height: 46px; margin-top: 2px; }
.cg-gr-mes { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cg-gr-mes > i { display: block; width: 16px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #E2CC9A, #806230); }
.cg-gr-mes > span { font-size: 12px; letter-spacing: 1px; color: #8CA49C; }
.cg-gr-nombre { padding: 18px 22px; }
.cg-gr-nombre-fila { display: flex; gap: 10px; margin-bottom: 8px; }
.cg-gr-nombre-fila input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .34); background: var(--cg-superficie-alta, #FFFDF8); color: var(--cg-texto, #172B26); font: inherit; }
.cg-gr-ant { margin-top: 14px; font-size: 13px; }
.cg-gr-ant ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cg-gr-ant li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(128, 98, 48, .18); }
.cg-gr-ant li span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--cg-texto-3, #666B64); }
.cg-gr-ant a { color: var(--cg-bronce-osc, #806230); font-weight: 700; text-decoration: none; }
@media (max-width: 820px) {
  .cg-gr-fila { flex-direction: column; }
  .cg-gr-verde { flex: 1 1 auto; }
  .cg-gr-camino-caja { padding: 18px 16px; }
  .cg-gr-camino { overflow-x: auto; }
  .cg-gr-peldano { flex: 0 0 96px; }
  .cg-gr-dos { flex-direction: column; gap: 12px; }
  .cg-gr-dos > div, .cg-gr-dos > div + div { padding: 0; border-left: 0; }
  .cg-gr-prox-prom { margin-left: 0; }
}

/* 066 · Tu credencial (per_cred): certificado con miniatura, vitrina e historia; mismas piezas que el perfil del miembro. */
.cg-cr-cab { margin: 0 0 14px; }
.cg-cr-cab + .cg-cr-cert, .cg-cr-cert + .cg-cr-cab { margin-top: 22px; }
.cg-cr-cert { display: flex; gap: 22px; align-items: center; }
.cg-cr-marco { flex: 0 0 auto; width: 230px; height: 160px; border-radius: 7px; padding: 10px; box-sizing: border-box; background: linear-gradient(150deg, #E2CC9A, #B3945C 46%, #806230); box-shadow: 0 12px 24px rgba(50, 38, 18, .25); }
.cg-cr-hoja { height: 100%; border-radius: 4px; background: #FFFDF8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .3); overflow: hidden; }
.cg-cr-hoja-t { font-size: 12px; letter-spacing: 1px; font-weight: 800; color: #806230; }
.cg-cr-hoja-ins { height: 42px; width: auto; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-cr-hoja-n { max-width: 92%; font: italic 500 15px/1.1 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto, #172B26); }
.cg-cr-hoja-s { font-size: 12px; letter-spacing: 0; color: var(--cg-texto-2, #5F645C); }
.cg-cr-datos { flex: 1 1 0; min-width: 0; }
.cg-cr-grado { font: italic 600 30px/1 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto, #172B26); }
.cg-cr-num { margin-top: 6px; font-size: 12.5px; color: var(--cg-texto-2, #5F645C); font-variant-numeric: tabular-nums; }
.cg-cr-bot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cg-cr-bot .cg-btn { text-decoration: none; }
.cg-cr-bot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-cr-ant { margin-top: 14px; font-size: 12px; color: var(--cg-texto-3, #666B64); line-height: 1.6; }
.cg-cr-ant b { color: var(--cg-texto, #172B26); }
.cg-cr-vitrina { display: flex; gap: 18px; flex-wrap: wrap; }
.cg-cr-vit { flex: 0 0 auto; width: 104px; text-align: center; }
.cg-cr-vit b { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 1.4px; font-weight: 800; color: var(--cg-bronce-osc, #806230); text-transform: uppercase; line-height: 1.35; }
.cg-cr-vit b.cg-cr-off { color: #666B64; }
.cg-cr-vit small { display: block; margin-top: 3px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-cr-medal { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F2ECDF; box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .25); color: #B9B3A4; }
.cg-cr-medal.cg-oro { background: radial-gradient(circle at 38% 30%, #FFF3C4, #D9A93F 60%, #8A6215); box-shadow: 0 0 0 3px rgba(179, 148, 92, .25), 0 0 18px rgba(214, 170, 90, .5); color: #3A2A08; }
.cg-cr-medal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cg-cr-medal img { height: 44px; width: auto; }
.cg-cr-lado { flex: 0 0 400px; padding: 20px 24px; box-sizing: border-box; }
.cg-cr-hito { padding: 0 0 14px 18px; position: relative; }
.cg-cr-hito::before { content: ''; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--cg-bronce, #B3945C); }
.cg-cr-hito-f { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: var(--cg-bronce-osc, #806230); }
.cg-cr-hito-t { font-size: 14px; font-weight: 700; margin-top: 4px; color: var(--cg-texto, #172B26); }
.cg-cr-hito-d { font-size: 12px; color: var(--cg-texto-2, #5F645C); margin-top: 2px; }
.cg-cr-pie { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .18); font-size: 12px; color: var(--cg-texto-2, #5F645C); line-height: 1.5; }
@media (max-width: 820px) {
  .cg-cr-cert { flex-direction: column; align-items: flex-start; }
  .cg-cr-marco { width: 100%; max-width: 260px; }
  .cg-cr-lado { flex: 1 1 auto; padding: 18px 16px; }
}

/* ===================================================================== PERFIL DEL MIEMBRO (encargo 066 · tarea 8)
   `maqueta/paginas/muro_miembro.html`: cabecera de página con retrato y la tarjeta verde «Su grado»; debajo, las mismas piezas de
   Tu grado y Tu credencial (cg-gr-*, cg-cr-*). Solo se añade lo que esas páginas no tienen. */
.cg-pm-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cg-pm-acc .cg-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-pm-sede { font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-pm-grado { display: block; }
.cg-pm-falta .cg-gr-ins { opacity: .55; }
.cg-pm-falta .cg-gr-nom { color: var(--cg-texto-2, #5F645C); }
.cg-pm-fila2 { margin-top: 24px; }
.cg-pm-colofon { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 34px; text-align: center; }
.cg-pm-colofon img { height: 46px; width: auto; display: block; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-pm-colofon p { margin: 0; font-size: 12px; letter-spacing: 2.4px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
@media (max-width: 820px) { .cg-pm-fila2 { margin-top: 18px; } }

/* ===================================================================== MI PERFIL · TUS DATOS (encargo 066 · tarea 4)
   `maqueta/paginas/per_datos.html`: los grupos plegables a la izquierda (cuenta y quién los ve en la propia fila) y, a la derecha,
   el avance en piedra con lo que más falta. Los grupos siguen siendo los `pf-grupo` de siempre: los ids y los guardados no cambian. */
.cg-dat-izq { flex: 1 1 0; min-width: 0; padding: 20px 26px 10px; }
.cg-dat-izq .pf-grupo > summary { padding: 13px 2px; }
.cg-dat-izq .pf-grupo-tit { flex: 0 0 auto; font-size: 20px; font-weight: 600; }
.pf-grupo-quien { flex: 1 1 auto; font-size: 12px; color: var(--cg-texto-3, #666B64); }
.cg-dat-der { flex: 0 0 360px; padding: 20px 24px; display: flex; flex-direction: column; }
.cg-dat-cab { display: flex; align-items: center; gap: 14px; }
.cg-dat-cab .cg-k { margin-bottom: 4px; }
.cg-dat-ico { background: #EDF1EC; box-shadow: inset 0 0 0 1px rgba(46, 107, 87, .25); }
.cg-dat-ico svg { stroke: #2E6B57; }
.cg-dat-barra { flex: none; height: 10px; margin-top: 12px; }
.cg-dat-cuenta { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dat-cuenta b { color: var(--cg-bronce-osc, #806230); }
.cg-dat-falta { margin: 16px 0 12px; padding: 12px 14px; border-radius: 7px; background: var(--cg-superficie-alta, #FFFDF8); border: 1px solid rgba(128, 98, 48, .22); font-size: 12.5px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-dat-falta b { color: var(--cg-texto, #172B26); }
.cg-dat-pie { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--cg-texto-3, #666B64); }
@media (max-width: 820px) {
  .cg-dat-izq { padding: 18px 16px 8px; }
  .cg-dat-der { flex: 1 1 auto; }
  .cg-dat-izq .pf-grupo > summary { flex-wrap: wrap; }
  .pf-grupo-quien { flex-basis: 100%; order: 3; }
}

/* ===================================================================== MI PERFIL · AYUDA (encargo 066 · tarea 5)
   `maqueta/paginas/per_ayuda.html`: preguntas y corrección a la izquierda (mismos `pf-grupo` y mismos ids de siempre) y, a la
   derecha en piedra, a quién escribir con la foto real de cada persona. */
.cg-dat-izq .ay-resp { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--cg-texto-2, #5F645C); }
.cg-ay-corr-cab { margin: 18px 0 8px; }
.cg-ay-sec2 { font-size: 22px; }
.cg-ay-der { flex: 0 0 380px; padding: 20px 24px; }
.cg-ay-fila { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cg-ay-fila img { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px rgba(128, 98, 48, .25); }
.cg-ay-quien { flex: 1 1 auto; min-width: 0; }
.cg-ay-quien b { display: block; font-size: 14px; }
.cg-ay-quien span { font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-ay-otros { margin-top: 16px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-ay-otros ul { margin: 6px 0 0; padding-left: 18px; }
.cg-ay-nota { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-3, #666B64); }
@media (max-width: 820px) { .cg-ay-der { flex: 1 1 auto; } }

/* ==========================================================================
   068 · TAREA 2 — Mi ruta · Hoy con la forma de la maqueta (ruta_hoy.html).
   La campaña que manda es una tarjeta sobre piedra con su pista; las otras dos medidas, cajitas de escalón.
   ========================================================================== */
.cg-piedra-fondo { background-color: var(--cg-superficie); background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.cg-bronce { color: var(--cg-bronce-osc); }
.cg-ruta-otras { margin-top: 26px; }
.cg-ruta-card { padding: 22px 28px 18px; }
.cg-ruta-cab { display: flex; align-items: flex-start; gap: 18px; }
.cg-ruta-k { margin: 0 0 6px; letter-spacing: 2.2px; }
.cg-ruta-card > .cg-ruta-cab .cg-ruta-k { color: var(--cg-bronce); }
.cg-ruta-nombre { font-size: 30px; }
.cg-ruta-llevas { margin-left: auto; text-align: right; flex: none; }
.cg-ruta-llevas .cg-k { color: var(--cg-texto-2); margin-bottom: 4px; }
.cg-ruta-conf { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); }

/* la pista de escalones */
.cg-pista { position: relative; margin: 38px 6px 4px; }
.cg-riel, .cg-lleno, .cg-prov { position: absolute; left: 0; top: 21px; height: 6px; border-radius: 999px; }
.cg-riel { right: 0; background: color-mix(in srgb, var(--cg-bronce-osc) 14%, var(--cg-superficie)); box-shadow: inset 0 1.5px 3px rgba(80, 62, 34, .28), inset 0 -1px 0 rgba(255, 255, 255, .7); }
.cg-lleno { background: linear-gradient(90deg, var(--verde-f), var(--verde)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.cg-prov { background: repeating-linear-gradient(90deg, var(--cg-bronce) 0 8px, color-mix(in srgb, var(--cg-bronce) 35%, transparent) 8px 13px); }
.cg-nodos { position: relative; display: grid; }
.cg-nodo-c { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cg-nodo { position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cg-superficie-alta); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 2px var(--cg-linea-fuerte), 0 2px 6px rgba(60, 42, 18, .12); }
.cg-nodo.hecho { background: linear-gradient(180deg, var(--verde-f), var(--verde)); color: var(--cg-superficie-alta); box-shadow: 0 0 0 4px var(--verde-a), 0 3px 8px rgba(31, 99, 73, .35); }
.cg-nodo.prov { font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: 1px; }
.cg-nodo.sig { box-shadow: inset 0 0 0 2.5px var(--cg-bronce), 0 0 0 6px rgba(179, 148, 92, .18), 0 0 18px rgba(214, 170, 90, .45); }
.cg-nodo.bloq b { font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700; color: var(--cg-texto-3); font-variant-numeric: lining-nums; }
.cg-obj { margin-top: 12px; font-size: 17px; font-weight: 800; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cg-uni { margin-top: 1px; font-size: 12px; color: var(--cg-texto-3); }
.cg-prem { margin-top: 7px; font-size: 12px; font-weight: 800; color: var(--cg-bronce-osc); white-space: nowrap; }
.cg-nodo-c.bloq .cg-obj { color: var(--cg-texto-2); }
.cg-nota { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); letter-spacing: .4px; }
.cg-marcador { position: absolute; top: -30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.cg-marcador span { padding: 4px 9px; border-radius: 6px; background: var(--cg-verde); color: var(--cg-bronce-claro); font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 10px rgba(16, 60, 52, .3); }
.cg-marcador i { width: 2px; height: 20px; background: var(--cg-verde); }
.cg-marcador i::after { content: ''; display: block; width: 10px; height: 10px; margin: 18px 0 0 -4px; border-radius: 50%; background: var(--cg-bronce); box-shadow: 0 0 0 3px var(--cg-superficie-alta), 0 0 0 4px var(--cg-bronce); }
/* el tooltip de cada escalón (T28.2) se conserva: qué cuenta y cuándo se paga */
.cg-tip { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; pointer-events: none;
  width: 232px; background: var(--cg-superficie-alta); border: 1px solid var(--cg-bronce); border-radius: var(--r); padding: 12px 14px; text-align: left; box-shadow: 0 12px 26px rgba(23, 43, 38, .22); z-index: 9; }
.cg-tip b { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 800; color: var(--cg-texto); }
.cg-tip span { display: block; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2); }
.cg-nodo-c:hover .cg-tip, .cg-nodo-c:focus-within .cg-tip { opacity: 1; visibility: visible; transform: translate(-50%, -8px); }
.cg-nodo-c:focus-visible, .cg-chip-e:focus-visible { outline: 2px solid var(--cg-foco); outline-offset: 4px; border-radius: var(--r-s); }
.cg-ruta-pie { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(128, 98, 48, .18); font-size: 12px; color: var(--cg-texto-2); }
.cg-ruta-pie b { color: var(--cg-texto); }
.cg-ruta-pie b.cg-bronce { color: var(--cg-bronce-osc); }
.cg-ruta-pie svg { flex: none; color: var(--cg-bronce-osc); }
.cg-ruta-bono { display: inline-flex; align-items: center; gap: 8px; }
.cg-ruta-cuenta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cg-ruta-cuenta svg { color: var(--cg-texto-3); }

/* tipos especiales dentro de la misma tarjeta */
.cg-ruta-esp { margin-top: 18px; }
.cg-ruta-esp-fila { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.cg-ruta-esp .cg-barra { height: 8px; }
.cg-anillo-pista { stroke: var(--cg-papel-3); }
.cg-anillo-lleno { stroke: var(--verde-f); filter: drop-shadow(0 0 8px rgba(179, 148, 92, .6)); }
.cg-anillo-lleno.listo { stroke: var(--cg-bronce); }
.cg-anillo-cifra { fill: var(--cg-texto); font-family: var(--fuente-titulos); font-weight: 600; }
.cg-anillo-meta { fill: var(--cg-texto-2); font-family: var(--fuente); }
.cg-ruta-estado { font-size: 28px; }
.cg-ruta-ranking { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cg-ruta-pos { display: inline-flex; align-items: flex-end; gap: 3px; }
.cg-ruta-pos-o { font-family: var(--fuente-titulos); font-size: 24px; color: var(--cg-bronce-osc); padding-bottom: 4px; }
.cg-dia-caja { width: 38px; height: 38px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 1px solid rgba(128, 98, 48, .3); color: var(--cg-texto-3); background: var(--cg-superficie-alta); }
.cg-dia-caja.si { background: var(--verde-a); border-color: rgba(46, 122, 98, .35); color: var(--cg-ok); }
.cg-dia-caja.prov { border: 1px dashed var(--cg-bronce); color: var(--cg-bronce-osc); }

/* las otras dos medidas */
.cg-ruta-sec { padding: 18px 20px 16px; min-width: 0; }
.cg-ruta-sec-cab { display: flex; align-items: center; gap: 12px; }
.cg-ruta-sec-cab .cg-ico-c { margin-top: 0; }
.cg-ruta-sec-cab .cg-ruta-k { margin-bottom: 3px; color: var(--cg-texto-2); white-space: normal; }
.cg-ruta-sec-nombre { display: block; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; color: var(--cg-texto); }
.cg-ruta-sec-cifra { margin-left: auto; text-align: right; flex: none; }
.cg-ruta-sec-cifra .cg-ruta-conf { font-size: 12px; }
.cg-chips { display: flex; gap: 8px; margin-top: 12px; }
.cg-chip-e { flex: 1 1 0; min-width: 0; padding: 9px 10px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .24); background: var(--cg-superficie-alta); text-align: center; }
.cg-chip-e b { display: block; font-size: 14px; font-weight: 800; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-chip-e span { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; color: var(--cg-bronce-osc); }
.cg-chip-e em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--cg-texto-2); }
.cg-chip-e.si { background: var(--verde-a); border-color: rgba(46, 122, 98, .35); }
.cg-chip-e.si b, .cg-chip-e.si em { color: var(--cg-ok); }
.cg-chip-e.sig { border-color: var(--cg-bronce); box-shadow: 0 0 0 3px rgba(179, 148, 92, .15); }
.cg-ruta-ayuda { margin-top: 10px; font-size: 12px; color: var(--cg-texto-3); }
.ruta-secundarias .cg-ruta-sec + .cg-ruta-sec { margin-top: 0; }

@media (max-width: 820px) {
  .cg-ruta-card { padding: 18px 16px 14px; }
  .cg-ruta-cab { gap: 12px; }
  .cg-ruta-nombre { font-size: 25px; }
  .cg-pista { margin: 34px 0 4px; }
  .cg-nodo { width: 38px; height: 38px; }
  .cg-riel, .cg-lleno, .cg-prov { top: 16px; }
  .cg-obj { font-size: 14px; }
  .cg-prem { font-size: 12px; }
  .cg-marcador span { font-size: 12px; }
  .cg-tip { width: 200px; }
  .cg-ruta-cuenta { margin-left: 0; flex-basis: 100%; }
  .cg-chips { flex-wrap: wrap; }
  .cg-ruta-sec { padding: 16px 14px; }
}