/* Capital Commerce · estética corporativa y minimalista (Lucho, 10/11): gris oscuro, líneas en crudo, Inter. */
:root {
  --bg: #111111;
  --panel: #171717;
  --panel-2: #1c1c1c;
  --hover: #202020;
  --linea: rgba(237, 232, 220, 0.12);
  --linea-fuerte: rgba(237, 232, 220, 0.28);
  --crudo: #EDE8DC;
  --crudo-2: #A9A496;
  --crudo-3: #6E6A61;
  --ok: #5BB98C;
  --aviso: #D9A441;
  --error: #D65A5A;
  --barra: 236px;
  --cabecera: 56px;
  --bot-ancho: 440px;
  --radio: 6px;
  --suave: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--crudo);
  font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: rgba(237, 232, 220, .18); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(237, 232, 220, .14); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Piezas comunes ------------------------------------------------------------------------------- */
.wordmark { white-space: nowrap; letter-spacing: -.02em; color: var(--crudo); }
.wordmark .l { font-weight: 300; }
.wordmark .b { font-weight: 700; }
.wordmark.grande { font-size: 34px; }
.wordmark.chico { font-size: 15px; letter-spacing: -.01em; }
.pantalla { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; }
.icono { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radio); color: var(--crudo-2); transition: background .15s, color .15s; }
.icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icono:hover { background: var(--hover); color: var(--crudo); }
.link { color: var(--crudo-2); font-size: 13px; }
.link:hover { color: var(--crudo); }
.primario {
  width: 100%; padding: 11px 14px; border-radius: var(--radio); background: var(--crudo); color: #111; font-weight: 600;
  transition: opacity .15s, transform .15s;
}
.primario:hover { opacity: .92; }
.primario:active { transform: scale(.99); }
.primario[disabled] { opacity: .5; cursor: default; }
.error { font-size: 13px; color: var(--error); border: 1px solid rgba(214, 90, 90, .35); border-radius: var(--radio); padding: 8px 10px; }
.etiqueta { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--crudo-3); }
.solo-celu { display: none !important; }

/* --- Ingreso --------------------------------------------------------------------------------------- */
#login { padding: 24px 16px; }
.login-caja {
  width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px;
  animation: aparecer .5s var(--suave) both;
}
.login-caja .wordmark { text-align: center; margin-bottom: 18px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-radius: var(--radio); padding: 3px; gap: 3px; }
.roles .rol { padding: 8px 10px; border-radius: 4px; font-size: 13px; color: var(--crudo-2); transition: background .2s, color .2s; }
.roles .rol.activo { background: var(--panel-2); color: var(--crudo); box-shadow: inset 0 0 0 1px var(--linea); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: 12px; color: var(--crudo-2); }
.campo input {
  padding: 11px 12px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--panel); outline: 0;
  transition: border-color .15s;
}
.campo input:focus { border-color: var(--linea-fuerte); }
.recordar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--crudo-2); cursor: pointer; user-select: none; }
.recordar input { position: absolute; opacity: 0; width: 0; height: 0; }
.recordar .caja { width: 16px; height: 16px; border: 1px solid var(--linea-fuerte); border-radius: 4px; display: inline-grid; place-items: center; transition: background .15s, border-color .15s; }
.recordar .caja::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #111; transform: scale(0); transition: transform .15s var(--suave); }
.recordar input:checked + .caja { background: var(--crudo); border-color: var(--crudo); }
.recordar input:checked + .caja::after { transform: scale(1); }
.recordar input:focus-visible + .caja { outline: 1px solid var(--crudo); outline-offset: 2px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Carga ---------------------------------------------------------------------------------------- */
#carga { background: radial-gradient(120% 90% at 50% 0%, #1b1b1b 0%, #111 55%, #0d0d0d 100%); transition: opacity .6s ease; }
#carga.yendo { opacity: 0; }
#particulas { position: absolute; inset: 0; width: 100%; height: 100%; }
.carga-centro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.carga-titulo { font-size: clamp(34px, 6vw, 58px); opacity: 0; transform: translateY(10px); transition: opacity .7s ease .25s, transform .7s var(--suave) .25s; transform-origin: left center; }
#carga.viva .carga-titulo { opacity: 1; transform: none; }
.carga-titulo.morfeando { position: fixed; left: 0; top: 0; margin: 0; transition: transform .75s var(--suave), opacity .75s ease; z-index: 60; opacity: 1 !important; }
.carga-linea { width: 160px; height: 1px; background: var(--linea); overflow: hidden; opacity: 0; transition: opacity .5s ease .5s; }
#carga.viva .carga-linea { opacity: 1; }
#carga.yendo .carga-linea { opacity: 0; transition: opacity .2s; }
.carga-linea i { display: block; height: 100%; width: 0; background: var(--crudo); transition: width .4s ease; }

/* --- Estructura ----------------------------------------------------------------------------------- */
#app { position: fixed; inset: 0; display: flex; opacity: 1; transition: opacity .6s ease; }
#app.preparando { opacity: 0; pointer-events: none; }
#barra {
  width: var(--barra); flex: none; display: flex; flex-direction: column; background: var(--panel);
  border-right: 1px solid var(--linea); padding: 14px 10px; gap: 6px; z-index: 20;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.logo .isotipo { width: 26px; height: 26px; border-radius: 6px; flex: none; }
#menu { display: flex; flex-direction: column; gap: 2px; }
#menu a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radio); color: var(--crudo-2);
  font-size: 13.5px; transition: background .15s, color .15s;
}
#menu a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .85; }
#menu a:hover { background: var(--hover); color: var(--crudo); }
#menu a.activo { background: var(--panel-2); color: var(--crudo); box-shadow: inset 0 0 0 1px var(--linea); }
#menu a .pend { margin-left: auto; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--crudo-3); }
.barra-pie { margin-top: auto; padding: 8px 10px; border-top: 1px solid var(--linea); }
.fondo-barra { display: none; }

#cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: padding-right .35s var(--suave); }
#cabecera {
  height: var(--cabecera); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-bottom: 1px solid var(--linea); background: var(--bg);
}
#cabecera h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cab-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#seccion { flex: 1; overflow: auto; padding: 28px 32px 60px; }

/* Desplegables de la cabecera */
.desplegable { position: relative; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--linea);
  border-radius: var(--radio); font-size: 13px; color: var(--crudo); transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--linea-fuerte); background: var(--panel); }
.chip .flecha { width: 10px; height: 10px; fill: none; stroke: var(--crudo-3); stroke-width: 1.6; stroke-linecap: round; transition: transform .2s; }
.desplegable.abierto .chip .flecha { transform: rotate(180deg); }
.chip.usuario { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.15; padding: 0 12px; text-align: left; }
.chip.usuario .nombre { font-weight: 500; font-size: 12.5px; }
.chip.usuario .rol { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--crudo-3); }
.chip.campana { width: 34px; padding: 0; justify-content: center; position: relative; }
.chip.campana svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chip.campana .punto { position: absolute; top: 7px; right: 8px; min-width: 7px; height: 7px; border-radius: 7px; background: var(--crudo); transform: scale(0); transition: transform .25s var(--suave); }
.chip.campana .punto.visible { transform: scale(1); }
.menu-flotante {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--panel); border: 1px solid var(--linea);
  border-radius: 8px; padding: 6px; z-index: 40; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  transform-origin: top right; opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none;
  transition: opacity .18s ease, transform .18s var(--suave);
}
.desplegable.abierto .menu-flotante { opacity: 1; transform: none; pointer-events: auto; }
.menu-flotante .titulo { padding: 6px 10px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--crudo-3); }
.menu-flotante .item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radio);
  font-size: 13.5px; color: var(--crudo); transition: background .12s;
}
.menu-flotante .item:hover { background: var(--hover); }
.menu-flotante .item.actual { background: var(--panel-2); }
.menu-flotante .item .tilde { width: 12px; height: 12px; fill: none; stroke: var(--crudo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: 0; }
.menu-flotante .item.actual .tilde { opacity: 1; }
.menu-flotante .sep { height: 1px; background: var(--linea); margin: 6px 4px; }
.menu-flotante .nueva { color: var(--crudo-2); }
.menu-flotante .nueva:hover { color: var(--crudo); }
.menu-flotante form.nueva-marca { display: flex; gap: 6px; padding: 4px; }
.menu-flotante form.nueva-marca input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 4px; border: 1px solid var(--linea); background: var(--bg); outline: 0; }
.menu-flotante form.nueva-marca input:focus { border-color: var(--linea-fuerte); }
.menu-flotante form.nueva-marca button { padding: 0 10px; border-radius: 4px; background: var(--crudo); color: #111; font-size: 12.5px; font-weight: 600; }
.menu-flotante.notis { width: 360px; max-width: calc(100vw - 32px); padding: 0; }
.menu-flotante.notis .cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.menu-flotante.notis .cab b { font-size: 13px; font-weight: 600; }
.menu-flotante.notis .lista { max-height: 420px; overflow: auto; }
.noti { display: block; width: 100%; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); transition: background .12s; }
.noti:last-child { border-bottom: 0; }
.noti:hover { background: var(--hover); }
.noti .t { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 500; }
.noti .t .cuando { margin-left: auto; font-size: 11px; color: var(--crudo-3); font-weight: 400; white-space: nowrap; }
.noti .t .nuevo { width: 6px; height: 6px; border-radius: 6px; background: var(--crudo); flex: none; }
.noti.vista .t { color: var(--crudo-2); font-weight: 400; }
.noti.vista .t .nuevo { visibility: hidden; }
.noti p { margin: 3px 0 0 14px; font-size: 12.5px; color: var(--crudo-2); white-space: pre-wrap; }
.noti .de { font-size: 11px; color: var(--crudo-3); margin-left: 14px; }
.vacio { padding: 28px 12px; text-align: center; font-size: 13px; color: var(--crudo-3); }

/* --- Secciones ------------------------------------------------------------------------------------- */
.seccion { max-width: 1100px; margin: 0 auto; animation: aparecer .35s var(--suave) both; }
.seccion h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.seccion .bajada { margin: 0 0 24px; color: var(--crudo-2); font-size: 14px; max-width: 720px; }
.tarjeta { border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); padding: 18px 20px; }
.tarjeta + .tarjeta { margin-top: 14px; }
.tarjeta h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.tarjeta p { margin: 0; color: var(--crudo-2); font-size: 13.5px; }
.pendiente { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); font-size: 12px; color: var(--crudo-2); }
.pendiente::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: var(--aviso); }
.lista-partes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* --- Piezas de las secciones (etapa 2) ----------------------------------------------------------------- */
.sec-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sec-cab .bajada { margin-bottom: 0; }
.sec-cab h2 { margin-bottom: 4px; }
.sec-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-sub { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.sec-sub h3 { margin: 0; font-size: 14px; font-weight: 600; }
.sec-sub.grande { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linea); }
.sec-sub.grande h3 { font-size: 16px; }
.sec-sub .n { font-size: 12px; color: var(--crudo-3); }
.esp { flex: 1; }
.boton { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font-size: 13px; color: var(--crudo); transition: background .15s, border-color .15s; white-space: nowrap; }
.boton:hover { background: var(--hover); }
.boton.chico { padding: 5px 10px; font-size: 12.5px; }
.boton.primario { width: auto; background: var(--crudo); color: #111; border-color: var(--crudo); }
.boton.primario:hover { opacity: .92; background: var(--crudo); }
.boton.ok { border-color: rgba(91, 185, 140, .6); color: var(--ok); }
.boton.activo { background: var(--panel-2); }
.boton[disabled] { opacity: .5; cursor: default; }
.segmentos { display: inline-flex; gap: 2px; border: 1px solid var(--linea); border-radius: var(--radio); padding: 2px; flex-wrap: wrap; }
.segmentos button { padding: 5px 10px; border-radius: 4px; font-size: 12.5px; color: var(--crudo-2); transition: background .15s, color .15s; }
.segmentos button.activo { background: var(--panel-2); color: var(--crudo); box-shadow: inset 0 0 0 1px var(--linea); }
.segmentos button:hover { color: var(--crudo); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.nota { font-size: 12.5px; color: var(--crudo-2); margin-top: 6px; }
.ok { color: var(--ok); } .mal { color: var(--error); }
.chipito { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--linea); border-radius: 999px; font-size: 11px; color: var(--crudo-2); white-space: nowrap; }
.chipito.ok { border-color: rgba(91, 185, 140, .5); color: var(--ok); }
.estado-chip { display: inline-block; padding: 3px 9px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--linea); font-size: 12px; }
input[type=text], input[type=date], textarea.campo-texto { padding: 9px 11px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--bg); color: var(--crudo); outline: 0; font: inherit; }
input[type=text]:focus, input[type=date]:focus { border-color: var(--linea-fuerte); }
input[type=date] { color-scheme: dark; }
textarea { width: 100%; padding: 9px 11px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--bg); color: var(--crudo); outline: 0; font: inherit; resize: vertical; }
textarea:focus { border-color: var(--linea-fuerte); }
.tabla-envoltura { overflow: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--crudo-3); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.vacio { text-align: left; color: var(--crudo-2); padding: 18px 12px; }
.paginado { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--crudo-3); flex-wrap: wrap; }
.aviso-flotante { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); background: var(--crudo); color: #111; padding: 8px 14px; border-radius: 999px; font-size: 13px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 70; }
.aviso-flotante.ver { opacity: 1; transform: translateX(-50%); }
.vacio.chico { padding: 14px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--crudo-2); margin: 0 0 12px; }
.leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 8px; margin-right: 6px; vertical-align: middle; }
[contenteditable]:empty::before { content: attr(data-ph); color: var(--crudo-3); pointer-events: none; }
[contenteditable] { outline: 0; }

/* Dashboard */
.tablero { margin-bottom: 18px; }
.be { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px; color: var(--crudo-2); margin-bottom: 12px; }
.be b { color: var(--crudo); font-weight: 600; }
.be-nota { color: var(--crudo-3); }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.col { border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.col .etiqueta { grid-column: 1 / -1; }
.tile-nombre { font-size: 11.5px; color: var(--crudo-2); }
.tile-valor { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.tile-nota { font-size: 11px; color: var(--crudo-3); margin-top: 2px; }
.tile-pend { color: var(--aviso); }
.grafico-caja { margin-bottom: 18px; }
.grafico-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fechas { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--crudo-2); }
.segmentos.metricas { border: 0; padding: 0; gap: 6px; margin-bottom: 8px; }
.segmentos.metricas button { border: 1px solid var(--linea); }
.grafico { position: relative; height: 240px; }
.grafico canvas { width: 100%; height: 100%; display: block; }
.grafico-capa { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to bottom, rgba(23, 23, 23, .2), rgba(23, 23, 23, .75)); }
.grafico-pie { font-size: 12.5px; color: var(--crudo-2); margin-top: 8px; }

/* Organic content */
.mes-nav { display: inline-flex; align-items: center; gap: 4px; }
.mes-nav b { min-width: 130px; text-align: center; font-weight: 500; }
.aviso-pausa { font-size: 13px; color: var(--aviso); margin: -6px 0 12px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .cab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--crudo-3); padding: 0 0 4px 6px; }
.celda { min-height: 96px; text-align: left; padding: 8px; border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s; position: relative; }
.celda:hover { border-color: var(--linea-fuerte); background: var(--panel-2); }
.celda.fuera { background: transparent; border-color: transparent; pointer-events: none; }
.celda.hoy { border-color: var(--crudo-2); }
.celda .num { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.celda .marca { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--crudo-3); font-weight: 400; }
.celda .est { font-size: 11px; padding: 1px 6px; border-radius: 4px; align-self: flex-start; }
.celda .tema { font-size: 11.5px; color: var(--crudo-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.celda .cuenta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--crudo-3); margin-top: auto; }
.e-propuesta { background: rgba(127, 184, 255, .18); color: #9CC8FF; }
.e-armando { background: rgba(110, 106, 97, .25); color: var(--crudo-2); }
.e-revisar { background: rgba(217, 164, 65, .18); color: var(--aviso); }
.e-aprobado, .e-publicado { background: rgba(91, 185, 140, .16); color: var(--ok); }
.e-correcciones, .e-pausado { background: rgba(214, 90, 90, .16); color: var(--error); }
.celda.pausado { border-color: rgba(214, 90, 90, .45); background: rgba(214, 90, 90, .06); }
.cal.modo-pausa .celda { cursor: cell; }
.oc-bloque { margin-top: 24px; }
.historias { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.historias .pieza { flex: 0 0 240px; scroll-snap-align: start; }
.publicaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.canales { display: grid; gap: 10px; }
.pieza { border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); padding: 12px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.pieza.publicada { opacity: .72; }
.pieza .arriba { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pieza .hora { font-weight: 600; font-size: 13px; }
.pieza .titulo { font-weight: 600; }
.pieza .linea { color: var(--crudo-2); font-size: 12.5px; }
.pieza .marco { aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--bg); display: flex; }
.pieza .marco img, .pieza .marco video { width: 100%; height: 100%; object-fit: cover; }
.pieza .marco.multi { overflow-x: auto; scroll-snap-type: x mandatory; }
.pieza .marco.multi a, .pieza .marco.multi video { flex: 0 0 100%; scroll-snap-align: start; }
.pieza .medios { display: flex; gap: 6px; overflow-x: auto; border-radius: 6px; }
.pieza .medios img, .pieza .medios video { height: 220px; border-radius: 6px; flex: none; }
.pieza .medios.uno img, .pieza .medios.uno video { height: auto; width: 100%; max-height: 420px; object-fit: cover; }
.sin-medio { margin: auto; color: var(--crudo-3); font-size: 12px; }
.pegar summary { cursor: pointer; font-size: 12.5px; color: var(--crudo-2); }
.pegar .texto, .texto.burbuja { white-space: pre-wrap; font-size: 13px; margin-top: 6px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--linea); border-radius: 6px; }
.rev { font-size: 12.5px; color: var(--crudo-2); display: flex; align-items: center; gap: 6px; }
.rev.ok { color: var(--ok); }
.rev .late { width: 6px; height: 6px; border-radius: 6px; background: var(--aviso); animation: latir 1.2s ease-in-out infinite; }
.caja-cambio { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.caja-cambio textarea { min-height: 64px; }
.salida { border-top: 1px dashed var(--linea); padding-top: 8px; margin-top: 4px; }
.cab-salida { font-size: 12.5px; }
.cupones { margin-top: 14px; }
.cupon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.cupon.hecho { opacity: .6; }
.cupon .codigo { font-family: ui-monospace, Menlo, Consolas, monospace; }
.cupon .acciones { margin: 0; }

/* Batches */
.nuevo-batch { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.nuevo-batch input { width: 100%; }
.lista-batches { display: flex; flex-direction: column; }
.batch-item { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--linea); border-radius: var(--radio); transition: background .12s; }
.batch-item:hover { background: var(--hover); }
.batch-item .num { font-size: 12px; color: var(--crudo-3); width: 40px; flex: none; }
.batch-item .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.batch-item .t { font-weight: 500; }
.batch-item .s { font-size: 12.5px; color: var(--crudo-2); }
.listo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--crudo-3); white-space: nowrap; }
.listo i { width: 8px; height: 8px; border-radius: 8px; border: 1px solid var(--crudo-3); }
.listo.si { color: var(--ok); }
.listo.si i { background: var(--ok); border-color: var(--ok); }
.radar-buyer { margin-bottom: 12px; }
.radar-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.radar-cab .nota { margin: 0; }
.radar-sub { margin-top: 10px; }
.radar-sub-nombre { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--crudo-3); margin-bottom: 6px; }
.radar-tabla { display: flex; flex-direction: column; gap: 4px; }
.radar-fila { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(90px, 1fr)); gap: 6px; align-items: stretch; }
.radar-fila.cab span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--crudo-3); text-align: center; }
.radar-fila .concepto { font-size: 13px; display: flex; flex-direction: column; justify-content: center; }
.radar-fila .concepto .nota { margin: 0; font-size: 11.5px; }
.celda-radar { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; min-height: 36px; padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.celda-radar i { position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-radius: 7px; background: var(--c); }
.celda-radar em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--crudo); }
.feedback-form { margin-bottom: 14px; }
.feedback-form .acciones input { flex: 1; min-width: 160px; }
.feedback-item { padding: 10px 0; border-top: 1px solid var(--linea); }
.feedback-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--crudo-3); margin-bottom: 4px; }
.feedback-item .texto { white-space: pre-wrap; font-size: 13.5px; }

/* La página de un batch (editor por bloques) */
.pagina-batch { max-width: 820px; position: relative; }
.pb-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 13px; }
.guardado { font-size: 12px; color: var(--crudo-3); }
.pb-num { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--crudo-3); margin-bottom: 4px; }
.pb-titulo { margin: 0 0 6px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pb-sub { font-size: 15px; color: var(--crudo-2); margin-bottom: 26px; }
.pb-bloques { display: flex; flex-direction: column; gap: 2px; }
.bloque { position: relative; padding-left: 28px; }
.bloque [contenteditable] { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.bloque p { margin: 0; padding: 4px 0; font-size: 15px; line-height: 1.6; }
.bloque h2 { margin: 0; padding: 14px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.bloque h3 { margin: 0; padding: 10px 0 2px; font-size: 17px; font-weight: 600; }
.bloque-mas { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 4px; color: var(--crudo-3); font-size: 15px; line-height: 1; opacity: 0; transition: opacity .12s, background .12s; }
.bloque:hover .bloque-mas, .bloque:focus-within .bloque-mas { opacity: 1; }
.bloque-mas:hover { background: var(--hover); color: var(--crudo); }
.bloque.medio { padding: 8px 0 8px 28px; }
.bloque.medio img, .bloque.medio video { max-width: 100%; max-height: 520px; border-radius: 8px; border: 1px solid var(--linea); display: block; }
.bloque.medio .epigrafe { width: 100%; margin-top: 6px; border: 0; background: transparent; padding: 2px 0; font-size: 12.5px; color: var(--crudo-2); }
.bloque-x { position: absolute; right: 0; top: 12px; width: 24px; height: 24px; border-radius: 4px; color: var(--crudo-3); font-size: 16px; opacity: 0; transition: opacity .12s; }
.bloque.medio:hover .bloque-x { opacity: 1; }
.bloque-x:hover { background: var(--hover); color: var(--error); }
.pb-agregar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 20px 0 0 28px; }
.pb-agregar .nota { margin: 0 4px 0 0; }
.pb-pie { display: flex; align-items: center; gap: 14px; margin: 44px 0 0 28px; padding-top: 20px; border-top: 1px solid var(--linea); }
.menu-bloque { position: absolute; z-index: 10; background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; padding: 4px; min-width: 150px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); display: flex; flex-direction: column; }
.menu-bloque button { text-align: left; padding: 7px 10px; border-radius: 4px; font-size: 13px; color: var(--crudo); }
.menu-bloque button:hover, .menu-bloque button.activo { background: var(--hover); }

/* Team Schedule */
.ts-resumen { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--crudo-2); margin-bottom: 14px; }
.ts-resumen b { color: var(--crudo); }
.cuellos { margin-bottom: 18px; border-color: rgba(217, 164, 65, .45); }
.ts-lista { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.ts-fila { display: grid; grid-template-columns: 56px 110px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--linea); background: var(--panel); font-size: 13.5px; }
.ts-fila:last-child { border-bottom: 0; }
.ts-fila.hecha { opacity: .6; }
.ts-fila.apagada { opacity: .4; }
.ts-fila .hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-fila .quien { font-size: 12.5px; color: var(--crudo-2); }
.ts-fila .quien.bot { color: var(--crudo); }
.ts-fila .que { display: flex; flex-direction: column; }
.ts-fila .que .nota { margin: 0; }
.marcar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--crudo-3); white-space: nowrap; }
.marcar i { width: 9px; height: 9px; border-radius: 9px; border: 1px solid var(--crudo-3); }
.marcar.si { color: var(--ok); } .marcar.si i { background: var(--ok); border-color: var(--ok); }
button.marcar:hover { color: var(--crudo); }
.ts-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ts-dia { border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); padding: 8px; min-height: 120px; }
.ts-dia.hoy { border-color: var(--crudo-2); }
.ts-dia-nombre { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--crudo-3); margin-bottom: 6px; }
.ts-mini { font-size: 11.5px; padding: 3px 0; border-top: 1px solid var(--linea); display: flex; gap: 6px; }
.ts-mini .hora { color: var(--crudo-3); flex: none; }
.ts-mini.bot span:last-child { color: var(--crudo-2); }
.ts-miembros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ts-miembro-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ts-miembro-cab .nota { margin: 0; }
.ts-grupo { margin-top: 10px; }
.ts-item { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--linea); }
.ts-item .hora { color: var(--crudo-3); min-width: 40px; }
.ts-tarea { padding: 8px 10px; border: 1px solid var(--linea); border-radius: 6px; margin-top: 6px; font-size: 13px; border-left-width: 3px; }
.ts-tarea.e-hecha { opacity: .55; border-left-color: var(--ok); }
.ts-tarea.e-revision { border-left-color: var(--aviso); }
.ts-tarea.e-no_hecha, .ts-tarea.vencida { border-left-color: var(--error); }
.ts-tarea.e-pendiente { border-left-color: var(--crudo-3); }
.ts-tarea-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ts-tarea-cab .texto { font-weight: 500; }
.ts-tarea-cab .nota { margin: 0; margin-left: auto; }
.ts-tarea-pie { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
select { padding: 5px 8px; border-radius: 4px; border: 1px solid var(--linea); background: var(--bg); color: var(--crudo); font: inherit; font-size: 12.5px; }
.ts-form { margin-top: 16px; }
.ts-form form, .form-col { display: flex; flex-direction: column; gap: 8px; }
.dias-check { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--crudo-2); }
.dias-check label { display: inline-flex; align-items: center; gap: 4px; }
input[type=checkbox] { accent-color: var(--crudo); }
input[type=number], input[type=email], input[type=tel] { padding: 9px 11px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--bg); color: var(--crudo); outline: 0; font: inherit; }

/* Equipo */
.miembros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.miembro-cab { display: flex; align-items: center; gap: 10px; }
.miembro-cab .nota { margin: 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--linea); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.estado-linea { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--crudo-3); white-space: nowrap; }
.estado-linea i { width: 8px; height: 8px; border-radius: 8px; background: var(--crudo-3); }
.miembro.en-linea .estado-linea { color: var(--ok); }
.miembro.en-linea .estado-linea i { background: var(--ok); box-shadow: 0 0 0 3px rgba(91, 185, 140, .2); }
.tabla.bd .editable { cursor: text; border-bottom: 1px dashed var(--linea-fuerte); }
.tabla.bd code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.mapa { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mapa-fila { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mapa-linea { width: 1px; height: 28px; background: var(--linea-fuerte); }
.nodo { border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); padding: 12px 14px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.nodo.bot { border-style: dashed; }
.nodo .nota { margin: 0; }
.nodo .pago { font-weight: 600; margin-top: 4px; }
.nodo .acciones { margin-top: 6px; gap: 10px; }
.nodo .nota.ok { color: var(--ok); } .nodo .nota.mal { color: var(--error); } .nodo .nota.aviso { color: var(--aviso); }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 45; padding: 16px; }
.modal-caja { width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; animation: aparecer .2s var(--suave) both; }
.modal-caja h3 { margin: 0 0 4px; font-size: 15px; }
.chat-cab { display: flex; align-items: center; gap: 8px; }
.chat-msjs { height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }

/* Investigación de mercado */
.inv-indice { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inv-indice a { padding: 5px 10px; border: 1px solid var(--linea); border-radius: 999px; font-size: 12.5px; color: var(--crudo-2); }
.inv-indice a:hover { color: var(--crudo); border-color: var(--linea-fuerte); }
.grupo-titulo { margin: 18px 0 8px; }
.marcas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.marca { display: flex; flex-direction: column; gap: 6px; }
.marca-cab { display: flex; align-items: center; gap: 10px; }
.marca-cab.grande { margin-bottom: 8px; }
.marca-cab.grande h2 { margin: 0; }
.marca-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.marca-nombre .nota { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.logo-marca { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; object-fit: cover; border: 1px solid var(--linea); color: var(--crudo); }
.marca-datos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--crudo-2); align-items: center; margin-bottom: 10px; }
.marca-datos b { color: var(--crudo); }
.marca-resumen { margin: 0; font-size: 13px; color: var(--crudo-2); }
.marca-ultima { font-size: 12.5px; color: var(--crudo-2); border-top: 1px solid var(--linea); padding-top: 6px; }
.grupo-sel { font-size: 11.5px; }
.foto-producto { height: 48px; border-radius: 6px; border: 1px solid var(--linea); }
.mercado-dias { display: flex; flex-direction: column; gap: 4px; }
.mercado-dia { border: 1px solid var(--linea); border-radius: 8px; background: var(--panel); padding: 8px 12px; font-size: 13px; }
.mercado-dia summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; list-style: none; }
.mercado-dia summary::-webkit-details-marker { display: none; }
.mercado-dia summary .nota { margin: 0; }
.mercado-dia .texto { white-space: pre-wrap; margin-top: 8px; font-size: 13px; color: var(--crudo); }
.mercado-dia .nota { margin-top: 6px; }
.reno-dia { margin-top: 10px; }
.mini-ads { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 10px; }
.mini-ad { flex: 0 0 120px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; border: 1px solid var(--linea); position: relative; background: var(--bg); }
.mini-ad img, .mini-ad video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-ad .sin-medio { position: absolute; inset: 0; display: grid; place-items: center; }
.mini-ad .mini-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 6px; font-size: 10.5px; color: var(--crudo); text-align: left; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-ad:hover { border-color: var(--linea-fuerte); }
.mini-ad.mas { display: grid; place-items: center; font-size: 12px; color: var(--crudo-2); background: var(--panel); }
.inv-item { border-top: 1px solid var(--linea); padding: 10px 0; font-size: 13px; }
.inv-item summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.inv-item summary .nota { margin: 0; }
.inv-item .texto { white-space: pre-wrap; margin-top: 8px; }
.inv-ads { margin: 4px 0 0; padding-left: 18px; }
.inv-rutina { margin-top: 10px; }
.inv-rutina > summary { cursor: pointer; }
.lista-simple { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.modal-caja.ancha { max-width: 900px; }
.ad-visor { background: #000; border-radius: 8px; display: grid; place-items: center; min-height: 200px; }
.ad-visor video, .ad-visor img { max-width: 100%; max-height: 60vh; display: block; }
.ad-desglose { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ad-desglose .nota { margin-top: 4px; }
.tarjeta .texto { white-space: pre-wrap; font-size: 13px; margin: 6px 0 0; }

.codigo-largo { display: block; padding: 8px 10px; background: var(--bg); border: 1px solid var(--linea); border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; margin: 6px 0 10px; }
.menu-flotante a.item { text-decoration: none; }

/* Stock */
.stock-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 12px; }
.tile-valor.grande { font-size: 34px; }
.tile-valor small { font-size: 12px; color: var(--crudo-2); font-weight: 400; }
.aviso-stock { margin-bottom: 14px; font-size: 13.5px; border-left-width: 3px; }
.aviso-stock.ok { border-left-color: var(--ok); } .aviso-stock.mal { border-left-color: var(--error); } .aviso-stock.aviso { border-left-color: var(--aviso); }
.grafico.stock { height: 220px; }
.caja-stock { margin: 14px 0; }
.producto-stock + .producto-stock { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); }

@media (max-width: 900px) {
  .ts-fila { grid-template-columns: 50px 1fr auto; }
  .ts-fila .quien { grid-column: 2; }
  .ts-semana { grid-template-columns: 1fr; }
  .columnas { grid-template-columns: 1fr; }
  .col { grid-template-columns: 1fr 1fr; }
  .cal { gap: 3px; }
  .celda { min-height: 62px; padding: 5px; }
  .celda .tema, .celda .cuenta, .celda .est { display: none; }
  .radar-fila { grid-template-columns: 1fr; }
  .radar-fila.cab { display: none; }
  .celda-radar { justify-content: flex-start; padding-left: 20px; }
  .celda-radar::before { content: attr(data-etapa); font-size: 11px; color: var(--crudo-2); margin-right: 4px; }
  .pb-titulo { font-size: 26px; }
}

/* --- Bot ------------------------------------------------------------------------------------------- */
#bot { position: fixed; right: 20px; bottom: 20px; z-index: 30; }
.bot-boton {
  width: 50px; height: 50px; border-radius: 50%; background: var(--crudo); color: #111; display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: transform .3s var(--suave), opacity .25s ease; position: relative; z-index: 2;
}
.bot-boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.bot-boton:hover { transform: translateY(-2px); }
#bot[data-estado="abierto"] .bot-boton, #bot[data-estado="dock"] .bot-boton { transform: scale(.4); opacity: 0; pointer-events: none; }
.bot-panel {
  position: absolute; right: 0; bottom: 0; width: 400px; height: 580px; max-height: calc(100vh - 40px); max-width: calc(100vw - 40px);
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); transform-origin: bottom right; transform: scale(.5); opacity: 0; pointer-events: none;
  transition: transform .35s var(--suave), opacity .25s ease, width .35s var(--suave), height .35s var(--suave), border-radius .35s;
  overflow: hidden;
}
#bot[data-estado="abierto"] .bot-panel { transform: none; opacity: 1; pointer-events: auto; }
#bot[data-estado="dock"] .bot-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--bot-ancho); height: auto; max-height: none; max-width: none;
  border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; transform: none; opacity: 1; pointer-events: auto; box-shadow: none;
}
body[data-bot="dock"] #cuerpo { padding-right: var(--bot-ancho); }
.bot-redim { display: none; position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; }
.bot-redim::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background .15s; }
.bot-redim:hover::after, .bot-redim.activo::after { background: var(--linea-fuerte); }
#bot[data-estado="dock"] .bot-redim { display: block; }
#bot.redimensionando .bot-panel, body.redimensionando #cuerpo { transition: none; }
body.redimensionando { user-select: none; cursor: ew-resize; }
.bot-cab { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--linea); }
.bot-titulo { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 0 6px; }
.bot-nombre { font-weight: 600; font-size: 13.5px; }
.bot-chat-titulo { font-size: 12.5px; color: var(--crudo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-achicar { display: none; }
#bot[data-estado="dock"] .ic-agrandar { display: none; }
#bot[data-estado="dock"] .ic-achicar { display: block; }
.bot-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.bot-lista { position: absolute; inset: 0; z-index: 4; background: var(--panel); overflow: auto; padding: 8px; animation: aparecer .2s var(--suave) both; }
.bot-lista .chat-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radio); transition: background .12s; }
.bot-lista .chat-item:hover { background: var(--hover); }
.bot-lista .chat-item.actual { background: var(--panel-2); }
.bot-lista .chat-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.bot-lista .chat-item .f { font-size: 11px; color: var(--crudo-3); white-space: nowrap; }
.bot-lista .chat-item .x { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--crudo-3); opacity: 0; transition: opacity .12s, color .12s; }
.bot-lista .chat-item:hover .x { opacity: 1; }
.bot-lista .chat-item .x:hover { color: var(--error); }
.bot-lista .chat-item .x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bot-lista .nuevo-chat { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radio); color: var(--crudo-2); font-size: 13.5px; border: 1px dashed var(--linea); margin-bottom: 6px; }
.bot-lista .nuevo-chat:hover { color: var(--crudo); border-color: var(--linea-fuerte); }
.bot-mensajes { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.msj { max-width: 92%; font-size: 13.5px; line-height: 1.5; animation: aparecer .25s var(--suave) both; word-break: break-word; }
.msj.usuario { align-self: flex-end; background: var(--panel-2); border: 1px solid var(--linea); border-radius: 12px 12px 3px 12px; padding: 8px 12px; white-space: pre-wrap; }
.msj.usuario.en-cola { opacity: .6; }
.msj.bot { align-self: flex-start; padding: 0 2px; white-space: pre-wrap; }
.msj.bot .quien { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--crudo-3); margin-bottom: 3px; }
.msj.aviso { align-self: center; font-size: 12px; color: var(--crudo-3); text-align: center; }
.msj.error { align-self: center; font-size: 12px; color: var(--error); text-align: center; }
.msj code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.msj .ir { display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0; padding: 5px 10px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-size: 12.5px; color: var(--crudo); transition: background .12s; }
.msj .ir:hover { background: var(--hover); }
.msj .adj { display: block; margin-top: 6px; max-width: 100%; border-radius: 8px; border: 1px solid var(--linea); }
.msj .adj.archivo { display: inline-flex; padding: 6px 10px; font-size: 12.5px; color: var(--crudo-2); }
.bot-estado { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: var(--crudo-2); }
.bot-estado i { width: 6px; height: 6px; border-radius: 6px; background: var(--crudo); animation: latir 1.2s ease-in-out infinite; }
.bot-estado .link { margin-left: auto; font-size: 12px; }
@keyframes latir { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.bot-form { padding: 8px 10px 10px; border-top: 1px solid var(--linea); }
.bot-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; }
.bot-adjuntos .adj { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--linea); border-radius: 999px; font-size: 12px; color: var(--crudo-2); }
.bot-adjuntos .adj button { color: var(--crudo-3); font-size: 14px; line-height: 1; }
.bot-entrada { display: flex; align-items: flex-end; gap: 4px; border: 1px solid var(--linea); border-radius: 10px; padding: 4px; background: var(--bg); transition: border-color .15s; }
.bot-entrada:focus-within { border-color: var(--linea-fuerte); }
.bot-entrada textarea { flex: 1; min-width: 0; resize: none; border: 0; background: none; outline: 0; padding: 7px 6px; max-height: 160px; line-height: 1.45; }
.bot-entrada .enviar { color: var(--crudo); }
.bot-entrada .enviar[disabled] { color: var(--crudo-3); cursor: default; }

/* --- Celular y tablet ------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .solo-celu { display: inline-grid !important; }
  .logo-celu.solo-celu { display: inline-flex !important; }
  #barra { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .3s var(--suave); box-shadow: 0 0 60px rgba(0, 0, 0, .6); }
  body.menu-abierto #barra { transform: none; }
  .fondo-barra { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 19; }
  body.menu-abierto .fondo-barra { opacity: 1; pointer-events: auto; }
  #cabecera { padding: 0 12px; gap: 8px; }
  #cabecera h1 { display: none; }
  #seccion { padding: 20px 16px 90px; }
  .chip.usuario .nombre { display: none; }
  .chip.usuario { width: 34px; padding: 0; align-items: center; }
  .chip.usuario .rol { font-size: 10px; }
  .chip .nombre-marca { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
  #bot { right: 14px; bottom: 14px; }
  #bot[data-estado="abierto"] .bot-panel, #bot[data-estado="dock"] .bot-panel { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; border: 0; }
  body[data-bot="dock"] #cuerpo { padding-right: 0; }
  #bot[data-estado="dock"] .bot-redim, #botAgrandar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}