/* ============================================================================
   COGNITLÁN — BASE CSS  (vLogo-181, actualizado 2025-11-04)
   ---------------------------------------------------------------------------
   ⚙️  Estilos globales (paleta, layout, header/footer, menú, utilidades).
   • Usa cache-busting en HTML:
     <link rel="stylesheet" href="/css/cognitlan_base.css?v=logo-181">
   ========================================================================== */

/* ¶1. Paleta */
:root{
  --cg-green: #07352c;   /* Verde Cognitlán */
  --cg-gold:  #d2a24c;   /* Dorado */
  --cg-bg:    #f7f9f8;   /* Fondo claro */
  --cg-ink:   #0b132b;   /* Texto principal */
  --cg-muted: #60697b;   /* Texto secundario */
  --cg-line:  #e6ecf4;   /* Líneas suaves */
  --cg-white: #ffffff;
  --cg-shadow: 0 12px 24px rgba(7,53,44,0.12);
}

/* ¶2. Reset básico */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }
body{
  background:var(--cg-bg);
  color:var(--cg-ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ¶3. Helpers */
.cg-container{ width:min(1120px, 100% - 32px); margin-inline:auto; }
.cg-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cg-click{ cursor:pointer; user-select:none; }

/* ¶4. Header (compacto estable) */
#cg_header{
  background:var(--cg-green);
  color:var(--cg-white);
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
#cg_header .cg-bar{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; padding:12px 16px;
}
#cg_header .cg-left,
#cg_header .cg-right{ display:flex; align-items:center; gap:12px; }

/* Logo SIN hacks de transform (evita “hueco” arriba) */
#cg_logo{ display:inline-flex; align-items:center; line-height:0; overflow:visible; }
#cg_logo img{
  display:block;
  height:56px;           /* tamaño visual */
  width:auto;
  transition:height .2s ease;
}

/* ¶5. Contenido principal */
#cg_content{ flex:1; padding:24px 0; }

/* ¶6. Footer */
#cg_footer{
  background:var(--cg-green);
  color:var(--cg-white);
  padding:16px 0;
  margin-top:auto;
  font-size:14px;
}
#cg_footer .cg-container{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.cg-footer-links{ display:flex; gap:16px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.cg-footer-links a{ color:var(--cg-white); text-decoration:none; }
.cg-footer-links a:hover{ text-decoration:underline; }

/* ¶7. Botón hamburguesa + panel */
/* Botón hamburguesa */
.cg-menu-btn{
  width:44px; height:44px;
  border:none; border-radius:10px;
  background:rgba(255,255,255,0.10);
  color:var(--cg-white);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.cg-menu-btn:hover{ background:rgba(255,255,255,0.16); }
.cg-menu-btn:active{ transform:scale(0.98); }

/* Icono hamburguesa */
.cg-menu-icon,
.cg-menu-icon::before,
.cg-menu-icon::after{
  content:""; display:block; width:20px; height:2px;
  background:currentColor; border-radius:2px;
}
.cg-menu-icon{ position:relative; }
.cg-menu-icon::before{ position:absolute; top:-6px; }
.cg-menu-icon::after{ position:absolute; top:6px; }

/* Panel del menú — versión limpia y original */
.cg-menu-panel{
  position:absolute;
  right:16px;
  top:72px;
  background:var(--cg-white);           /* ← de nuevo en blanco */
  color:var(--cg-ink);
  border:1px solid var(--cg-line);
  border-radius:12px;
  box-shadow:0 14px 32px rgba(0,0,0,0.08); /* ← sombra original neutra */
  width:200px;
  padding:0.55rem 0.35rem;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  font-size:13px;
}
.cg-menu-panel.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Lista */
.cg-menu-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* Ítems principales */
.cg-menu-item > a,
.cg-menu-item > button,
.cg-menu-group-toggle{
  display:block;
  width:100%;
  text-align:left;
  border:none;
  background:none;
  cursor:pointer;

  font-weight:600;   /* Bold */
  font-size:13px;
  padding:0.26rem 0.85rem;
  color:#0f172a;
  border-radius:6px;
  text-decoration:none;
}
.cg-menu-item > a:hover,
.cg-menu-item > button:hover,
.cg-menu-group-toggle:hover{
  background:#f3f4f6;     /* hover suave SOLO cuando pasa el cursor */
}

/* Submenús */
.cg-menu-group{
  padding-top:0.1rem;
}

.cg-submenu{
  margin:0.04rem 0 0.25rem 0;
  padding-left:0.75rem;
  border-left:1px solid #e5e7eb;
  list-style:none;              /* ← quita las viñetas huecas del UL */
}


/* Puntito sólido + texto pegado */
.cg-submenu-item{
  position:relative;
  padding-left:0.42rem; /* ← palabra casi tocando la viñeta */
}

.cg-submenu-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:0.23rem;
  height:0.23rem;
  background:#4b5563;
  border-radius:999px;
}

.cg-submenu-item a{
  display:block;
  padding:0.12rem 0.35rem;
  font-size:12px;
  font-weight:500;
  color:#4b5563;
  border-radius:4px;
  text-decoration:none;
}
.cg-submenu-item a:hover{
  background:#e5f2ec;
  color:#0b1720;
}

/* Divider */
.cg-divider{
  margin:0.35rem 0 0.3rem;
  border-top:1px solid #e5e7eb;
}

/* Bloque inferior ordenado: Registro → Ingresar → Privacidad → Términos → Cerrar sesión */
.cg-menu-list > .cg-divider + .cg-menu-item,
.cg-menu-list > .cg-divider + .cg-menu-item + .cg-menu-item,
.cg-menu-list > .cg-divider + .cg-menu-item + .cg-menu-item + .cg-menu-item,
.cg-menu-list > .cg-divider + .cg-menu-item + .cg-menu-item + .cg-menu-item + .cg-menu-item{
  background:#f9fafb;
  border-radius:10px;
}

..cg-menu-list > .cg-divider + .cg-menu-item a,
.cg-menu-list > .cg-divider + .cg-menu-item button{
  padding:0.3rem 0.85rem;
  font-size:12.5px;
  font-weight:500;
  color:#0f172a;
  text-decoration:none;        /* ← sin subrayado */
}


.cg-menu-list > .cg-divider + .cg-menu-item a:hover,
.cg-menu-list > .cg-divider + .cg-menu-item button:hover{
  background:#e5e7eb;
  border-radius:8px;
}

/* ¶8. Alineación derecha del head (Meta + Usuario) */
.actions-right{ display:flex; align-items:center; gap:10px; }
.meta-wrap{ position:relative; display:flex; align-items:center; }

/* Chip Meta */
.meta-chip{
  border:1px solid var(--cg-line); background:#fff; color:var(--cg-ink);
  padding:6px 12px; border-radius:999px; font-size:13px; cursor:pointer;
  line-height:1; display:inline-flex; align-items:center; gap:6px;
}

/* Popover Meta (para Flatpickr + acciones) */
.meta-pop{
  position:absolute; right:0; top:38px; z-index:50;
  background:#fff; border:1px solid var(--cg-line); border-radius:12px;
  box-shadow:var(--cg-shadow); padding:12px; width:260px; display:none;
}
.meta-pop.open{ display:block; }
.meta-pop .row{ display:flex; align-items:center; gap:8px; margin-top:8px; }

/* ¶9. Botones (marca) */
.btn{ border:1px solid var(--cg-line); background:#fff; color:var(--cg-ink); padding:8px 12px; border-radius:10px; font:inherit; cursor:pointer; }
.btn:hover{ background:#f6f8f9; }
.btn-green{ background:var(--cg-green); color:#fff; border-color:var(--cg-green); }
.btn-green:hover{ filter:brightness(1.05); }
.btn-outline-green{ color:var(--cg-green); border-color:var(--cg-green); background:#fff; }
.btn-outline-green:hover{ background:#e7f3f0; }
.btn-red{ background:#c62828; color:#fff; border-color:#c62828; }
.btn-red:hover{ filter:brightness(1.05); }
.btn-ghost{ border-color:transparent; background:transparent; }

/* ¶10. Contenedores de tarjeta (review) */
.card-wrap{
  background:#fff; border:1px solid var(--cg-line); border-radius:18px; padding:16px;
  box-shadow:0 8px 20px rgba(7,53,44,0.08);
  display:grid; grid-template-columns:1fr; gap:12px;
}
.card-toolbar{ display:flex; gap:8px; justify-content:flex-end; }
.nav-wrap{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; }
.nav-index{ color:var(--cg-muted); font-size:14px; }

/* ¶11. Frente / respuesta / hint */
.front{ font-size:28px; font-weight:800; color:var(--cg-ink); text-align:center; padding:12px 0; }
.meaning{ font-size:18px; color:var(--cg-ink); text-align:center; }
.ctx{ color:var(--cg-muted); font-size:15px; line-height:1.5; max-width:850px; margin:0 auto; }
.reveal-wrap{ display:flex; justify-content:center; gap:8px; margin:6px 0 4px; }
.hint-pop{ display:none; background:#fff8e1; color:#6b4e00; border:1px solid #ffe082; border-radius:10px; padding:6px 10px; font-size:13px; }
.hint-pop.show{ display:inline-block; }

/* ¶12. Modal de edición */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:1200; }
.modal-backdrop.open{ display:flex; }
.modal{
  width:min(720px,96vw); background:#fff; border-radius:16px; border:1px solid var(--cg-line);
  box-shadow:var(--cg-shadow); padding:16px; display:flex; flex-direction:column; gap:12px;
}
.modal h3{ margin:0; font-size:20px; }
.modal .grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.field label{ display:block; font-size:13px; color:var(--cg-muted); margin-bottom:4px; }
.field input[type="text"], .field input[type="url"], .field textarea{
  width:100%; border:1px solid var(--cg-line); border-radius:10px; padding:10px; font:inherit; background:#fff;
}
.field textarea{ min-height:90px; resize:vertical; }
.modal-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; }
.danger-zone{ display:flex; gap:8px; align-items:center; }

/* ¶13. Responsivo */
@media (max-width:640px){
  #cg_logo img{ height:48px; }
  #cg_header .cg-bar{ padding:10px 12px; }
}


/* ===== Hue & Clue — Layout del juego ===== */

.cg-game-card {
  max-width: 1100px;
  margin: 1.2rem auto;
  padding: 1.25rem 1.5rem;
}

/* Fila principal: instrucciones + área de juego + HUD (si se necesita) */
.cg-game-main-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Columna izquierda: escenario (Ignosaurio + colores) */
.cg-game-stage-col {
  flex: 2;
}

.cg-game-stage {
  min-height: 260px;
  border-radius: 16px;
  padding: 1.5rem;
  background: #f5f7f6;
}

.cg-game-stage--placeholder h3 {
  margin-top: 0;
}

/* Columna derecha: HUD */
.cg-game-hud-col {
  flex: 1;
}

/* HUD en tarjeta, usando grid para ahorrar espacio:
   Fila 1 → Jugador (col 1) + Nivel (col 2)
   Fila 2 → Vidas (col 1-2)
   Fila 3 → Puntos (col 1) + Récord (col 2)
*/
.cg-hud-card,
.cg-hud-card-fullwidth {
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);

  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-auto-rows: auto;
  column-gap: 1rem;
  row-gap: 0.4rem;
  align-items: flex-start;
}

/* Secciones del HUD más compactas */
.cg-hud-card .cg-hud-section,
.cg-hud-card-fullwidth .cg-hud-section {
  margin: 0;
  padding: 0.15rem 0;
}

/* Jugador (1ª sección) → col 1 */
.cg-hud-card .cg-hud-section:nth-child(1),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(1) {
  grid-column: 1 / 2;
}

/* Nivel (2ª sección) → col 2 */
.cg-hud-card .cg-hud-section:nth-child(2),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(2) {
  grid-column: 2 / 3;
}

/* Vidas (3ª sección) → ancho completo */
.cg-hud-card .cg-hud-section:nth-child(3),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(3) {
  grid-column: 1 / 3;
}

/* Puntos (4ª sección) → col 1 */
.cg-hud-card .cg-hud-section:nth-child(4),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(4) {
  grid-column: 1 / 2;
}

/* Récord personal (5ª sección) → col 2 */
.cg-hud-card .cg-hud-section:nth-child(5),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(5) {
  grid-column: 2 / 3;
}

.cg-hud-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  margin-bottom: 0.15rem;
}

.cg-hud-value {
  font-size: 0.98rem;
}

/* Vidas — búhos en fila, el DOBLE de tamaño */
.cg-lives-bar {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.cg-life-owl {
  width: 112px;   /* antes 56px: doble tamaño */
  height: auto;
  object-fit: contain;
}

/* Récord en cuadro destacado pero más discreto */
.cg-best-special {
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  background: #f0faf4;
}

/* Badge de suscripción debajo del HUD */
.cg-subscription-badge {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: #444;
}

.cg-subscription-full {
  color: #0b703d;
  font-weight: 600;
}

.cg-subscription-free {
  color: #a15a00;
  font-weight: 600;
}

/* ===== Hue & Clue — Layout del juego ===== */

.cg-game-card{
  max-width:1100px;
  /* Más pegado al header, pero con un respiro pequeño */
  margin:0.6rem auto 1.2rem;
  padding:1.25rem 1.6rem;
}

.cg-game-main-row{
  display:flex;
  gap:2rem;
  align-items:flex-start;
}

/* Columna izquierda: escenario del juego */
.cg-game-stage-col{ flex:2; }

.cg-game-stage{
  min-height:260px;
  border-radius:16px;
  padding:1.6rem;
  background:#f5f7f6;
}

.cg-game-stage--placeholder h3{
  margin-top:0;
}

/* Columna derecha: HUD */
.cg-game-hud-col{ flex:1; }

/* HUD: tarjeta compacta en gris claro (≈36%) */
.cg-hud-card,
.cg-hud-card-fullwidth{
  border-radius:18px;
  padding:0.9rem 1.2rem;
  background:#4a525d;        /* gris más claro que el anterior */
  color:#ffffff;
  box-shadow:0 6px 18px rgba(15,23,42,0.36);

  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  column-gap:1.25rem;
  row-gap:0.4rem;
}

.cg-hud-card .cg-hud-section,
.cg-hud-card-fullwidth .cg-hud-section{
  margin:0;
}

/* 1) Jugador ocupa todo el ancho */
.cg-hud-card .cg-hud-section:nth-child(1),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(1){
  grid-column:1 / 3;
}

/* 2) Nivel: columna derecha */
.cg-hud-card .cg-hud-section:nth-child(2),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(2){
  grid-column:2 / 3;
}

/* 3) Vidas: fila completa debajo */
.cg-hud-card .cg-hud-section:nth-child(3),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(3){
  grid-column:1 / 3;
}

/* 4) Puntos y 5) Récord en la misma fila */
.cg-hud-card .cg-hud-section:nth-child(4),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(4){
  grid-column:1 / 2;
}
.cg-hud-card .cg-hud-section:nth-child(5),
.cg-hud-card-fullwidth .cg-hud-section:nth-child(5){
  grid-column:2 / 3;
}

/* Etiquetas del HUD: todas en negritas */
.cg-hud-label{
  font-size:0.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#f3f4f6;
  margin-bottom:0.15rem;
}

.cg-hud-value{
  font-size:0.98rem;
}

/* Jugador y Nivel con “pastilla” blanca para que se vean igual */
.cg-hud-card .cg-hud-section:nth-child(1) .cg-hud-value,
.cg-hud-card-fullwidth .cg-hud-section:nth-child(1) .cg-hud-value{
  display:inline-flex;
  align-items:center;
  padding:0.4rem 0.8rem;
  border-radius:999px;
  background:#ffffff;
  color:#111827;
}

.cg-hud-card .cg-hud-section:nth-child(2) select,
.cg-hud-card-fullwidth .cg-hud-section:nth-child(2) select{
  width:100%;
  border-radius:999px;
  padding:0.35rem 0.75rem;
}

/* Vidas: búhos grandes en fila */
.cg-lives-bar{
  display:flex;
  gap:0.35rem;
  align-items:center;
}

.cg-life-owl{
  width:112px;              /* doble que el original */
  height:auto;
  object-fit:contain;
}

/* Puntos + Récord con mismo tipo de contenedor (sin recuadro extra) */
.cg-best-special{
  background:transparent;
  padding:0;
  border-radius:0;
}

/* Badge de suscripción, por si lo usamos luego */
.cg-subscription-badge{
  margin-top:0.6rem;
  font-size:0.82rem;
  color:#444;
}

/* Responsive básico */
@media (max-width:900px){
  .cg-game-main-row{ flex-direction:column; }
  .cg-hud-card,
  .cg-hud-card-fullwidth{
    grid-template-columns:1fr 1fr;
  }
}




/* ¶14. Tipografía y bloques de contenido — Catálogo Plantilla */
.cg-h1{
  font-size:2.1rem;
  font-weight:800;
  margin:0 0 0.6rem;
}
.cg-h2{
  font-size:1.6rem;
  font-weight:700;
  margin:1.4rem 0 0.4rem;
}
.cg-h3{
  font-size:1.1rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin:1.2rem 0 0.4rem;
  color:var(--cg-muted);
}

.cg-lead{
  font-size:1.02rem;
  color:var(--cg-muted);
  margin:0 0 1rem;
}
.cg-body{
  font-size:0.96rem;
  margin:0 0 0.75rem;
}
.cg-note{
  font-size:0.83rem;
  color:var(--cg-muted);
}

/* Contenedores genéricos de sección */
.cg-sec{
  padding:1.5rem 1.75rem;
  border-radius:18px;
  background:var(--cg-white);
  border:1px solid var(--cg-line);
  box-shadow:0 6px 18px rgba(7,53,44,0.06);
  margin-bottom:1.25rem;
}
.cg-sec-soft{
  padding:1.25rem 1.5rem;
  border-radius:16px;
  background:#f4f7f6;
  border:1px dashed var(--cg-line);
  margin-bottom:1.1rem;
}

/* >>> AQUI VA EL NUEVO BLOQUE <<< */
.cg-sec-green{
  padding:1.6rem 1.8rem;
  border-radius:22px;
  background:var(--cg-green);
  color:var(--cg-white);
  box-shadow:0 12px 28px rgba(7,53,44,0.25);
}

.cg-sec-green h2,
.cg-sec-green h3{
  color:var(--cg-white);
}

.cg-sec-green p{
  color:#e6f2ef;
}


.cg-sec-strong{
  padding:1.75rem;
  border-radius:22px;
  background:var(--cg-white);
  border:1px solid var(--cg-line);
  box-shadow:0 10px 26px rgba(7,53,44,0.12);
}


.cg-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:center;
}

/* Chips / etiquetas cortas */
.cg-chip{
  font-size:0.8rem;
  padding:0.25rem 0.7rem;
  border-radius:999px;
  border:1px solid var(--cg-green);
  background:var(--cg-green);
  color:var(--cg-gold);
}






/* ¶15. Botones canónicos (usa siempre estos) */
.cg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  border-radius:999px;
  padding:0.55rem 1.2rem;
  font-size:0.95rem;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .06s ease;
}
.cg-btn:active{
  transform:scale(0.98);
}

/* Principal: verde sólido */
.cg-btn-pri{
  background:var(--cg-green);
  color:var(--cg-white);
  border-color:var(--cg-green);
  box-shadow:0 6px 16px rgba(7,53,44,0.24);
}
.cg-btn-pri:hover{
  filter:brightness(1.05);
}

/* Secundario: negro con blanco */
.cg-btn-sec{
  background:#000000;
  color:var(--cg-white);
  border-color:#000000;
}
.cg-btn-sec:hover{
  background:#111111;
  color:var(--cg-white);
}



/* Terciario: dorado con verde Cognitlán */
.cg-btn-ter{
  background:var(--cg-gold);
  color:var(--cg-green);
  border-color:var(--cg-gold);
}
.cg-btn-ter:hover{
  background:#c2913f; /* dorado un poquito más oscuro */
  color:var(--cg-green);
}


/* Opcional: peligro (borrar, cancelar suscripción, etc.) */
.cg-btn-danger{
  background:#c62828;
  color:var(--cg-white);
  border-color:#c62828;
}
.cg-btn-danger:hover{
  filter:brightness(1.05);
}


/* Botón premium dorado (CTA secundario importante) */
.cg-btn-gold{
  background:var(--cg-gold);
  color:var(--cg-green);
  border-color:var(--cg-gold);
  box-shadow:0 6px 16px rgba(210,162,76,0.35);
}
.cg-btn-gold:hover{
  filter:brightness(1.06);
}

/* Outline dorado — para casos especiales */
.cg-btn-gold-outline{
  background:var(--cg-white);
  color:var(--cg-gold);
  border-color:var(--cg-gold);
}
.cg-btn-gold-outline:hover{
  background:#fff8e5;
}



/* ¶16. Links canónicos */
.cg-link{
  color:#0b66c3;
  text-decoration:none;
  font-weight:500;
}
.cg-link:hover{
  text-decoration:underline;
}

/* Mini tag para niveles, tipo de cuenta, etc. */
.cg-tag{
  text-transform:uppercase;
  font-size:0.72rem;
  letter-spacing:0.08em;
  padding:0.2rem 0.5rem;
  border-radius:999px;
  background:var(--cg-green);
  color:var(--cg-white);
}

/* Chips informativos (plan, etc.) */
.cg-chip{
  font-size:0.8rem;
  padding:0.25rem 0.7rem;
  border-radius:999px;
  border:1px solid var(--cg-green);
  background:var(--cg-green);
  color:var(--cg-white);
}