/* ═══════════════════════════════════════════════════════════
   Ahá Herramientas Digitales · Contenido con IA (5 herramientas)
   Usa las variables de app.css y los componentes de tools.css
   ═══════════════════════════════════════════════════════════ */

.cont-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.cont-form { min-width: 0; }
.cont-form textarea { min-height: 96px; }
.cont-form .contador { margin-top: -2px; font-weight: 500; }
.cont-form .fila > label { min-width: 0; }

/* Cupo de IA */
.cont-cupo { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cont-cupo-link { font-weight: 700; }

/* Campos con chips */
.cont-campo { display: flex; flex-direction: column; gap: 8px; }
.cont-label { font-weight: 600; font-size: .92rem; }
.cont-campo .chip { min-height: 38px; }
.cont-campo .chip:focus-visible, .cont-res .btn-copiar:focus-visible, .cont-res button:focus-visible { outline: 3px solid rgba(0, 113, 188, .45); outline-offset: 2px; }
.cont-estrellas .chip { letter-spacing: .02em; }

/* Casillas (emojis / hashtags) */
.cont-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.form .cont-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; min-height: 32px; }
.cont-check input { width: 20px; height: 20px; accent-color: var(--orange); margin: 0; }

.cont-enviar { display: flex; flex-direction: column; gap: 6px; }
.cont-costo { text-align: center; }
.cont-aviso { margin: 0; color: var(--ink-2); background: var(--orange-50); border-radius: 10px; padding: 8px 12px; line-height: 1.45; }
.cont-err-link { margin-left: 4px; font-weight: 800; }
.cont-form [aria-invalid=true] { border-color: var(--err); }

/* Columna de resultados */
.cont-res { min-width: 0; }
.cont-res > .vacio { border: 1.5px dashed var(--line); border-radius: 16px; background: var(--bg); }
.cont-res > .cargando { border: 1.5px solid var(--line); border-radius: 16px; min-height: 160px; }
.cont-res .resultado { margin-top: 0; }
.cont-head-acc { display: flex; gap: 8px; flex-wrap: wrap; }

.cont-bloque { margin-bottom: 16px; }
.cont-bloque-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cont-bloque-head h4 { margin: 0; font-size: .92rem; color: var(--navy); flex: 1 1 auto; min-width: 0; }
.cont-bloque .salida { font-size: .93rem; }
.cont-largo { font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cont-largo.ok { background: var(--ok-50); color: var(--ok-700); }
.cont-largo.mal { background: var(--err-50); color: #9f2a2a; }
.cont-largo.neutro { background: var(--bg); color: var(--muted); }

.cont-tags { display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg); border-radius: 12px; padding: 12px; }
.cont-tag { font-size: .84rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); word-break: break-word; }
.cont-tag-amplio { border-color: #bcd0f1; color: var(--blue); }
.cont-tag-nicho { border-color: #f7c9a0; color: var(--orange-600); }

.cont-tip { background: var(--blue-50); color: var(--navy); border-radius: 12px; padding: 12px 14px; font-size: .9rem; line-height: 1.5; margin-bottom: 14px; }
.cont-tip ul { margin: 6px 0 0; padding-left: 1.2em; }
.cont-tip li + li { margin-top: 4px; }
.cont-nota { margin: 6px 0 0; }
.cont-aviso-res { margin: 0 0 14px; font-size: .88rem; font-weight: 600; }
.cont-res .acciones { margin-top: 8px; }

/* Títulos para Google: opciones + vista previa */
.cont-ops { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.cont-ops legend { font-weight: 800; font-size: .92rem; color: var(--navy); margin-bottom: 8px; padding: 0; }
.cont-ops ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cont-op { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; background: var(--bg); border: 1.5px solid transparent; border-radius: 12px; padding: 10px 12px; }
.cont-op:has(input:checked) { border-color: var(--orange); background: var(--orange-50); }
.cont-op label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .92rem; line-height: 1.45; min-width: 0; }
.cont-op label span { word-break: break-word; }
.cont-op input[type=radio] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; }

.serp { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-family: Arial, Helvetica, sans-serif; max-width: 600px; }
.serp-sitio { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.serp-sitio > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.serp-ico { width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; color: #4d5156; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.serp-nombre { font-size: .875rem; color: #202124; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-url { font-size: .75rem; color: #4d5156; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-tit { color: #1a0dab; font-size: 1.25rem; line-height: 1.3; margin-bottom: 4px; word-break: break-word; }
.serp-desc { color: #4d5156; font-size: .875rem; line-height: 1.58; word-break: break-word; }
.cont-code { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: .82rem; margin: 0; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* Descripciones de productos */
table.t.cont-ficha th { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--ink-2); width: 40%; }

/* Calendario */
.cont-card-cal { max-width: 1120px; }
.cont-form-cal { max-width: 860px; }
.cont-cal-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.cont-full { grid-column: 1 / -1; }
.cont-fechas-mes:empty { display: none; }
.cont-fechas-mes { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.cont-fechas-mes ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--ink-2); }
.cont-card-cal .cont-res { margin-top: 22px; }
.cont-resumen { margin: 0 0 14px; color: var(--ink-2); line-height: 1.55; }
.cont-fechas { background: var(--bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.cont-fechas h4 { margin: 0 0 6px; font-size: .9rem; color: var(--navy); }
.cont-fechas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; font-size: .88rem; }
.cont-fechas small { display: block; color: var(--muted); font-size: .78rem; }
.cont-fecha-dia { font-weight: 800; color: var(--navy); }
.cont-cal { min-width: 860px; }
.cont-cal td { font-size: .86rem; line-height: 1.45; }
.cont-cal td:first-child { white-space: nowrap; }
.cont-cal .cont-copy { min-width: 220px; white-space: pre-wrap; }
.cont-cal .cont-hs { color: var(--blue); word-break: break-word; min-width: 120px; }
.cont-especial td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.cont-especial-tag { display: block; margin-top: 4px; font-size: .74rem; font-weight: 700; color: var(--orange-600); white-space: normal; max-width: 140px; }
.cont-formato { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--blue-50); color: var(--navy); white-space: nowrap; }
.cont-formato.f-reel { background: #fdeefa; color: #9c2a83; }
.cont-formato.f-carrusel { background: var(--orange-50); color: var(--orange-600); }
.cont-formato.f-historia { background: var(--ok-50); color: var(--ok-700); }

/* Textos para redes: imagen o PDF del posteo */
.cont-arch { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; border: 2px dashed #c9d5ec; border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff, var(--blue-50)); padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.cont-arch:hover, .cont-arch.over { border-color: var(--orange); background: var(--orange-50); }
.cont-arch.procesando { cursor: progress; }
.cont-arch.lleno { cursor: default; }
.cont-arch.lleno:hover { border-color: #c9d5ec; background: linear-gradient(180deg, #fbfcff, var(--blue-50)); }
.cont-arch.procesando .cont-arch-ico { animation: cont-latido 1s ease-in-out infinite; }
.cont-arch-ico { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.cont-arch-txt { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cont-arch-tit { color: var(--navy); font-size: .93rem; line-height: 1.3; }
.cont-arch-ayuda { color: var(--muted); font-size: .79rem; line-height: 1.4; }
.cont-arch-ayuda kbd { font: inherit; font-size: .74rem; font-weight: 700; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.cont-arch .btn { flex-shrink: 0; min-height: 40px; }
.cont-arch .btn:focus-visible, .cont-arch-quitar:focus-visible { outline: 3px solid rgba(0, 113, 188, .45); outline-offset: 2px; }
.cont-arch-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cont-arch-lista[hidden] { display: none; }
.cont-arch-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 8px 7px 7px; min-width: 0; }
.cont-arch-mini { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg); }
.cont-arch-pdf { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: #fdecec; color: #a3261d; font-weight: 800; font-size: .8rem; letter-spacing: .04em; }
.cont-arch-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cont-arch-nom { font-weight: 600; font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cont-arch-det { color: var(--muted); font-size: .77rem; line-height: 1.35; }
.cont-arch-quitar { font: inherit; font-size: .8rem; font-weight: 700; min-height: 38px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.cont-arch-quitar:hover { border-color: var(--err); color: var(--err); }
.cont-arch-estado { margin: 0; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.cont-arch-estado:empty { display: none; }
/* Fuera de "Preparando…" el estado es solo para lectores de pantalla (la lista ya lo muestra) */
.cont-arch-estado:not(.activo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cont-arch-err { margin: 0; }
.cont-arch-err ul { margin: 0; padding-left: 1.1em; }
.cont-arch-err li + li { margin-top: 4px; }
.cont-arch-priv { margin: 0; line-height: 1.4; }
@media (hover: none) and (pointer: coarse) { .cont-arch-pegar { display: none; } }
@keyframes cont-latido { 50% { opacity: .35; } }

/* Chips con tope (hasta 3 redes) */
.cont-chips-aviso { color: var(--orange-600); font-weight: 600; }
.cont-chips-aviso:empty { display: none; }
.cont-chip-no { animation: cont-no .32s ease-in-out; }
@keyframes cont-no { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* Resultado por red: pestañas */
.cont-tabs { margin: 2px 0 14px; scrollbar-width: thin; }
.cont-tabs .tab { min-height: 44px; }
.cont-tabs .tab:focus-visible { outline: 3px solid rgba(0, 113, 188, .45); outline-offset: -3px; border-radius: 8px 8px 0 0; }
.cont-panel:focus-visible { outline: 3px solid rgba(0, 113, 188, .3); outline-offset: 4px; border-radius: 8px; }
.cont-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cont-panel-tit { margin: 0; font-size: .95rem; color: var(--navy); }
.cont-res .resultado-head h3:focus { outline: none; }
.cont-res .resultado-head h3:focus-visible { outline: 3px solid rgba(0, 113, 188, .3); outline-offset: 3px; border-radius: 4px; }
.cont-visto { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.cont-visto-txt { margin: 0 0 8px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.cont-visto .cont-tags { background: #fff; padding: 8px; margin-top: 4px; }
/* Descripciones de productos: datos que la IA tomó de la foto */
.cont-visto .table-wrap { background: #fff; border-radius: 10px; margin-top: 6px; }
table.t.cont-vistos tr:last-child th, table.t.cont-vistos tr:last-child td { border-bottom: 0; }
.cont-label small, .cont-campo .cont-label small { font-weight: 500; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .cont-chip-no, .cont-arch.procesando .cont-arch-ico { animation: none; }
}

/* Cómo funciona + tips */
.cont-como .explica > div { position: relative; }
.cont-paso { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: var(--orange-btn-txt, #141A3C); font-weight: 800; margin-bottom: 8px; }
.cont-tips { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.cont-tips h3 { font-size: 1rem; color: var(--navy); margin: 0 0 8px; }
.cont-tips ul { margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.cont-tips li + li { margin-top: 6px; }

@media (max-width: 860px) {
  .cont-grid { grid-template-columns: 1fr; }
}

/* Celular: tabla del calendario como tarjetas */
@media (max-width: 760px) {
  .cont-cal-campos { grid-template-columns: 1fr; }
  .cont-cal-wrap { overflow: visible; }
  .cont-cal { min-width: 0; }
  .cont-cal thead { display: none; }
  .cont-cal, .cont-cal tbody, .cont-cal tr, .cont-cal td { display: block; width: 100%; }
  .cont-cal tr { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
  .cont-especial td:first-child { box-shadow: none; }
  .cont-especial { border-left: 4px solid var(--orange) !important; }
  table.t.cont-cal td { border: 0; padding: 4px 0; }
  .cont-cal td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .cont-cal td:first-child::before { display: none; }
  .cont-cal td:first-child { font-size: 1rem; white-space: normal; }
  .cont-cal .cont-copy, .cont-cal .cont-hs { min-width: 0; }
  .cont-especial-tag { max-width: none; }
}

@media (max-width: 640px) {
  .cont-arch { padding: 12px; }
  .cont-arch .btn { width: 100%; min-height: 44px; }
  .cont-arch-quitar { min-height: 44px; }
  .cont-panel-head .btn { width: 100%; }
  /* Hasta 3 pestañas de red: columnas iguales para que entren todas a 375 px (sin pestañas cortadas en el borde) */
  .cont-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
  .cont-tabs .tab { padding: 10px 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .cont-op { grid-template-columns: minmax(0, 1fr) auto; }
  .cont-op label { grid-column: 1 / -1; }
  .cont-head-acc { width: 100%; }
  .cont-head-acc .btn { flex: 1 1 auto; }
  .serp { padding: 14px; }
  .serp-tit { font-size: 1.1rem; }
}

/* Imprimir el calendario (solo esa herramienta): sale la tabla sola */
@media print {
  .tool-calendario-contenido .site-header, .tool-calendario-contenido .site-footer,
  .tool-calendario-contenido main > :not(.tool-hero), .tool-calendario-contenido .tool-hero .hero-copy,
  .tool-calendario-contenido .cont-form, .tool-calendario-contenido .cont-no-print, .tool-calendario-contenido .cont-head-acc,
  .tool-calendario-contenido .cont-nota, .tool-calendario-contenido .modal, .tool-calendario-contenido .aha-aviso,
  .tool-calendario-contenido .cont-res > .vacio { display: none !important; }
  .tool-calendario-contenido { background: #fff !important; }
  .tool-calendario-contenido .tool-hero { padding: 0 !important; background: none !important; }
  .tool-calendario-contenido .tool-card { box-shadow: none !important; border: 0 !important; padding: 0 !important; max-width: none; }
  .tool-calendario-contenido .resultado { border: 0; }
  .tool-calendario-contenido .resultado-head { background: none; padding: 0 0 8px; }
  .tool-calendario-contenido .cont-cal { min-width: 0; font-size: 9pt; }
  .tool-calendario-contenido .cont-cal thead { display: table-header-group; }
  .tool-calendario-contenido .cont-cal, .tool-calendario-contenido .cont-cal tbody { display: table; width: 100%; }
  .tool-calendario-contenido .cont-cal tbody { display: table-row-group; }
  .tool-calendario-contenido .cont-cal tr { display: table-row; break-inside: avoid; border: 0; padding: 0; }
  .tool-calendario-contenido table.t.cont-cal td { display: table-cell; width: auto; border-bottom: 1px solid #ccc; padding: 4px 6px; }
  .tool-calendario-contenido .cont-cal td[data-label]::before { display: none; }
  .tool-calendario-contenido .table-wrap { overflow: visible; }
}