/* #181 — Calendario orgánico (Contenido · Calendario). Owner 23/09: el plan de Benja precargado, interactivo.
   Todo cuelga de #page-contenido-calendario y del drawer compartido con .co-*; no toca otras pantallas. */

#page-contenido-calendario {
  --co-p1: oklch(56% 0.13 255); --co-p2: oklch(58% 0.14 45);  --co-p3: oklch(56% 0.11 165);
  --co-p4: oklch(55% 0.16 20);  --co-p5: oklch(52% 0.12 305); --co-p6: oklch(58% 0.12 85);
  --co-p7: oklch(55% 0.15 340); --co-p8: oklch(56% 0.10 205); --co-p9: oklch(52% 0.07 130);
  --co-p0: oklch(60% 0.01 330);
  --co-line: var(--line, var(--border));
  --co-card: var(--card, var(--bg-card));
  --co-ink: var(--ink, var(--text));
  --co-ink-2: var(--ink-2, var(--text-muted));
  --co-ink-3: var(--ink-3, var(--text-muted));
}
.co-p1 { --p: var(--co-p1); } .co-p2 { --p: var(--co-p2); } .co-p3 { --p: var(--co-p3); }
.co-p4 { --p: var(--co-p4); } .co-p5 { --p: var(--co-p5); } .co-p6 { --p: var(--co-p6); }
.co-p7 { --p: var(--co-p7); } .co-p8 { --p: var(--co-p8); } .co-p9 { --p: var(--co-p9); }
.co-p0 { --p: var(--co-p0); }

#page-contenido-calendario .qc-page-body { display: block; overflow: auto; }
#page-contenido-calendario [hidden] { display: none !important; }

/* ── barra superior ─────────────────────────────────────────────────── */
.co-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.co-nav { display: inline-flex; align-items: center; gap: 4px; }
.co-nav button, .co-seg button {
  min-height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--co-line); background: var(--co-card);
  color: var(--co-ink); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer;
}
.co-nav button:hover, .co-seg button:hover { border-color: var(--co-ink-3); }
.co-mes { font-size: 17px; font-weight: 700; min-width: 170px; color: var(--co-ink); }
.co-seg { display: inline-flex; }
.co-seg button { border-radius: 0; margin-left: -1px; }
.co-seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.co-seg button:last-child { border-radius: 0 8px 8px 0; }
.co-seg button[aria-pressed="true"] { background: var(--co-ink); color: var(--co-card); border-color: var(--co-ink); }
.co-sp { flex: 1; }

/* ── avisos del plan ────────────────────────────────────────────────── */
.co-avisos { border: 1px solid color-mix(in oklch, var(--warn, #b7791f) 45%, transparent);
  background: color-mix(in oklch, var(--warn, #b7791f) 9%, transparent); border-radius: 10px; padding: 8px 12px;
  margin-bottom: 10px; font-size: 12.5px; color: var(--co-ink); }
.co-avisos summary { cursor: pointer; font-weight: 600; }
.co-avisos ul { margin: 6px 0 2px 18px; padding: 0; display: grid; gap: 3px; }

/* ── filtros por pilar ──────────────────────────────────────────────── */
.co-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.co-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--co-line); background: var(--co-card); color: var(--co-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.co-fchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--p, var(--co-ink-3)); }
.co-fchip b { font-weight: 700; }
.co-fchip[aria-pressed="true"] { border-color: var(--p, var(--co-ink)); background: color-mix(in oklch, var(--p, var(--co-ink)) 14%, transparent); }
.co-filtros select { min-height: 30px; border-radius: 8px; border: 1px solid var(--co-line); background: var(--co-card);
  color: var(--co-ink); font: inherit; font-size: 12.5px; padding: 0 8px; }

/* ── layout ─────────────────────────────────────────────────────────── */
.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.co-layout.sin-lateral { grid-template-columns: minmax(0, 1fr); }
.co-layout.sin-lateral .co-lateral { display: none; }

/* ── vista mes ──────────────────────────────────────────────────────── */
.co-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .55fr));
  border: 1px solid var(--co-line); border-radius: 12px; overflow: hidden; background: var(--co-line); gap: 1px; }
.co-dow { background: var(--co-card); padding: 6px 8px; font-size: 11.5px; font-weight: 600; color: var(--co-ink-2);
  text-transform: uppercase; letter-spacing: .04em; }
.co-dia { background: var(--co-card); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  position: relative; min-width: 0; }
.co-dia.fuera { background: color-mix(in oklch, var(--co-card) 88%, var(--co-line)); }
.co-dia.fuera .co-dnum { color: var(--co-ink-3); }
.co-dia.finde { background: color-mix(in oklch, var(--co-card) 94%, var(--co-line)); }
.co-dia.hoy .co-dnum { background: var(--go, #2f855a); color: #fff; }
.co-dia.drop { outline: 2px dashed var(--go, #2f855a); outline-offset: -3px; }
.co-dtop { display: flex; align-items: center; gap: 4px; }
.co-dnum { font-size: 12px; font-weight: 700; color: var(--co-ink); min-width: 22px; height: 22px; border-radius: 999px;
  display: inline-grid; place-items: center; padding: 0 5px; }
.co-mas { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; border: 1px solid transparent; background: none;
  color: var(--co-ink-3); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.co-dia:hover .co-mas, .co-mas:focus-visible { opacity: 1; }
.co-mas:hover { border-color: var(--co-line); color: var(--co-ink); }
@media (hover: none) { .co-mas { opacity: 1; } }
.co-fecha-com { font-size: 10.5px; font-weight: 600; color: var(--dom-mercado, #975a16); background: var(--dom-mercado-soft, #fefcbf);
  border-radius: 5px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── tarjeta ───────────────────────────────────────────────────────── */
.co-card { display: block; width: 100%; text-align: left; border: 1px solid var(--co-line); border-left: 3px solid var(--p);
  background: color-mix(in oklch, var(--p) 7%, var(--co-card)); color: var(--co-ink); border-radius: 7px; padding: 4px 6px;
  font: inherit; font-size: 11.5px; line-height: 1.3; cursor: pointer; min-width: 0; }
.co-card:hover { border-color: var(--p); }
.co-card[draggable="true"] { cursor: grab; }
.co-card.arrastrando { opacity: .45; }
.co-card .co-ct { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-card .co-cm { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--co-ink-2); margin-bottom: 1px; }
.co-card .co-cm b { color: var(--p); font-weight: 700; }
.co-card.viral { border-style: dashed; border-left-style: dashed; background: transparent; }
.co-card.idea { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--p) 25%, transparent); }
.co-etapa { margin-left: auto; font-size: 10px; padding: 0 5px; border-radius: 999px; background: var(--co-line); color: var(--co-ink-2); white-space: nowrap; }
.co-etapa.produccion, .co-etapa.edicion { background: var(--dom-crm-soft, #ebf4ff); color: var(--dom-crm, #2b6cb0); }
.co-etapa.listo { background: var(--go-soft, #f0fff4); color: var(--go-ink, #276749); }
.co-etapa.publicacion { background: var(--go, #2f855a); color: #fff; }
/* 14/10 #288: el paso del circuito y si te toca */
.co-etapa.c-revision { background: var(--warn-soft); color: var(--warn); }
.co-etapa.c-grabar, .co-etapa.c-editar { background: var(--dom-crm-soft); color: var(--dom-crm); }
.co-etapa.c-lista, .co-etapa.c-pautar { background: var(--go-soft); color: var(--go-ink); }
.co-etapa.c-pedido, .co-etapa.c-cierre { background: var(--dom-admin-soft); color: var(--ink-2); }
.co-etapa.c-publicada { background: var(--go); color: var(--bg); }
.co-etapa.fuera { background: var(--bad-soft); color: var(--bad); }
.co-card.mia { box-shadow: inset 0 0 0 2px var(--go); }
.co-card.fuera { opacity: .85; }
.co-pasar { display: block; width: 100%; margin: 3px 0 6px; padding: 4px 6px; border: 1px solid var(--go); background: var(--go-soft); color: var(--go-ink); border-radius: 7px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; }
.co-pasar:hover { background: var(--go); color: var(--bg); }
.co-pasar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── vista semana ──────────────────────────────────────────────────── */
.co-semana { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .6fr); gap: 8px; }
.co-scol { border: 1px solid var(--co-line); border-radius: 12px; background: var(--co-card); padding: 8px; min-height: 360px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.co-scol.hoy { border-color: var(--go, #2f855a); }
.co-scol.drop { outline: 2px dashed var(--go, #2f855a); outline-offset: -3px; }
.co-scol h3 { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--co-ink); }
.co-scol h3 .co-mas { opacity: 1; }
.co-semana .co-card { font-size: 12.5px; padding: 8px 9px; }
.co-semana .co-card .co-ct { -webkit-line-clamp: 4; font-weight: 600; }
.co-card .co-cprod { display: block; margin-top: 2px; color: var(--co-ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-semana .co-card .co-cidea { margin-top: 4px; color: var(--co-ink-2); font-size: 11.5px; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── lateral: sin fecha + banco ────────────────────────────────────── */
.co-lateral { border: 1px solid var(--co-line); border-radius: 12px; background: var(--co-card); display: flex; flex-direction: column;
  max-height: calc(100vh - 190px); position: sticky; top: 8px; min-width: 0; }
.co-ltabs { display: flex; border-bottom: 1px solid var(--co-line); }
.co-ltabs button { flex: 1; min-height: 38px; border: 0; background: none; color: var(--co-ink-2); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.co-ltabs button[aria-selected="true"] { color: var(--co-ink); border-bottom-color: var(--co-ink); }
.co-lbuscar { margin: 8px; min-height: 32px; border-radius: 8px; border: 1px solid var(--co-line); background: transparent;
  color: var(--co-ink); padding: 0 9px; font: inherit; font-size: 12.5px; }
.co-lista { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.co-lista.drop { outline: 2px dashed var(--go, #2f855a); outline-offset: -4px; }
.co-bitem { border: 1px solid var(--co-line); border-left: 3px solid var(--p); border-radius: 7px; padding: 6px 8px; font-size: 12px;
  background: var(--co-card); color: var(--co-ink); cursor: grab; text-align: left; font: inherit; width: 100%; }
.co-bitem small { display: block; color: var(--co-ink-3); font-size: 10.5px; margin-bottom: 2px; }
.co-bitem.usada { opacity: .5; cursor: default; }
.co-lvacio { color: var(--co-ink-3); font-size: 12px; padding: 10px 4px; }
.co-lnota { font-size: 11px; color: var(--co-ink-3); padding: 0 10px 8px; }

/* ── lista (390) ───────────────────────────────────────────────────── */
.co-agenda { display: flex; flex-direction: column; gap: 10px; }
.co-adia { border: 1px solid var(--co-line); border-radius: 12px; background: var(--co-card); padding: 8px 10px; scroll-margin-top: 76px; }  /* no queda debajo de la barra fija (QA ame 23/09) */
.co-adia.hoy { border-color: var(--go, #2f855a); }
.co-adia h3 { margin: 0 0 6px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; color: var(--co-ink); }
.co-adia h3 .co-mas { opacity: 1; width: 44px; height: 44px; }
.co-adia .co-card { font-size: 13px; padding: 8px 10px; margin-bottom: 6px; }
.co-adia .co-card .co-ct { -webkit-line-clamp: 3; }
.co-vacio-mes { padding: 24px; text-align: center; color: var(--co-ink-2); border: 1px dashed var(--co-line); border-radius: 12px; }

/* ── cargar plan ───────────────────────────────────────────────────── */
.co-cargar { border: 1px solid color-mix(in oklch, var(--go, #2f855a) 45%, transparent); background: color-mix(in oklch, var(--go, #2f855a) 8%, transparent);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--co-ink); }
.co-cargar input { min-height: 34px; border-radius: 8px; border: 1px solid var(--co-line); background: var(--co-card); color: var(--co-ink); padding: 0 8px; font: inherit; }

/* ── drawer de la pieza ────────────────────────────────────────────── */
.co-dr .qc-drawer-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.co-dr .co-f { display: flex; flex-direction: column; gap: 4px; }
.co-dr .co-f label { font-size: 11.5px; font-weight: 600; color: var(--ink-2, var(--text-muted)); text-transform: uppercase; letter-spacing: .03em; }
.co-dr .co-f input, .co-dr .co-f select, .co-dr .co-f textarea { min-height: 36px; border-radius: 8px; border: 1px solid var(--line, var(--border));
  background: var(--card, var(--bg-card)); color: var(--ink, var(--text)); padding: 6px 9px; font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; }
.co-dr .co-f textarea { min-height: 80px; resize: vertical; line-height: 1.45; }
.co-dr .co-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-dr .co-f3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.co-dr .co-nota { border-left: 3px solid var(--warn, #b7791f); background: color-mix(in oklch, var(--warn, #b7791f) 8%, transparent);
  border-radius: 0 8px 8px 0; padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.co-dr .qc-drawer-h-tx h2 { font-family: var(--sans, inherit); }
.co-dr .co-notad summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--warn, #b7791f); }
.co-dr .co-notad .co-nota { margin-top: 6px; white-space: normal; }
.co-dr .co-meta { font-size: 12px; color: var(--ink-3, var(--text-muted)); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.co-dr .qc-drawer-foot { flex-wrap: wrap; }
.co-dr .co-err { color: var(--bad, #c53030); font-size: 12.5px; }
.co-dr [readonly], .co-dr [disabled] { opacity: .85; }

@media (max-width: 1100px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); }
  .co-lateral { position: static; max-height: 420px; }
}
@media (max-width: 640px) {
  .co-mes { min-width: 0; font-size: 15px; flex-basis: 100%; order: -1; }
  .co-dr .co-f2, .co-dr .co-f3 { grid-template-columns: 1fr; }
  .co-nav button, .co-seg button { min-height: 40px; min-width: 40px; }
}

/* ── fechas adentro del calendario (paquete 07/10: mockups C1, C1b, C2) ───────────────────────────────────────
   Franja por tipo, ventana de campaña, y las pestañas «Lo que viene» y «Fechas». Prefijo co-, como el resto. */
#page-contenido-calendario { --cnt-tar-gold: #e8b84a; --cnt-tar-vio: #9a7bff; --co-f: var(--dom-mercado, #975a16); --co-f-soft: var(--dom-mercado-soft, #fefcbf); }
.co-f-feriado { --co-f: var(--bad, #c53030); --co-f-soft: var(--bad-soft, #fed7d7); }
.co-f-gaming { --co-f: var(--dom-contenido, #6b46c1); --co-f-soft: var(--dom-contenido-soft, #e9d8fd); }
.co-f-propia { --co-f: var(--link, #2b6cb0); --co-f-soft: var(--dom-crm-soft, #bee3f8); }
.co-f-interno { --co-f: var(--co-ink-2); --co-f-soft: var(--co-line); }
.co-pest { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.co-fecha-com { color: var(--co-f); background: var(--co-f-soft); font-size: 11px; line-height: 1.3; padding: 2px 6px; white-space: normal; overflow-wrap: anywhere; }
.co-fecha-com.est, .co-tag.est { outline: 1px dashed var(--co-f, var(--co-ink-2)); outline-offset: -1px; }
.co-dia.ventana, .co-scol.ventana, .co-adia.ventana {
  background-image: repeating-linear-gradient(135deg, color-mix(in oklch, var(--dom-mercado, #975a16) 11%, transparent) 0 8px, transparent 8px 16px); }
.co-ley { margin: 8px 0 0; display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--co-ink-2); }
.co-ley span { display: inline-flex; align-items: center; gap: 6px; }
.co-ley i, .co-pf-n i { width: 10px; height: 10px; border-radius: 3px; background: var(--co-f); flex: none; display: inline-block; }
.co-ley i.est, .co-pf-n i.est { background: none; outline: 1.5px dashed var(--co-f); outline-offset: -1px; }
.co-ley i.co-vent { width: 18px; border: 1px solid var(--co-line); background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--dom-mercado, #975a16) 45%, transparent) 0 3px, transparent 3px 6px); }

/* «Lo que viene» y «Fechas» */
.co-vbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.co-vres { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; flex: 1; }
.co-chip { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; }
.co-chip.bad { color: var(--bad); background: var(--bad-soft); } .co-chip.warn { color: var(--warn); background: var(--warn-soft); }
.co-prox { display: flex; flex-direction: column; gap: 8px; }
.co-pf { display: grid; grid-template-columns: 170px minmax(0, 1.3fr) minmax(160px, .8fr) minmax(150px, .8fr) auto; gap: 14px; align-items: center;
  background: var(--co-card); border: 1px solid var(--co-line); border-left: 3px solid var(--co-f); border-radius: 12px; padding: 12px 14px; color: var(--co-ink); }
.co-pf b { font-size: 13.5px; } .co-pf small { display: block; font-size: 12px; color: var(--co-ink-2); }
.co-pf-f small { color: var(--warn); font-weight: 700; margin-top: 2px; }
.co-pf-n { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.co-pf-n b { display: inline-flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.co-pf-v { font-size: 12.5px; } .co-pf-v small, .co-nada { color: var(--co-ink-3); }
.co-pf-a { text-align: right; min-width: 170px; }
.co-barra { display: block; height: 6px; border-radius: 99px; background: var(--co-line); overflow: hidden; margin-bottom: 4px; }
.co-barra i { display: block; height: 100%; background: var(--go); }
.co-nota { margin: 10px 0 0; font-size: 12px; color: var(--co-ink-3); }
.co-ir-pieza { margin: 4px 0 0; }
.co-lk { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.co-tag { border: 1px solid color-mix(in oklch, var(--co-f, var(--co-ink-2)) 45%, transparent); color: var(--co-f, var(--co-ink-2)); border-radius: 99px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.co-t-feriado { --co-f: var(--bad); } .co-t-comercial { --co-f: var(--dom-mercado); } .co-t-gaming { --co-f: var(--dom-contenido); } .co-t-propia { --co-f: var(--link); }
.co-ok { color: var(--go-ink, var(--go)); font-weight: 600; font-size: 12.5px; }
.co-tabla-c { border: 1px solid var(--co-line); border-radius: 14px; overflow: hidden; background: var(--co-card); }
.co-tabla { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--co-ink); }
.co-tabla th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--co-ink-3); padding: 10px 12px; border-bottom: 1px solid var(--co-line); white-space: nowrap; }
.co-tabla td { padding: 8px 12px; border-bottom: 1px solid var(--co-line); vertical-align: middle; }
.co-tabla tr:last-child td { border-bottom: 0; }
.co-tabla td small { display: block; color: var(--co-ink-2); font-size: 12px; }
.co-tabla tr.apag td { color: var(--co-ink-3); } .co-tabla td.co-fu { color: var(--co-ink-2); font-size: 12.5px; max-width: 240px; overflow-wrap: anywhere; }
/* El botón es el área que se toca (44 px en celular); la llave se dibuja adentro con ::before y ::after. */
.co-sw { width: 40px; height: 28px; border: 0; background: none; position: relative; cursor: pointer; padding: 0; vertical-align: middle; border-radius: 8px; }
.co-sw::before { content: ""; position: absolute; left: 1px; top: 50%; margin-top: -11px; width: 38px; height: 22px; border-radius: 99px; background: var(--line-2, var(--co-line)); }
.co-sw::after { content: ""; position: absolute; top: 50%; margin-top: -8px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--co-ink-2); transition: left .12s; }
.co-sw[aria-checked="true"]::before { background: var(--go); } .co-sw[aria-checked="true"]::after { left: 20px; background: #0c0b10; }
.co-sw:focus-visible, .co-lk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* el formulario de una fecha (vive en la capa común, fuera de la página) */
.co-fdias { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.co-fdias .cnt-tar-pq { padding-left: 12px; }
.co-fdias .co-lk { font-size: 12px; }

@media (max-width: 900px) {
  .co-pest .cnt-tar-pill { flex: 1 1 auto; min-height: 44px; }
  .co-pf { grid-template-columns: 1fr; gap: 6px; } .co-pf-a { text-align: left; } .co-pf-a .cnt-tar-btn { min-height: 44px; width: 100%; }
  .co-vbar .co-seg { width: 100%; flex-wrap: wrap; gap: 6px; }
  .co-vbar .co-seg button, .co-vbar .co-seg button:first-child, .co-vbar .co-seg button:last-child { flex: 1 1 auto; min-height: 44px; margin: 0; border-radius: 8px; }
  .co-vbar .cnt-tar-btn { flex: 1 1 100%; min-height: 44px; }
  .co-tabla thead { display: none; }
  .co-tabla, .co-tabla tbody, .co-tabla tr, .co-tabla td { display: block; }
  .co-tabla tr { padding: 10px 12px; border-bottom: 1px solid var(--co-line); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .co-tabla td { padding: 0; border: 0; }
  .co-tabla td[data-t]::before { content: attr(data-t); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--co-ink-3); }
  .co-tabla td[data-t="Nombre"], .co-tabla td[data-t="Fuente"] { grid-column: 1 / -1; }
  .co-tabla td .cnt-tar-btn { min-height: 44px; width: 100%; }
  .co-sw { width: 48px; height: 44px; }
  .co-fdias .cnt-tar-pq, .co-fdias .co-lk { min-height: 44px; }
}

/* Fechas límite en el calendario (ronda 2, 08/10 · mockup L-A): contorno punteado + banderita, nunca relleno. */
#page-contenido-calendario { --co-lim: #7fa4ff; }
.co-lim { display: flex; align-items: flex-start; gap: 6px; width: 100%; margin-top: 4px; padding: 3px 7px; border: 1px dashed var(--co-lim); border-radius: 8px;
  background: none; color: var(--co-ink); font: inherit; font-size: 11.5px; line-height: 1.25; text-align: left; cursor: pointer; min-width: 0; }
.co-lim svg { flex: none; margin-top: 2px; color: var(--co-lim); }
.co-lim span { min-width: 0; overflow-wrap: anywhere; }
.co-lim b { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--co-lim); }
.co-lim.tarea { border-style: dotted; }
.co-lim.venc { --co-lim: var(--bad, #e5484d); }
.co-lim:hover { background: color-mix(in srgb, var(--co-lim) 10%, transparent); }
.co-lim:focus-visible, .co-llave:focus-visible { outline: 2px solid var(--focus, var(--co-lim)); outline-offset: 1px; }
.co-llave { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border: 1px dashed var(--co-lim); border-radius: 999px;
  background: none; color: var(--co-ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.co-llave i { position: relative; flex: none; width: 26px; height: 14px; border-radius: 999px; background: var(--co-line); transition: background .15s; }
.co-llave i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--co-ink-2); transition: transform .15s; }
.co-llave[aria-checked="true"] i { background: var(--co-lim); }
.co-llave[aria-checked="true"] i::after { transform: translateX(12px); background: var(--co-card); }
.co-ley .co-lim-ley { width: 16px; border: 1px dashed var(--co-lim); background: none; }
@media (max-width: 900px) { .co-lim { min-height: 44px; align-items: center; font-size: 13px; padding: 6px 10px; } .co-llave { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .co-llave i, .co-llave i::after { transition: none; } }

/* Tema claro (08/10): el azul de «Límite» y lo atenuado no se leían sobre blanco. */
[data-theme="light"] #page-contenido-calendario { --co-lim: #2450b8; }
[data-theme="light"] .co-bitem.usada { opacity: .8; }
[data-theme="light"] .co-card .co-cm { color: var(--ink-2); }
/* ── 14/10: quién la tiene, la pieza recién creada y lo que quedó sin fecha ── */
.co-card .co-cq { display: block; margin-top: 2px; font-size: 10.5px; color: var(--co-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-card.recien { border-color: var(--go); box-shadow: 0 0 0 3px var(--go-soft); }
.co-creada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--go);
  border-radius: 10px; background: var(--go-soft); color: var(--co-ink); font-size: 13px; }
.co-creada > span:nth-child(2) { flex: 1; min-width: 200px; }
.co-creada-ok { color: var(--go-ink); font-weight: 700; }
.co-creada-x { width: 32px; height: 32px; border: 0; background: none; color: var(--co-ink-2); font-size: 18px; border-radius: 6px; cursor: pointer; }
.co-creada-x:hover { color: var(--co-ink); }
.co-sfacc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 8px; font-size: 12px; color: var(--co-ink-2); }
.co-sfacc > span { flex-basis: 100%; }