/* =============================================================================
   «Tu Cooperativa por Dentro» — estilos.

   El público va de los 15 a los 70 y buena parte llega desde el teléfono,
   muchos con la vista cansada. De ahí tres decisiones que no se negocian:
   tipografía grande, líneas cortas y todo lo que se toca del tamaño de un dedo
   (52 px mínimo). El texto va corto a propósito: aquí manda la imagen.

   Los colores salen del emblema de los dos pinos —pino verde sobre redondel
   amarillo— y el arcoíris de la vieja bandera de la ACI se reserva para los
   siete principios, que es donde significa algo.
   ========================================================================== */

.curso-libre{
  --co-pino:#1B6E3C;  --co-pino-osc:#135029;  --co-pino-cla:#2E9757;
  --co-hoja:#E8F4EC;  --co-hoja-2:#D3EADC;
  --co-oro:#F2B705;   --co-oro-osc:#946A02;   --co-oro-cla:#FEF6DF;
  --co-tinta:#16211B; --co-gris:#55665C;      --co-gris-2:#84968C;
  --co-borde:#DCE6E0; --co-fondo:#F6FAF7;     --co-papel:#fff;
  --co-mal:#C62828;   --co-mal-nube:#FDECEC;
  --co-ojo:#1D4ED8;   --co-ojo-nube:#EAF0FE;
  --co-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Los siete principios llevan los colores de la bandera de la ACI, en orden. */
  --p1:#D32F2F; --p2:#EF6C00; --p3:#F2B705; --p4:#2E7D32;
  --p5:#1565C0; --p6:#4527A0; --p7:#6A1B9A;

  font-size:17.5px; line-height:1.72;
}

.curso-libre code,.curso-libre pre{
  font-variant-ligatures:none; font-feature-settings:"liga" 0,"clig" 0,"calt" 0;
  font-family:var(--co-mono);
}
.curso-libre code{ font-size:.9em; background:var(--co-hoja); color:var(--co-pino-osc);
  border-radius:4px; padding:1px 6px; }

/* Párrafos cortos y gordos: es lo que se lee en un teléfono a las diez de la noche. */
.curso-libre p{ max-width:56ch; }
.entradilla{ font-size:1.16rem; color:var(--co-gris); border-left:5px solid var(--co-oro);
  padding-left:18px; margin:0 0 30px; line-height:1.68; max-width:58ch; }

/* ==============================================================  imágenes === */

.co-foto{ margin:26px 0; }
.co-foto img{ width:100%; display:block; border-radius:16px; background:var(--co-hoja); }
.co-foto figcaption{ margin-top:10px; font-size:.92rem; color:var(--co-gris-2);
  line-height:1.6; max-width:60ch; }
.co-foto figcaption b{ color:var(--co-gris); }
.co-foto.recorte img{ aspect-ratio:16/9; object-fit:cover; }

/* Dibujos y diagramas: van sobre papel, con aire, y nunca se recortan. */
.co-dibujo{ margin:26px 0; padding:22px; background:var(--co-papel);
  border:1px solid var(--co-borde); border-radius:18px; }
.co-dibujo svg{ width:100%; height:auto; display:block; }
.co-dibujo figcaption{ margin-top:14px; font-size:.95rem; color:var(--co-gris);
  line-height:1.6; text-align:center; }

/* =================================================================  cajas === */

.co-caja{ border:1px solid var(--co-borde); border-radius:18px; padding:20px 22px;
  margin:26px 0; background:var(--co-papel); }
.co-caja > :first-child{ margin-top:0; }
.co-caja > :last-child{ margin-bottom:0; }
.co-caja h4{ font-size:1.08rem; margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.co-caja h4 .emo{ font-size:1.5rem; line-height:1; }

.co-ojo{   background:var(--co-hoja);     border-color:#C3DFCE; }
.co-clave{ background:var(--co-oro-cla);  border-color:#F2E2B0; }
.co-alerta{background:var(--co-mal-nube); border-color:#F5CFCF; }
.co-dato{  background:var(--co-ojo-nube); border-color:#CFDCFB; }

.co-ojo h4{ color:var(--co-pino-osc); }
.co-clave h4{ color:var(--co-oro-osc); }
.co-alerta h4{ color:var(--co-mal); }
.co-dato h4{ color:var(--co-ojo); }

/* La frase que hay que recordar. Una por lección como mucho. */
.co-grande{ font-size:1.42rem; line-height:1.45; font-weight:600; color:var(--co-pino-osc);
  border-left:6px solid var(--co-oro); padding:6px 0 6px 20px; margin:30px 0; max-width:24ch; }

/* Lo que dice un socio de verdad. */
.co-voz{ border-left:4px solid var(--co-pino-cla); padding:4px 0 4px 18px; margin:26px 0;
  font-style:italic; color:var(--co-gris); max-width:54ch; }
.co-voz cite{ display:block; font-style:normal; font-size:.88rem; color:var(--co-gris-2);
  margin-top:8px; }

/* ==========================================================  comparaciones === */

.co-dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:16px; margin:26px 0; }
.co-dos > *{ min-width:0; margin:0; }

.co-frente{ display:grid; gap:1px; background:var(--co-borde); border:1px solid var(--co-borde);
  border-radius:16px; overflow:hidden; margin:26px 0; }
.co-frente .fila{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1px; background:var(--co-borde); }
.co-frente .fila > div{ background:var(--co-papel); padding:15px 17px; font-size:1rem; }
.co-frente .cab > div{ background:var(--co-pino); color:#fff; font-weight:700; }
.co-frente .izq{ color:var(--co-gris); }
.co-frente .der{ color:var(--co-tinta); font-weight:600; }

/* ==============================================================  el juego === */

.co-juego{ border:2px solid var(--co-pino); border-radius:20px; overflow:hidden;
  background:var(--co-papel); margin:28px 0; }
.co-juego-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--co-pino); color:#fff; }
.co-juego-tit{ font-weight:700; font-size:1.02rem; }
.co-juego-marca{ margin-left:auto; display:flex; gap:5px; }
.co-juego-marca i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.3); }
.co-juego-marca i.ok{ background:var(--co-oro); }
.co-juego-marca i.no{ background:#F08A8A; }
.co-juego-marca i.hoy{ box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.co-juego-cuerpo{ padding:22px; }
@media (max-width:620px){ .co-juego-cuerpo{ padding:17px 15px; } }

.co-tipo{ font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--co-oro-osc); margin:0 0 8px; }
.co-pregunta{ font-size:1.22rem; line-height:1.45; font-weight:600; color:var(--co-tinta);
  margin:0 0 18px; max-width:44ch; }
.co-pregunta code{ font-size:.86em; }

/* botones de respuesta: grandes, del tamaño del dedo */
.co-ops{ display:grid; gap:11px; }
.co-op{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:13px; align-items:center;
  text-align:left; font:inherit; font-size:1.04rem; line-height:1.5; padding:15px 17px;
  border:2px solid var(--co-borde); border-radius:14px; background:var(--co-fondo);
  color:var(--co-tinta); cursor:pointer; min-height:56px; }
.co-op:hover{ border-color:var(--co-pino-cla); background:var(--co-hoja); }
.co-op .let{ display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:10px; background:var(--co-papel); border:2px solid var(--co-borde);
  font-weight:700; font-size:15px; color:var(--co-gris); }
.co-op:hover .let{ border-color:var(--co-pino-cla); color:var(--co-pino); }
.co-op[disabled]{ cursor:default; }
.co-op.bien{ border-color:var(--co-pino); background:var(--co-hoja); }
.co-op.bien .let{ background:var(--co-pino); border-color:var(--co-pino); color:#fff; }
.co-op.mal{ border-color:var(--co-mal); background:var(--co-mal-nube); }
.co-op.mal .let{ background:var(--co-mal); border-color:var(--co-mal); color:#fff; }
.co-op.apagada{ opacity:.45; }

/* verdadero / falso */
.co-vf{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.co-vf button{ font:inherit; font-size:1.1rem; font-weight:700; padding:17px;
  border-radius:14px; border:2px solid var(--co-borde); background:var(--co-fondo);
  color:var(--co-tinta); cursor:pointer; min-height:62px; }
.co-vf button:hover{ border-color:var(--co-pino-cla); background:var(--co-hoja); }
.co-vf button .emo{ display:block; font-size:1.6rem; line-height:1.2; }
.co-vf button.bien{ border-color:var(--co-pino); background:var(--co-hoja); color:var(--co-pino-osc); }
.co-vf button.mal{ border-color:var(--co-mal); background:var(--co-mal-nube); color:var(--co-mal); }

/* clasificar y emparejar: tocar, no arrastrar */
.co-fichas{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 18px; }
.co-ficha{ font:inherit; font-size:1rem; padding:12px 16px; border-radius:12px; cursor:pointer;
  border:2px solid var(--co-borde); background:var(--co-fondo); color:var(--co-tinta);
  min-height:50px; }
.co-ficha:hover{ border-color:var(--co-pino-cla); background:var(--co-hoja); }
.co-ficha.elegida{ border-color:var(--co-oro); background:var(--co-oro-cla);
  box-shadow:0 0 0 3px rgba(242,183,5,.25); }
.co-ficha.colocada{ display:none; }
.co-ficha.bien{ border-color:var(--co-pino); background:var(--co-hoja); }
.co-ficha.mal{ border-color:var(--co-mal); background:var(--co-mal-nube); }

.co-cubos{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.co-cubo{ border:2px dashed var(--co-borde); border-radius:16px; padding:14px;
  background:var(--co-fondo); min-height:120px; cursor:pointer; }
.co-cubo:hover{ border-color:var(--co-pino-cla); background:var(--co-hoja); }
.co-cubo h5{ margin:0 0 10px; font-size:1rem; color:var(--co-pino-osc); text-align:center; }
.co-cubo .dentro{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.co-cubo .dentro .co-ficha{ font-size:.94rem; padding:9px 12px; min-height:0; }

/* ordenar */
.co-orden{ display:grid; gap:9px; counter-reset:o 0; }
.co-fila{ display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:13px 15px; border:2px solid var(--co-borde);
  border-radius:14px; background:var(--co-fondo); font-size:1rem; }
.co-fila .num{ counter-increment:o; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; background:var(--co-oro-cla);
  color:var(--co-oro-osc); font-weight:700; }
.co-fila .num::before{ content:counter(o); }
.co-fila .mover{ display:flex; gap:6px; }
.co-fila .mover button{ width:44px; height:44px; border-radius:11px; font-size:19px;
  border:2px solid var(--co-borde); background:var(--co-papel); color:var(--co-gris);
  cursor:pointer; line-height:1; }
.co-fila .mover button:hover:not([disabled]){ border-color:var(--co-pino-cla);
  color:var(--co-pino); background:var(--co-hoja); }
.co-fila .mover button[disabled]{ opacity:.3; cursor:default; }
.co-fila.bien{ border-color:var(--co-pino); background:var(--co-hoja); }
.co-fila.mal{ border-color:var(--co-mal); background:var(--co-mal-nube); }

/* emparejar */
.co-pares{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:560px){ .co-pares{ grid-template-columns:1fr; } }
.co-pares .col{ display:grid; gap:9px; align-content:start; }
.co-par{ font:inherit; font-size:.99rem; line-height:1.45; text-align:left; padding:13px 15px;
  border:2px solid var(--co-borde); border-radius:13px; background:var(--co-fondo);
  color:var(--co-tinta); cursor:pointer; min-height:54px; }
.co-par:hover{ border-color:var(--co-pino-cla); background:var(--co-hoja); }
.co-par.elegida{ border-color:var(--co-oro); background:var(--co-oro-cla); }
.co-par.unida{ border-style:solid; }
.co-par .marca{ display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:7px; font-size:12px; font-weight:700;
  margin-right:9px; color:#fff; }
.co-par.bien{ border-color:var(--co-pino); background:var(--co-hoja); }
.co-par.mal{ border-color:var(--co-mal); background:var(--co-mal-nube); }

/* calcular */
.co-calc{ display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.co-calc .moneda{ font-size:1.3rem; font-weight:700; color:var(--co-gris); }
.co-calc input{ font:inherit; font-size:1.3rem; font-weight:700; width:min(240px,100%);
  padding:14px 16px; border:2px solid var(--co-borde); border-radius:13px;
  background:var(--co-fondo); color:var(--co-tinta); min-height:58px;
  font-variant-numeric:tabular-nums; }
.co-calc input:focus{ outline:none; border-color:var(--co-pino);
  box-shadow:0 0 0 4px rgba(27,110,60,.14); background:#fff; }

/* zonas sensibles sobre un dibujo */
.co-zonas{ position:relative; }
.co-zonas svg{ width:100%; height:auto; display:block; }
.co-zona{ cursor:pointer; fill:transparent; stroke:transparent; stroke-width:2; }
.co-zona:hover{ fill:rgba(242,183,5,.22); stroke:var(--co-oro); }
/* El acierto se marca en oro, no en verde: la caja correcta del diagrama suele
   ser ya verde y un realce verde sobre verde no se ve. */
.co-zona.bien{ fill:rgba(242,183,5,.26); stroke:var(--co-oro); stroke-width:4; }
.co-zona.mal{ fill:rgba(198,40,40,.18); stroke:var(--co-mal); stroke-width:4; }

/* respuesta y botones */
.co-dictamen{ margin-top:18px; border-radius:15px; padding:16px 18px; line-height:1.65;
  font-size:1.02rem; border-left:5px solid var(--co-pino); background:var(--co-hoja);
  color:var(--co-pino-osc); }
.co-dictamen.no{ border-left-color:var(--co-mal); background:var(--co-mal-nube); color:#7F1D1D; }
.co-dictamen > b:first-child{ display:block; font-size:1.1rem; margin-bottom:5px; }

.co-pie{ display:flex; gap:11px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.co-bt{ font:inherit; font-size:1.04rem; font-weight:700; padding:15px 24px; border-radius:14px;
  border:2px solid transparent; cursor:pointer; background:var(--co-pino); color:#fff;
  min-height:56px; display:inline-flex; align-items:center; gap:9px; }
.co-bt:hover{ background:var(--co-pino-osc); }
.co-bt:disabled{ opacity:.45; cursor:default; }
.co-bt-suave{ background:var(--co-papel); color:var(--co-gris); border-color:var(--co-borde);
  font-weight:600; }
.co-bt-suave:hover{ background:var(--co-hoja); color:var(--co-pino-osc);
  border-color:var(--co-pino-cla); }
.co-bt-oro{ background:var(--co-oro); color:#3A2B00; }
.co-bt-oro:hover{ background:var(--co-oro-osc); color:#fff; }
@media (max-width:560px){ .co-bt{ width:100%; justify-content:center; } }

/* marcador final */
.co-final{ text-align:center; padding:12px 0 6px; }
.co-final .cifra{ font-size:3.4rem; font-weight:800; line-height:1; color:var(--co-pino);
  font-variant-numeric:tabular-nums; }
.co-final .de{ font-size:1.05rem; color:var(--co-gris-2); margin-top:6px; }
.co-final .frase{ font-size:1.14rem; color:var(--co-tinta); margin:16px auto 0; max-width:38ch; }

/* ================================================================  varios === */

.co-pasos{ list-style:none; counter-reset:c 0; margin:26px 0; padding:0; display:grid; gap:15px; }
.co-pasos li{ counter-increment:c; position:relative; padding-left:52px; line-height:1.7; }
.co-pasos li::before{ content:counter(c); position:absolute; left:0; top:-1px;
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:var(--co-pino); color:#fff; font-weight:700; font-size:16px; }

.co-tabla-env{ overflow-x:auto; margin:26px 0; }
.co-tabla{ width:100%; border-collapse:collapse; font-size:1rem; min-width:480px; }
.co-tabla th,.co-tabla td{ border:1px solid var(--co-borde); padding:13px 15px;
  text-align:left; vertical-align:top; line-height:1.6; }
.co-tabla th{ background:var(--co-hoja); color:var(--co-pino-osc); font-weight:700; }
.co-tabla tr:nth-child(even) td{ background:var(--co-fondo); }
.co-tabla .n{ font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }

@media (prefers-reduced-motion:reduce){ .curso-libre *{ transition:none !important; } }

/* ==========================================================  calculadoras === */

.co-plata{ border:2px solid var(--co-pino); border-radius:20px; overflow:hidden;
  background:var(--co-papel); margin:28px 0; }
.co-plata-cab{ padding:14px 18px; background:var(--co-pino); color:#fff; }
.co-plata-tit{ font-weight:700; font-size:1.02rem; }
.co-plata-cuerpo{ padding:22px; display:grid; gap:24px; }
@media (min-width:860px){ .co-plata-cuerpo{ grid-template-columns:minmax(0,320px) minmax(0,1fr); } }
@media (max-width:620px){ .co-plata-cuerpo{ padding:17px 15px; } }
.co-plata-cuerpo > *{ min-width:0; }

.co-mandos{ display:grid; gap:17px; align-content:start; }
.co-campo{ display:grid; gap:5px; }
.co-etiq{ font-weight:700; font-size:1rem; color:var(--co-tinta); }
.co-ayuda{ font-size:.9rem; color:var(--co-gris); margin:0; line-height:1.55; max-width:none; }

.co-plata-salida{ display:grid; gap:18px; align-content:start; }
.co-resultado{ background:var(--co-hoja); border-radius:16px; padding:18px 20px; text-align:center; }
.co-res-et{ display:block; font-size:.95rem; color:var(--co-pino-osc); margin-bottom:4px; }
.co-res-n{ display:block; font-size:2.3rem; font-weight:800; line-height:1.1;
  color:var(--co-pino-osc); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
@media (max-width:420px){ .co-res-n{ font-size:1.8rem; } }

.co-barras{ display:grid; gap:11px; }
.co-barra{ display:grid; grid-template-columns:minmax(0,1fr); gap:5px; }
@media (min-width:560px){
  /* La etiqueta manda: si se le da menos sitio que a la barra, «Reserva general
     (10 %)» se parte en dos líneas y la tabla se ve desordenada. */
  .co-barra{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;
    align-items:center; gap:12px; }
}
.co-barra .et{ font-size:.94rem; color:var(--co-gris); }
.co-barra .pista{ display:block; height:16px; border-radius:999px; background:var(--co-hoja-2);
  overflow:hidden; }
.co-barra .pista i{ display:block; height:100%; background:var(--co-pino);
  border-radius:999px; transition:width .3s ease; }
.co-barra .val{ font-weight:700; font-variant-numeric:tabular-nums; font-size:.98rem;
  color:var(--co-tinta); white-space:nowrap; }

.co-nota-chica{ font-size:.88rem; color:var(--co-gris-2); line-height:1.6; margin:0;
  max-width:none; }

/* ===============================================================  el mapa === */

.co-mapa{ margin:28px 0; }
.co-mapa-lienzo{ background:var(--co-fondo); border:1px solid var(--co-borde);
  border-radius:18px; padding:18px; }
.co-mapa-lienzo svg{ width:100%; height:auto; display:block; }
.co-organo{ cursor:pointer; }
.co-organo rect{ transition:stroke .15s, fill .15s; }
.co-organo:hover rect{ stroke:var(--co-oro); stroke-width:3; }
.co-organo.abierto rect{ stroke:var(--co-oro); stroke-width:4; }
.co-mapa-ficha{ margin-top:16px; border:2px solid var(--co-pino); border-radius:18px;
  padding:20px 22px; background:var(--co-papel); }
.co-mapa-ficha h4{ margin:0 0 4px; font-size:1.22rem; color:var(--co-pino-osc); }
.co-mapa-ficha .quien{ font-size:.93rem; color:var(--co-gris-2); margin:0 0 14px; }
.co-mapa-ficha h5{ margin:16px 0 6px; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--co-oro-osc); }
.co-mapa-ficha ul{ margin:0; padding-left:22px; }
.co-mapa-ficha li{ margin-bottom:6px; line-height:1.6; }
.co-mapa-ficha .pide{ margin-top:16px; padding:14px 16px; border-radius:13px;
  background:var(--co-oro-cla); border-left:5px solid var(--co-oro); }
.co-mapa-ficha .pide > b:first-child{ display:block; margin-bottom:4px; color:var(--co-oro-osc); }
.co-mapa-aviso{ font-size:.95rem; color:var(--co-gris); margin:14px 0 0; }

/* ==========================================================  la asamblea === */

.co-esc{ border:2px solid var(--co-borde); border-radius:20px; overflow:hidden;
  background:var(--co-papel); margin:28px 0; }
.co-esc-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--co-tinta); color:#fff; }
.co-esc-tit{ font-weight:700; }
.co-esc-punto{ margin-left:auto; font-size:.85rem; color:#A9BDB1; }
@media (max-width:560px){ .co-esc-punto{ margin-left:0; width:100%; } }
.co-esc-cuerpo{ padding:22px; }
@media (max-width:620px){ .co-esc-cuerpo{ padding:17px 15px; } }
.co-escena{ font-size:1.06rem; line-height:1.7; }
.co-escena p{ margin:0 0 13px; max-width:58ch; }
.co-escena p:last-child{ margin-bottom:0; }
.co-pasa{ margin-top:18px; border-radius:15px; padding:17px 19px; line-height:1.68;
  border-left:5px solid var(--co-pino); background:var(--co-hoja); }
.co-pasa h5{ margin:0 0 7px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--co-gris-2); }
.co-pasa p{ margin:0 0 11px; max-width:58ch; }
.co-pasa p:last-child{ margin-bottom:0; }
.co-pasa.buena{ border-left-color:var(--co-pino); background:var(--co-hoja); }
.co-pasa.regular{ border-left-color:var(--co-oro); background:var(--co-oro-cla); }
.co-pasa.mala{ border-left-color:var(--co-mal); background:var(--co-mal-nube); }
.co-ruta{ margin-top:16px; border-top:1px solid var(--co-borde); padding-top:15px; }
.co-ruta h5{ margin:0; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--co-gris-2); }
.co-ruta ol{ margin:9px 0 0; padding-left:23px; color:var(--co-gris); line-height:1.65; }
.co-ruta li{ margin-bottom:6px; }

/* El mapa en modo botones: para los siete principios, que en un teléfono no se
   pueden tocar dentro de un círculo. */
.co-mapa-lienzo.en-botones{ padding:0; background:none; border:0; }
.co-princs{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.co-princ{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:13px; align-items:center;
  text-align:left; font:inherit; font-size:1rem; line-height:1.4; padding:13px 15px;
  border:2px solid var(--co-borde); border-radius:15px; background:var(--co-papel);
  color:var(--co-tinta); cursor:pointer; min-height:62px; }
.co-princ:hover{ border-color:var(--co-oro); background:var(--co-oro-cla); }
.co-princ.abierto{ border-color:var(--co-oro); background:var(--co-oro-cla);
  box-shadow:0 0 0 3px rgba(242,183,5,.22); }
.co-princ .n{ display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:13px; color:#fff; font-weight:800; font-size:19px; }
.co-princ b{ font-weight:700; }