:root {
  --primario: #2A1150;
  --primario-2: #4A2A80;
  --acento: #B8860B;
  --acento-suave: #F6EBD0;
  --fondo: #F7F4FB;
  --tarjeta: #FFFFFF;
  --texto: #1B1226;
  --suave: #6E6082;
  --linea: #E6E0EE;
  --borrador: #8A8494;
  --revision: #E07B00;
  --cambio: #6B4FD8;
  --aprobada: #1F9D61;
  --publicada: #0F6E4A;
  --descartada: #B4352C;
  --atrasada: #C2410C;
  --error: #B4352C;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(27, 18, 38, .06), 0 6px 20px rgba(27, 18, 38, .06);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--texto);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primario-2); }
.cargando { padding: 80px 16px; text-align: center; color: var(--suave); }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20; background: var(--primario); color: #fff;
  padding: 12px 16px 0; box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.cabecera-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; }
.marca-titulo { font-weight: 700; font-size: 17px; letter-spacing: .2px; margin-right: auto; }
.marca-titulo small { display: block; font-weight: 400; font-size: 12px; opacity: .7; }
.robot { font-size: 12.5px; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); white-space: nowrap; }
.robot.mal { background: #FDE2DF; color: #8A1C14; font-weight: 600; white-space: normal; }
.yo { font-size: 13px; opacity: .9; }
.yo button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; opacity: .8; padding: 0 0 0 6px; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; max-width: 1280px; margin: 10px auto 0; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  background: none; border: 0; color: rgba(255, 255, 255, .75); padding: 10px 14px 12px; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 600; font-size: 14.5px;
}
.pestana:hover { color: #fff; }
.pestana.activa { color: #fff; border-bottom-color: #F2D38A; }
.cuenta {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px;
  background: var(--revision); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}

/* ---------- cuerpo ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 18px 16px 80px; }
.barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.barra h2 { margin: 0 auto 0 0; font-size: 20px; }
.barra h2.mes { text-transform: capitalize; }
.emo { display: inline-block; min-width: 1.2em; margin-right: .3em; text-align: center; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linea);
  background: var(--tarjeta); border-radius: 10px; padding: 8px 13px; cursor: pointer; font-weight: 600; font-size: 14px;
  text-decoration: none; color: var(--texto); min-height: 38px;
}
.boton:hover { border-color: #CBBFDD; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.principal { background: var(--primario); color: #fff; border-color: var(--primario); }
.boton.si { background: var(--aprobada); color: #fff; border-color: var(--aprobada); }
.boton.no { background: #fff; color: var(--descartada); border-color: #F0C9C5; }
.boton.cambio { background: #fff; color: var(--cambio); border-color: #D6CCF7; }
.boton.claude { background: linear-gradient(135deg, #6B4FD8, #9B59D0); color: #fff; border-color: transparent; }
.boton.chico { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.boton.texto { border-color: transparent; background: none; }
.grupo { display: inline-flex; }
.grupo .boton { border-radius: 0; }
.grupo .boton:first-child { border-radius: 10px 0 0 10px; }
.grupo .boton:last-child { border-radius: 0 10px 10px 0; }
.grupo .boton.activa { background: var(--acento-suave); border-color: var(--acento); }
.fichas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.ficha { border: 1px solid var(--linea); background: #fff; border-radius: 99px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.ficha.activa { background: var(--primario); border-color: var(--primario); color: #fff; }

.seccion { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 18px; }
.seccion h3 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.seccion h3 small { font-weight: 400; color: var(--suave); font-size: 13px; }
.vacio { color: var(--suave); font-size: 14px; padding: 8px 0; }

/* ---------- tira de revisión ---------- */
.tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.carta { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.carta .mini { aspect-ratio: 4 / 3; background: #EFEAF5; display: flex; align-items: center; justify-content: center; font-size: 42px; overflow: hidden; cursor: pointer; position: relative; }
.carta .mini img, .carta .mini video { width: 100%; height: 100%; object-fit: cover; }
.carta .cuerpo { padding: 10px 12px; flex: 1; cursor: pointer; }
.carta .cuerpo b { display: block; font-size: 14.5px; }
.carta .cuerpo span:not(.emo) { color: var(--suave); font-size: 13px; }
.carta .acciones { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
.carta .acciones .boton { flex: 1; padding: 7px 8px; }
.atencion { border-left: 4px solid var(--atrasada); }

/* ---------- calendario ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.dia-nombre { font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; padding: 6px 8px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: #FBF9FD; }
.dia { min-height: 118px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 5px; position: relative; cursor: pointer; }
.dia:hover { background: #FCFAFE; }
.dia.fuera { background: #FAF8FC; }
.dia.fuera .num { opacity: .4; }
.dia .num { font-size: 12.5px; font-weight: 700; color: var(--suave); margin: 0 0 4px 2px; display: flex; justify-content: space-between; }
.dia .num .mas { opacity: 0; font-weight: 400; }
.dia:hover .num .mas { opacity: 1; }
.dia.hoy .num span:first-child { background: var(--primario); color: #fff; border-radius: 99px; padding: 0 7px; }
.chip {
  display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--c, var(--borrador));
  background: color-mix(in srgb, var(--c, var(--borrador)) 12%, white); border-radius: 6px; padding: 4px 6px;
  margin-bottom: 4px; font-size: 12.5px; line-height: 1.25; cursor: pointer; overflow: hidden;
}
.chip:hover { filter: brightness(.96); }
.chip .h { font-weight: 700; margin-right: 3px; }
.chip .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip.descartada .t { text-decoration: line-through; opacity: .7; }
.chip .marcas { float: right; font-size: 11px; margin-left: 4px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--suave); margin-top: 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }

.agenda-dia { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.agenda-dia:last-child { border-bottom: 0; }
.agenda-dia > b { display: block; font-size: 13px; color: var(--suave); text-transform: capitalize; margin-bottom: 6px; }
.agenda-dia.hoy > b { color: var(--primario); }
.agenda-dia .chip { font-size: 14px; padding: 8px 10px; }

.sin-fecha { display: flex; flex-wrap: wrap; gap: 8px; }
.sin-fecha .chip { width: auto; max-width: 280px; margin: 0; }

/* ---------- estados ---------- */
.e-borrador { --c: var(--borrador); }
.e-revision { --c: var(--revision); }
.e-cambio { --c: var(--cambio); }
.e-aprobada { --c: var(--aprobada); }
.e-publicada { --c: var(--publicada); }
.e-descartada { --c: var(--descartada); }
.e-atrasada { --c: var(--atrasada); }
.e-error { --c: var(--error); }
.estado { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); }

/* ---------- modal ---------- */
.fondo-modal { position: fixed; inset: 0; background: rgba(20, 10, 35, .45); z-index: 50; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 24px 12px; }
.ventana { background: var(--fondo); width: 100%; max-width: 1120px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.ventana.angosta { max-width: 640px; }
.ventana-cabeza { background: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
.ventana-cabeza .que { font-weight: 700; margin-right: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ventana-cabeza .que small { font-weight: 400; color: var(--suave); }
.cerrar { border: 0; background: #F1EDF6; border-radius: 99px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.decision { background: #fff; padding: 12px 16px; border-bottom: 1px solid var(--linea); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.decision .nota { color: var(--suave); font-size: 13.5px; margin-right: auto; }
.decision .nota b { color: var(--texto); }
.falta { background: #FFF6E0; color: #7A4B00; padding: 8px 16px; font-size: 13.5px; border-bottom: 1px solid #F3E2B5; }
.fallo { background: #FDECEA; color: #8A1C14; padding: 10px 16px; font-size: 13.5px; white-space: pre-wrap; border-bottom: 1px solid #F5C9C4; }
.ventana-cuerpo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; padding: 18px; align-items: start; }
.columna-vista { position: sticky; top: 0; }
.subpestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }
.subpestanas button { background: none; border: 0; padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--suave); border-bottom: 2px solid transparent; }
.subpestanas button.activa { color: var(--primario); border-bottom-color: var(--primario); }
.alternar { display: flex; justify-content: center; margin-bottom: 10px; }

/* ---------- vistas previas ---------- */
.previa { background: #fff; border-radius: 12px; box-shadow: var(--sombra); overflow: hidden; font-size: 14px; color: #111; }
.previa .cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.avatar { width: 34px; height: 34px; border-radius: 99px; background: linear-gradient(135deg, var(--primario), var(--acento)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; font-size: 14px; }
.avatar.chico { width: 28px; height: 28px; font-size: 12px; }
.previa .cab b { font-size: 13.5px; }
.previa .cab small { display: block; color: #777; font-size: 12px; }
.lienzo { background: #111; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lienzo img, .lienzo video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lienzo.r45 { aspect-ratio: 4 / 5; }
.lienzo.r916 { aspect-ratio: 9 / 16; max-height: 640px; }
.lienzo.r169 { aspect-ratio: 16 / 9; }
.lienzo.r11 { aspect-ratio: 1 / 1; }
.lienzo .hueco { color: #bbb; font-size: 14px; text-align: center; padding: 20px; }
.lienzo .flecha { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .85); border: 0; border-radius: 99px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; }
.lienzo .flecha.izq { left: 8px; }
.lienzo .flecha.der { right: 8px; }
.lienzo .contador { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 99px; }
.puntos { display: flex; justify-content: center; gap: 4px; padding: 8px 0 0; }
.puntos i { width: 6px; height: 6px; border-radius: 99px; background: #ccc; }
.puntos i.activo { background: #0095f6; }
.iconos { display: flex; gap: 14px; padding: 8px 12px 4px; font-size: 20px; }
.leyenda-post { padding: 4px 12px 12px; white-space: pre-wrap; word-wrap: break-word; }
.leyenda-post .mas { color: #777; cursor: pointer; }
.previa.yt .yt-titulo { font-size: 16px; font-weight: 700; padding: 10px 12px 4px; }
.previa.yt .yt-desc { background: #F2F2F2; margin: 8px 12px 12px; padding: 10px; border-radius: 10px; white-space: pre-wrap; font-size: 13px; }
.previa.li .leyenda-post { padding: 0 12px 10px; }
.previa.li .reacciones { border-top: 1px solid #eee; display: flex; justify-content: space-around; color: #666; font-size: 13px; padding: 8px; font-weight: 600; }
.previa.fb .leyenda-post { padding: 0 12px 10px; }

/* ---------- formularios ---------- */
.campo { margin-bottom: 14px; }
.campo > label, .campo > .etiqueta { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
.campo > label small, .campo > .etiqueta small { font-weight: 400; color: var(--suave); }
.campo input[type=text], .campo input[type=date], .campo input[type=time], .campo input[type=url], .campo select, .campo textarea, textarea.caja {
  width: 100%; border: 1px solid #D9D1E5; border-radius: 10px; padding: 9px 11px; background: #fff;
}
.campo textarea, textarea.caja { min-height: 90px; resize: vertical; }
.campo textarea.largo { min-height: 220px; }
.campo .contador-letras { text-align: right; font-size: 12px; color: var(--suave); margin-top: 3px; }
.campo .contador-letras.pasado { color: var(--error); font-weight: 700; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 130px; }
.opciones { display: flex; gap: 14px; flex-wrap: wrap; }
.opciones label { display: flex; gap: 6px; align-items: center; font-weight: 500; cursor: pointer; }
.archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.archivo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #EFEAF5; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.archivo img, .archivo video { width: 100%; height: 100%; object-fit: cover; }
.archivo .botones { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); padding: 4px; }
.archivo .botones button { border: 0; background: rgba(255, 255, 255, .9); border-radius: 6px; font-size: 12px; padding: 2px 6px; cursor: pointer; }
.archivo .orden { position: absolute; top: 4px; left: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; border-radius: 99px; padding: 0 6px; }
.subir { border: 2px dashed #CDBFE0; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--suave); cursor: pointer; aspect-ratio: 1; padding: 6px; }
.subir:hover { border-color: var(--primario-2); color: var(--primario-2); }
.progreso { height: 6px; border-radius: 99px; background: #EEE; overflow: hidden; margin-top: 8px; }
.progreso i { display: block; height: 100%; background: var(--primario-2); transition: width .2s; }
.guardar { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fondo) 30%); padding: 14px 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.guardar small { color: var(--suave); }

/* ---------- conversación ---------- */
.hilo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.burbuja { background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: var(--sombra); }
.burbuja .quien { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 5px; flex-wrap: wrap; }
.burbuja .quien b { font-size: 13.5px; }
.burbuja .quien time { color: var(--suave); font-size: 12px; }
.burbuja .txt { white-space: pre-wrap; word-wrap: break-word; }
.burbuja.claude { background: #F3EFFF; border: 1px solid #E1D8FB; box-shadow: none; }
.burbuja.pedido { border-left: 4px solid var(--cambio); }
.sistema-linea { text-align: center; font-size: 12.5px; color: var(--suave); white-space: pre-wrap; }
.sistema-linea.fuerte { color: var(--texto); font-weight: 600; }
.etiqueta-estado { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: #EEE; }
.etiqueta-estado.pendiente { background: #FFF1D6; color: #8A5300; }
.etiqueta-estado.trabajando { background: #E7E0FF; color: #4B32B5; }
.etiqueta-estado.listo { background: #DDF4E7; color: #0F6E4A; }
.etiqueta-estado.fallo { background: #FDE2DF; color: #8A1C14; }
.escribir { background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: 10px; }
.escribir textarea { width: 100%; border: 0; resize: vertical; min-height: 70px; outline: none; }
.escribir .acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.escribir .acciones small { margin-right: auto; color: var(--suave); font-size: 12.5px; }
.puntitos::after { content: "…"; animation: puntos 1.2s steps(4) infinite; display: inline-block; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes puntos { from { width: 0; } to { width: 1.1em; } }

/* ---------- versiones ---------- */
.version { background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--sombra); }
.version .fila-v { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.version .fila-v b { margin-right: 4px; }
.version .fila-v span:not(.emo) { color: var(--suave); font-size: 13px; margin-right: auto; }
.diferencias { margin-top: 10px; font-size: 13.5px; white-space: pre-wrap; background: #FBFAFD; border: 1px solid var(--linea); border-radius: 8px; padding: 10px; max-height: 360px; overflow: auto; }
.diferencias ins { background: #D7F5E3; text-decoration: none; }
.diferencias del { background: #FBD9D5; }
.diferencias h5 { margin: 8px 0 4px; font-size: 12.5px; color: var(--suave); text-transform: uppercase; }
.diferencias h5:first-child { margin-top: 0; }

/* ---------- ideas ---------- */
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.idea { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.idea h4 { margin: 0; font-size: 15.5px; cursor: pointer; }
.idea .meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.idea .meta > span { background: #F1EDF6; border-radius: 99px; padding: 2px 8px; }
.idea .det { white-space: pre-wrap; font-size: 13.5px; color: #3B3149; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.idea .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.idea.descartada { opacity: .55; }
.idea .refs { display: flex; gap: 6px; flex-wrap: wrap; }
.idea .refs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.idea .refs a { font-size: 12.5px; word-break: break-all; }
.pedidos { display: flex; flex-direction: column; gap: 6px; }
.pedido-linea { font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.menu { position: relative; display: inline-block; }
.menu-lista { position: absolute; z-index: 30; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 6px; min-width: 200px; bottom: 100%; margin-bottom: 4px; }
.menu-lista button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.menu-lista button:hover { background: #F4F0F9; }

/* ---------- avisos y entrada ---------- */
#avisos { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; width: calc(100% - 32px); max-width: 520px; pointer-events: none; }
.aviso { background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); pointer-events: auto; }
.aviso.mal { background: #8A1C14; }
.entrada { max-width: 420px; margin: 12vh auto; background: #fff; border-radius: 18px; box-shadow: var(--sombra); padding: 32px 24px; text-align: center; }
.entrada h1 { font-size: 20px; margin: 10px 0 6px; }
.entrada p { color: var(--suave); }

@media (max-width: 860px) {
  .ventana-cuerpo { grid-template-columns: 1fr; padding: 12px; }
  .columna-vista { position: static; }
  .fondo-modal { padding: 0; }
  .ventana { border-radius: 0; min-height: 100vh; }
  .lienzo.r916 { max-height: 70vh; }
}
@media (max-width: 560px) {
  main { padding: 14px 12px 80px; }
  .marca-titulo { font-size: 15px; }
  .robot { order: 5; width: 100%; text-align: center; }
  .barra h2 { font-size: 17px; width: 100%; }
}