/* Minor — tema claro estilo iOS. Pensado primero para iPhone: nada se sale
   de los lados; la página solo se desplaza hacia arriba y hacia abajo. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fill: #f2f2f7;          /* fondos secundarios (inputs, segmentado) */
  --fill-2: #e5e5ea;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #86868b;
  --line: #e5e5ea;
  --accent: #13203c;            /* azul marino del logo de Minor Hotels */
  --accent-soft: rgba(19, 32, 60, .1);
  --red: #ff3b30;  --red-soft: rgba(255, 59, 48, .1);
  --orange: #ff9500; --orange-text: #c26a00; --orange-soft: rgba(255, 149, 0, .12);
  --green: #34c759; --green-text: #248a3d; --green-soft: rgba(52, 199, 89, .12);
  --teal: #1ab5c1; --teal-text: #0f8f99;   /* avance 40–70% */
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; width: 100%; max-width: 100%;
  overflow-x: hidden; overscroll-behavior-x: none;
}
html.locked, html.locked body { overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  font-size: 16px; line-height: 1.35; letter-spacing: -.01em;
  background: var(--bg); color: var(--text);
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
.muted { color: var(--muted); }
.error { color: var(--red); min-height: 1.2em; margin: 0; font-size: 14px; }
.small { font-size: 13px; margin: 0; }
.spacer { flex: 1; }

/* Controles. 16px evita que Safari haga zoom al enfocar un campo. */
input, select, textarea, button { font: inherit; font-size: 16px; color: inherit; }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea {
  width: 100%; max-width: 100%; min-width: 0; padding: 11px 14px; min-height: 44px;
  border: 0; border-radius: 12px; background-color: var(--fill);
  outline: none; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); background-color: #fff; }
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  text-overflow: ellipsis;
}
input[type=date] { display: block; }
textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: #aeaeb2; }
label.field { display: block; min-width: 0; }
label.field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: var(--fill); color: var(--accent); border-radius: 999px;
  padding: 10px 16px; min-height: 40px; cursor: pointer; font-weight: 600; font-size: 15px;
  white-space: nowrap; transition: transform .1s, opacity .15s;
}
.btn:active { transform: scale(.97); opacity: .8; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.ghost { background: transparent; padding: 10px 6px; }
.btn.danger { color: var(--red); }
.btn:disabled { opacity: .45; cursor: default; }
.icon-btn {
  border: 0; background: var(--fill); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; margin-left: 2px;
}

/* Login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-box { width: 100%; max-width: 320px; display: grid; gap: 14px; text-align: center; }
.login-box h1 { font-size: 40px; font-weight: 700; }
.login-box p { margin: 0; }
.login-box input { text-align: center; font-size: 22px; letter-spacing: 6px; }
.login-box .btn { min-height: 48px; font-size: 17px; }

/* Encabezado tipo "large title" con vidrio esmerilado */
.top {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.brand { display: flex; flex-direction: column; min-width: 0; }
.brand h1 { font-size: 30px; font-weight: 700; }
.brand h1 { line-height: 0; }
.logo { height: 34px; width: auto; display: block; }
.brand .muted { margin-top: 4px; }
.logo-login { width: 220px; max-width: 70%; height: auto; display: block; margin: 0 auto 6px; }
.brand .muted { font-size: 13px; white-space: nowrap; }
.top-actions { display: flex; gap: 8px; flex-shrink: 0; }

.filters { padding: 2px 16px 14px; display: grid; gap: 10px; }
.filter-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.segmented {
  display: flex; min-width: 0; background: var(--fill); border-radius: 10px; padding: 2px;
}
.filter-row #fQ { flex: 1; }
.segmented button {
  flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 8px; padding: 7px 4px;
  font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.segmented button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.filter-panel { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* Tablero: secciones apiladas en celular, columnas en pantallas anchas */
.board { padding: 0 16px calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 22px; }
@media (min-width: 900px) {
  .board { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: start; }
}
.col { min-width: 0; }
.col-head {
  display: flex; align-items: baseline; gap: 6px; margin: 0 4px 8px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.col-list { display: grid; gap: 14px; }
.empty-col { color: #aeaeb2; font-size: 14px; padding: 4px; }

/* Tarjetas colapsables: solo una abierta a la vez */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-width: 0;
}
.card-head {
  width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center;
  padding: 13px 14px 12px; color: inherit;
}
.card-top { display: flex; align-items: flex-start; gap: 8px; }
.card-top .card-title { flex: 1; }
.card-title { font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
.card-side { display: flex; align-items: center; gap: 10px; }
.chev {
  width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid #c7c7cc; border-bottom: 2px solid #c7c7cc;
  transform: rotate(45deg) translateY(-2px); transition: transform .25s;
}
.card.open > .card-head .chev { transform: rotate(-135deg) translate(-2px, 0); }
.mini-prog { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.mini-prog .pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.card.open .mini-prog { display: none; }
.mini-bar { flex: 1; height: 4px; background: var(--fill); border-radius: 2px; overflow: hidden; }
.mini-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

.card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.card.open .card-body { grid-template-rows: 1fr; }
.card-body > div { overflow: hidden; min-height: 0; }
.card-detail { padding: 0 14px 14px; display: grid; gap: 10px; }
.meta { font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
.meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
}
.meta-row b { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.meta > span { overflow-wrap: anywhere; }
.last { font-size: 14px; background: var(--fill); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.last .when { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.card-actions { display: flex; gap: 8px; }
.card-actions .btn { flex: 1; }

.pill { font-size: 9.7px; font-weight: 600; padding: 2.4px 7.1px; border-radius: 999px; white-space: nowrap; }
.pill.alta { color: var(--red); background: var(--red-soft); }
.pill.media { color: var(--orange-text); background: var(--orange-soft); }
.pill.baja { color: var(--green-text); background: var(--green-soft); }
.pill.agenda { color: #4b4f54; background: none; font-weight: 500; padding-left: 0; padding-right: 0; }
.due { white-space: nowrap; }
.due.late { color: var(--red); font-weight: 600; }
.due.soon { color: var(--orange-text); font-weight: 600; }

.progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.bar { flex: 1; height: 6px; background: var(--fill); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.lv-red > i { background: var(--red); }
.lv-orange > i { background: var(--orange); }
.lv-blue > i { background: var(--teal); }
.lv-green > i { background: var(--green); }

/* Hojas modales (bottom sheet en celular) */
.overlay {
  position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .3);
  display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain;
}
@media (min-width: 700px) { .overlay { align-items: center; padding: 24px; } }
.sheet {
  background: var(--bg); width: 100%; max-width: 640px; max-height: 94vh; max-height: 94dvh;
  border-radius: 14px 14px 0 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .12);
}
@media (min-width: 700px) { .sheet { border-radius: 16px; max-height: 90vh; } }
.sheet::before {
  content: ""; display: block; flex-shrink: 0; width: 36px; height: 5px; border-radius: 3px; background: #d1d1d6; margin: 6px auto 0;
}
@media (min-width: 700px) { .sheet::before { display: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 8px; }
.sheet-head h2 { font-size: 20px; font-weight: 700; min-width: 0; }
.sheet-body {
  padding: 6px 6px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: grid; gap: 14px; min-width: 0;
}
.sheet-body > * { min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 > * { min-width: 0; }
@media (max-width: 430px) { .grid2 { grid-template-columns: 1fr; } }
.section { background: var(--fill); border-radius: var(--radius); padding: 12px; display: grid; gap: 12px; min-width: 0; }
.section h3 { font-size: 17px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
.row.end { justify-content: flex-end; }
input[type=range] { width: 100%; accent-color: var(--accent); }

/* Slider de avance: grueso, de lado a lado y con el color del rango */
input.slider {
  --c: var(--red);
  -webkit-appearance: none; appearance: none; display: block; height: 28px; background: transparent; margin: 0;
}
input.slider.lv-orange { --c: var(--orange); }
input.slider.lv-blue { --c: var(--teal); }
input.slider.lv-green { --c: var(--green); }
input.slider::-webkit-slider-runnable-track {
  height: 12px; border-radius: 6px;
  background: linear-gradient(to right, var(--c) 0 var(--p), #fff var(--p) 100%);
  box-shadow: inset 0 0 0 1px var(--fill-2);
}
input.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .06);
}
input.slider::-moz-range-track { height: 12px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--fill-2); }
input.slider::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--c); }
input.slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

/* Guardar revisión: gris a lo ancho; se pinta azul al tocarlo o mientras guarda */

label.field > span.range-label { display: flex; justify-content: space-between; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }

/* Acordeones dentro de las hojas: uno abierto a la vez */
.acc { background: var(--fill); border-radius: var(--radius); min-width: 0; }
.acc-head {
  width: 100%; border: 0; background: none; cursor: pointer; color: inherit; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 14px 12px; font-size: 17px; font-weight: 600;
}
.acc-head .sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.acc-head .chev { margin-left: auto; }
.acc.open .acc-head .chev { transform: rotate(-135deg) translate(-2px, 0); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.acc.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; min-height: 0; }
.acc-inner { padding: 0 12px 12px; display: grid; gap: 12px; }

/* Dentro de bloques grises, campos y botones secundarios van en blanco */
.section .btn:not(.primary), .acc .btn:not(.primary) { background: #fff; }
.btn.danger { background: var(--red-soft) !important; }
.cap-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.section input:not([type=range]):not([type=checkbox]), .section select, .section textarea,
.acc input:not([type=range]):not([type=checkbox]), .acc select, .acc textarea { background-color: #fff; }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs:empty { display: none; }
.thumb { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--fill-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; cursor: pointer; line-height: 1;
}
.add-img {
  width: 72px; height: 72px; border: 1.5px dashed #c7c7cc; border-radius: 12px; display: grid;
  place-items: center; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; background: #fff;
}

.history { display: grid; gap: 12px; }
.hist { border-right: 2px solid var(--fill-2); padding-right: 10px; min-width: 0; text-align: right; }
.hist .when { font-size: 12px; color: var(--muted); }
.hist .what { white-space: pre-wrap; overflow-wrap: anywhere; }
.hist .chg { font-size: 12px; color: var(--muted); }
.desc { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Captura rápida y revisión por lote */
.capture textarea { min-height: 72px; }
.flag { margin: 0; font-size: 13px; color: var(--orange-text); background: var(--orange-soft); padding: 8px 10px; border-radius: 10px; }
.batch-item.excluded { opacity: .45; }
.batch-item label.row { gap: 10px; cursor: pointer; }
label.btn { cursor: pointer; }

/* Grabación: ondas que siguen la voz en tiempo real */
.btn.recording, .section .btn.recording, .acc .btn.recording { background: var(--red-soft); color: #d70015; }
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.btn.wide { width: 100%; min-height: 46px; }
.recwave {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
}
.recwave .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: blink 1s infinite; }
.recwave .bars { flex: 1; height: 40px; display: flex; align-items: center; gap: 3px; min-width: 0; }
.recwave .bars i {
  flex: 1; min-width: 2px; height: 100%; border-radius: 2px; background: var(--red);
  transform: scaleY(.08); transition: transform .06s linear;
}
.recwave .time { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); flex-shrink: 0; }
@keyframes blink { 50% { opacity: .25; } }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(29, 29, 31, .6); color: #fff; padding: 11px 18px; border-radius: 14px; z-index: 40;
  width: max-content; max-width: calc(100% - 32px); font-size: 14px; text-align: center;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.toast.ok { background: rgba(52, 168, 83, .62); }
.toast.del { background: rgba(215, 0, 21, .62); }
.notice { background: var(--orange-soft); color: var(--orange-text); border-radius: 12px; padding: 12px; }
.login-box input::placeholder { letter-spacing: 0; font-size: 17px; }

/* Lo que no va en bloque gris (títulos, barra, botones sueltos) conserva aire a los lados */
#sheetBody > form > :not(.acc):not(.section), #meetingBody > :not(.section):not(form) { margin-left: 10px; margin-right: 10px; }

/* Guardar revisión: gris a lo ancho; se pinta azul al tocarlo o mientras guarda */
.acc .btn.save:not(.primary) { width: 100%; min-height: 48px; background: #d1d1d6; color: #3c4043; font-size: 16px; }
.acc .btn.save:not(.primary):active, .acc .btn.save:not(.primary):disabled { background: var(--accent); color: #fff; opacity: 1; }

/* Contador de abiertos a la derecha del encabezado */
.top-actions { align-items: center; }
.top-actions #count { font-size: 14px; white-space: nowrap; }
.filters { padding-top: 8px; }

/* Botón flotante de nuevo pendiente, abajo a la derecha (solo celular) */
.fab {
  position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 10;
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(19, 32, 60, .35);
}
.fab svg { width: 36px; height: 36px; }
#btnNew { display: none; }   /* "Nueva tarea" es el botón flotante en todas las pantallas */
@media (min-width: 700px) {
  .fab { right: 32px; bottom: 32px; width: 84px; height: 84px; }
  .fab svg { width: 40px; height: 40px; }
  .fab:hover { transform: scale(1.04); }
  .board, .archive-view, .team-view { padding-bottom: 130px; }
}
.fab:active { transform: scale(.94); }
@media (max-width: 699px) {
  #btnNew { display: none; }
  .fab { display: grid; }
  .board { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* Botón Dictar a la derecha, un poco más ancho */
.btn.dictate { padding-left: 22px; padding-right: 22px; }

/* Título y barra del pendiente fijos al pie de la hoja */
.sheet-foot {
  flex-shrink: 0; display: grid; gap: 14px;
  background: rgba(255, 224, 102, .3);   /* amarillo de notificación, suave */
  border-top: 1px solid rgba(214, 170, 0, .25);
  padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
}
.sheet-foot .card-title { font-size: 18px; }
.sheet-foot .bar { background: rgba(255, 255, 255, .8); }

/* Subcontenedor abierto: contorno azul marino */
.acc.open { box-shadow: inset 0 0 0 1.5px var(--accent); }
#sheetBody, #meetingBody { flex: 1 1 auto; min-height: 0; }
.sheet:has(#sheetFoot:not([hidden])) #sheetBody { padding-bottom: 24px; gap: 18px; }

/* Datos del pendiente: un campo por renglón */
.stack { display: grid; gap: 12px; min-width: 0; }

/* Cancelar / Crear pendiente mitad y mitad */
.half-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.half-actions .btn { width: 100%; min-height: 46px; }

/* Armar pendiente al 70% de su color; nota centrada */
.btn.primary.soft { background: rgba(19, 32, 60, .7); }
.center { text-align: center; }
.tiny { font-size: 11px; margin: 0; }

/* Ícono vectorial (solo contorno) a la derecha del título de la sección */
.acc-ico { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-left: -2px; }

/* Hitos: checklist de la tarea */
.ms-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.ms {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.ms-check { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.ms-check span, .ms-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ms.done .ms-check span, .ms.done .ms-text { text-decoration: line-through; color: var(--muted); }
.ms-btn {
  border: 0; background: none; color: var(--accent); cursor: pointer; padding: 4px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.ms-btn svg { width: 18px; height: 18px; }
.ms-rm { color: var(--muted); font-size: 14px; }
.ms-ok { font-weight: 700; font-size: 18px; }
.acc .ms input.ms-edit[type=text], .ms input.ms-edit[type=text] { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; background-color: var(--fill); }
.ms-add { display: flex; gap: 8px; min-width: 0; }
.ms-add input { flex: 1; min-width: 0; }
.ms-add .btn { flex-shrink: 0; }
div.field > span.range-label, div.field > span.ms-label {
  display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px;
}

/* Arrastrar tarjetas entre estados */
.card-head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card.dragging { opacity: .35; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; margin: 0;
  box-shadow: 0 16px 40px rgba(19, 32, 60, .28); border-color: var(--accent);
}
.drag-ghost .card-body { display: none; }
.col { border-radius: 16px; transition: background .15s, box-shadow .15s; }
html.is-dragging .col { padding: 6px; margin: -6px; }
.col.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
html.is-dragging, html.is-dragging body { cursor: grabbing; }

/* Con un solo estado filtrado, en pantallas anchas las tarjetas van al
   centro al 60% del ancho, en lugar de ir de lado a lado. */
@media (min-width: 900px) {
  .board.single { grid-template-columns: minmax(0, 1fr); width: 60%; margin: 0 auto; }
}

/* Botón de calendario entre la búsqueda y Filtros */
.cal-btn {
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--fill); color: var(--accent); display: grid; place-items: center;
}
.cal-btn svg { width: 22px; height: 22px; }
.cal-btn:active { transform: scale(.95); }

/* Calendario tipo Gantt */
.gantt-sheet { max-width: 1200px; height: 94vh; height: 94dvh; }
@media (min-width: 700px) { .gantt-sheet { height: 90vh; } }
.gantt-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 0 calc(8px + env(safe-area-inset-bottom)); }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 16px 10px; font-size: 12px; color: var(--muted); }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-bar { width: 18px; height: 8px; border-radius: 4px; display: inline-block; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); display: inline-block; }
.lg-dia { width: 9px; height: 9px; background: #ffb800; transform: rotate(45deg); display: inline-block; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #c98f00; }
.lg-today { width: 2px; height: 14px; background: var(--red); display: inline-block; }

.g-scroll {
  --gl: 150px;
  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .g-scroll { --gl: 240px; } }
.g-grid { position: relative; }
.g-row { display: flex; border-bottom: 1px solid var(--line); min-height: 52px; }
.g-label {
  position: sticky; left: 0; z-index: 3; width: var(--gl); flex-shrink: 0;
  background: #fff; border: 0; border-right: 1px solid var(--line); text-align: left; cursor: pointer;
  padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: inherit;
}
.g-title { font-size: 13px; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-sub { font-size: 11px; color: var(--muted); }
.g-track {
  position: relative; flex-shrink: 0;
  /* fines de semana sombreados (sáb y dom) */
  background-image: linear-gradient(to right, transparent 0 calc(100% * 5 / 7), #f6f6f9 calc(100% * 5 / 7) 100%);
  background-repeat: repeat-x;
}
.g-head { position: sticky; top: 0; z-index: 4; background: #fff; min-height: 44px; }
.g-head .g-track { background: #fff; }
.g-corner { font-size: 12px; color: var(--muted); font-weight: 600; cursor: default; z-index: 5; }
.g-months, .g-nums { position: relative; height: 22px; }
.g-month { position: absolute; top: 4px; font-size: 11px; font-weight: 700; color: var(--text); text-transform: capitalize; white-space: nowrap; padding-left: 4px; border-left: 1px solid var(--line); }
.g-num { position: absolute; top: 2px; text-align: center; font-size: 10px; color: var(--muted); }
.g-num.today { color: #fff; background: var(--red); border-radius: 6px; font-weight: 700; }

.g-bar {
  position: absolute; top: 50%; height: 14px; margin-top: -7px; border-radius: 7px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.g-bar.open-end { border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
.g-over {
  position: absolute; top: 50%; height: 14px; margin-top: -7px; border-radius: 0 7px 7px 0; cursor: pointer;
  background: repeating-linear-gradient(45deg, rgba(255, 59, 48, .85) 0 5px, rgba(255, 59, 48, .45) 5px 10px);
}
.g-due { position: absolute; top: 50%; height: 26px; margin-top: -13px; width: 3px; border-radius: 2px; background: var(--accent); cursor: pointer; }
.g-due.late { background: var(--red); }
.g-dot, .g-dia { position: absolute; top: 50%; z-index: 2; cursor: pointer; }
.g-dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); }
.g-dia { width: 11px; height: 11px; margin: -19px 0 0 -5.5px; background: #ffb800; transform: rotate(45deg); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #c98f00; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--red); z-index: 1; pointer-events: none; opacity: .8; }

.merge-tip { background: var(--accent-soft); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.merge-tip .btn { background: #fff; }

/* Menú ⋯ de la hoja de tarea */
.head-actions { position: relative; display: flex; gap: 8px; flex-shrink: 0; }
#sheetMenuBtn { font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.menu {
  position: absolute; right: 38px; top: 38px; z-index: 30; min-width: 190px;
  background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 1px var(--line);
}
.menu-item {
  width: 100%; border: 0; background: none; text-align: left; padding: 11px 12px; border-radius: 10px;
  font-size: 15px; cursor: pointer; color: var(--text);
}
.menu-item:active, .menu-item:hover { background: var(--fill); }
.menu-item.danger { color: var(--red); font-weight: 600; }

/* En celular los estados se deslizan de lado dentro de su barra (la página
   no se mueve): cada botón con su ancho natural, en una sola fila. */
@media (max-width: 699px) {
  .segmented {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented button { flex: 0 0 auto; padding: 7px 14px; overflow: visible; text-overflow: clip; scroll-snap-align: start; }
}

/* Menciones @ en hitos */
.ms-add, .ms-edit-wrap { position: relative; }
.ms-edit-wrap { flex: 1; min-width: 0; display: flex; }
.mention {
  display: inline-block; padding: 0 7px; border-radius: 999px; font-weight: 600; font-size: .92em;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.ms.done .mention { background: var(--fill); color: var(--muted); }
.mention-box {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 25; min-width: 220px;
  background: #fff; border-radius: 12px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 1px var(--line);
}
.mention-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 9px; font-size: 15px; text-align: left; color: var(--text);
}
.mention-opt.on, .mention-opt:hover { background: var(--fill); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* Detalle dentro de la tarjeta (escritorio) */
.card.expanded { border-color: var(--accent); box-shadow: 0 8px 30px rgba(19, 32, 60, .12); }
.card.expanded .card-body { display: none; }
.card.expanded .mini-prog { display: flex; }
.card-full { padding: 0 12px 14px; display: grid; gap: 10px; position: relative; }
.full-bar { display: flex; justify-content: flex-end; gap: 8px; position: relative; }
.full-menu { right: 38px; top: 36px; }
.card-full .acc { background: var(--fill); }

/* Línea donde va a quedar la tarjeta al arrastrar */
.drop-line { height: 4px; border-radius: 2px; background: var(--accent); margin: -5px 4px; box-shadow: 0 0 0 3px var(--accent-soft); }

/* Hitos con fecha propia y mini barra de avance */
.ms { flex-direction: column; align-items: stretch; gap: 6px; }
.ms-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-due {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.ms-due.late { color: var(--red); background: rgba(255, 59, 48, .1); }
.ms-due i { font-style: normal; color: var(--orange); }
.ms.done .ms-due { color: var(--muted); background: var(--fill); }
.ms-prog { display: flex; align-items: center; gap: 10px; }
.ms-prog b { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
input.slider.mini { height: 20px; flex: 1; }
input.slider.mini::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; }
input.slider.mini::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; }
input.slider.mini::-moz-range-track, input.slider.mini::-moz-range-progress { height: 6px; border-radius: 3px; }
input.slider.mini::-moz-range-thumb { width: 18px; height: 18px; }
.ms-add { flex-wrap: wrap; }
.ms-new-wrap { position: relative; flex: 1 1 100%; display: flex; min-width: 0; }
.ms-new-wrap input { flex: 1; min-width: 0; }
.ms-add input.ms-date { flex: 1 1 140px; }
.ms input.ms-date { flex: 0 0 auto; width: 150px; min-height: 36px; padding: 6px 8px; background-color: var(--fill); }
@media (max-width: 520px) {
  .ms-row:has(.ms-edit) { flex-wrap: wrap; }
  .ms-row:has(.ms-edit) .ms-edit-wrap { flex-basis: 100%; }
  .ms input.ms-date { flex: 1; width: auto; }
}
.mention-opt.add { color: var(--accent); font-weight: 600; }
.avatar.plus { background: var(--accent-soft); color: var(--accent); font-size: 16px; }

/* Contribuyentes */
.pp { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.pp summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.pp summary::-webkit-details-marker { display: none; }
.pp .avatar { width: 36px; height: 36px; font-size: 13px; }
.pp-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pp-main .mini-bar { flex: none; width: 100%; }
.pp-pct { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.pp-pct.lv-red { color: var(--red); } .pp-pct.lv-orange { color: var(--orange); }
.pp-pct.lv-blue { color: var(--teal-text); } .pp-pct.lv-green { color: var(--green); }
.pp-list { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; }
.pp-item {
  width: 100%; text-align: left; border: 0; background: var(--fill); border-radius: 10px; padding: 9px 12px;
  display: grid; gap: 3px; cursor: pointer; color: var(--text); font: inherit;
}
.pp-ms { font-size: 14px; overflow-wrap: anywhere; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tag { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: #fff; color: var(--muted); }
.pp-tag.ok { color: var(--green); } .pp-tag.bad { color: var(--red); } .pp-tag.warn { color: var(--orange); }

/* Calendario como vista del tablero (no ventana) */
.cal-view { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.cal-view .gantt-body {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  padding: 10px 0 0; min-height: 320px;
}
.cal-btn.on { background: var(--accent); color: #fff; }
.pp-score { font-size: 13px; font-weight: 600; color: var(--accent); }

/* Título editable en su lugar (detalle abierto) */
.title-edit { display: flex; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.title-edit .card-title {
  flex: 1; min-width: 0; margin: 0; cursor: text; outline: none; border-radius: 8px;
  padding: 2px 6px; margin-left: -6px; transition: background .15s, box-shadow .15s;
}
.title-edit .card-title:hover { background: rgba(19, 32, 60, .05); }
.title-edit .card-title:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.title-edit .ms-btn { margin-top: 1px; opacity: .7; }
.card.expanded > .card-head { cursor: default; }

/* Foco: con una tarea abierta en escritorio, lo de alrededor se desenfoca */
/* El desenfoque va en el contenido del encabezado, no en la barra: filter + backdrop-filter en el mismo
   elemento hace que el navegador a veces la deje en blanco (desaparecían el logo, el buscador y los íconos). */
#app .top > *, #app .filters { transition: filter .4s ease, opacity .4s ease; }
#app.focus .top > *, #app.focus .filters { filter: blur(4px); opacity: .45; pointer-events: none; }
.board.focus .col-head, .board.focus .empty-col, .board.focus .card:not(.expanded):not(.open) {
  filter: blur(5px); opacity: .4; pointer-events: none; animation: blurIn .4s ease both;
}
.board .defocus { animation: blurOut .45s ease both; }
@keyframes blurIn { from { filter: blur(0); opacity: 1; } to { filter: blur(5px); opacity: .4; } }
@keyframes blurOut { from { filter: blur(5px); opacity: .4; } to { filter: blur(0); opacity: 1; } }

/* Hojas: fondo desenfocado que aparece y se disipa */
.overlay {
  background: rgba(20, 24, 36, .18);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  animation: ovIn .3s ease both;
}
.overlay > .sheet { animation: sheetIn .3s ease both; }
.overlay.closing { animation: ovOut .26s ease both; pointer-events: none; }
.overlay.closing > .sheet { animation: sheetOut .26s ease both; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(24px); } to { transform: none; } }
@keyframes sheetOut { from { transform: none; } to { transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay > .sheet, .overlay.closing, .overlay.closing > .sheet, .board.focus .card, .board .defocus { animation-duration: .01s; }
}

/* Brief de la tarea al final del detalle */
.brief { display: grid; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); min-width: 0; }
.brief-title { margin: 0 0 0 4px; font-size: 15px; font-weight: 700; color: var(--accent); }

/* Archivo: finalizadas por trimestre */
.archive-view { padding: 0 0 calc(40px + env(safe-area-inset-bottom)); }
.arc-note { padding: 0 20px; margin: 0 0 10px; }
.arc-board { padding-bottom: 0; }
@media (min-width: 700px) { .arc-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.arc-year {
  font-size: 20px; font-weight: 800; color: var(--accent); margin: 10px 2px 2px; letter-spacing: -.01em;
}
.arc-col .col-list > .arc-year:first-child { margin-top: 0; }
.arc-month { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; margin: 4px 4px 0; }
.arc-card {
  width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  display: grid; gap: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.arc-card:active { transform: scale(.99); }
.arc-top { display: flex; align-items: flex-start; gap: 8px; }
.arc-title { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }

/* Celular: la búsqueda va en su propio renglón y los íconos debajo */
@media (max-width: 430px) {
  .filter-row { flex-wrap: wrap; row-gap: 10px; }
  .filter-row #fQ { flex: 1 1 100%; }
  .filter-row #btnFilters { margin-left: auto; }
}
.arc-col .col-head { font-size: 15px; color: var(--accent); background: var(--fill); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.arc-col + .arc-col { margin-top: 6px; }
@media (min-width: 700px) { .arc-col + .arc-col { margin-top: 0; } }

/* Equipo: una columna por persona con su score */
.team-view { padding: 0 0 calc(40px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .tm-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tm-help { margin: 0 16px 12px; }
.tm-help summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.tm-help p { margin: 6px 0 0; }
.tm-score {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px;
  display: grid; gap: 12px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.tm-who { display: flex; align-items: center; gap: 12px; }
.tm-who .avatar { width: 42px; height: 42px; font-size: 15px; }
.tm-who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.tm-who b { font-size: 17px; }
.tm-big { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.tm-num { font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tm-num.lv-red { color: var(--red); } .tm-num.lv-orange { color: var(--orange); }
.tm-num.lv-blue { color: var(--teal-text); } .tm-num.lv-green { color: var(--green); }
.tm-lbl { font-size: 13px; color: var(--muted); line-height: 1.35; }
.tm-lbl b { color: var(--text); font-size: 15px; }
.tm-metric { display: grid; gap: 4px; }
.tm-mrow { display: flex; justify-content: space-between; font-size: 13px; }
.tm-mrow b { font-variant-numeric: tabular-nums; }
.tm-metric .mini-bar { flex: none; width: 100%; height: 6px; }
.tm-h { font-size: 13px; font-weight: 700; color: var(--accent); margin: 4px 4px -4px; text-transform: uppercase; letter-spacing: .03em; }
.tm-h .n { color: var(--muted); font-weight: 600; margin-left: 4px; }
.tm-task {
  width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px;
}
.tm-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tm-col .pp-item { background: #fff; border: 1px solid var(--line); }
/* Indicadores del score: cerrados por defecto, se abren tocando el score */
button.tm-big { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 4px 0 2px; }
button.tm-big .chev { margin-left: auto; }
.tm-score.open button.tm-big .chev { transform: rotate(-135deg) translate(-2px, 0); }
.tm-metrics { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; margin-top: -12px; }
.tm-metrics > div { overflow: hidden; min-height: 0; display: grid; gap: 12px; }
.tm-score.open .tm-metrics { grid-template-rows: 1fr; margin-top: 0; }

/* Equipo: contenedores plegables (enfoque, mejora, desglose) */
.tm-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.tm-box-head {
  width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
}
.tm-box-head > span:first-child { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tm-box-head b { font-size: 15px; color: var(--accent); }
.tm-box.open .tm-box-head .chev { transform: rotate(-135deg) translate(-2px, 0); }
.tm-box .tm-metrics { margin-top: 0; }
.tm-box.open .tm-metrics { grid-template-rows: 1fr; }
.tm-box-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.tm-box-body > .col-list { gap: 10px; }
.tm-intro { margin: 0; font-size: 14px; line-height: 1.45; }
.tm-focus { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tm-fitem {
  width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; display: grid; gap: 2px;
  border: 0; border-left: 3px solid var(--accent); background: var(--fill); border-radius: 8px; padding: 8px 10px;
}
.tm-fitem b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tm-fitem .tiny { color: var(--muted); }
.tm-fitem.warn { border-left-color: var(--orange); }
.tm-fitem.bad { border-left-color: var(--red); }
.tm-fitem.bad .tiny { color: var(--red); }
.tm-sec { margin: 2px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--orange-text); }
.tm-sec.ok { color: var(--green-text); }
.tm-fb { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.tm-fb b { color: var(--accent); }
.tm-score { margin-bottom: 10px; }

/* Brief: ficha de solo lectura; el lápiz activa la edición */
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brief-pen { width: 34px; height: 34px; border-radius: 10px; }
.brief.editing .brief-pen { background: var(--accent); color: #fff; }
.brief:not(.editing) .brief-edit, .brief:not(.editing) .brief-save,
.brief:not(.editing) .add-img, .brief:not(.editing) .thumb button { display: none; }
.brief.editing .brief-view { display: none; }
.brief-edit { display: grid; gap: 12px; min-width: 0; }
.brief-view { background: #fff; border-radius: 14px; padding: 4px 14px; display: grid; }
.bv-desc { margin: 10px 0 8px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bv-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 14px;
}
.bv-row > span { color: var(--muted); }
.bv-row > b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.brief:not(.editing) .brief-photos.empty { display: none !important; }
.acc { scroll-margin-top: 10px; }
.menu-item.success { color: var(--green-text); font-weight: 600; }

/* Fecha del hito: semáforo de cercanía */
.ms-due.d-3 { background: #fff3bf; color: #8a6d00; }
.ms-due.d-1 { background: var(--orange-soft); color: var(--orange-text); }
.ms-due.d-today { background: rgba(255, 59, 48, .14); color: var(--red); }
.ms-due.d-late { background: #b42318; color: #fff; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ms-due.d-late i { color: #ffd0cc; text-decoration: none; }

/* Tarjeta: etiqueta del hotel y fecha de alta */
.card-sub { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; margin-top: -2px; }
.ptag {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 8.8px; font-weight: 700; letter-spacing: .01em; padding: 1.6px 6.4px; border-radius: 4.8px;
}
.stamp { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Ventanita de sí / no */
.overlay.dialog-ov { z-index: 60; align-items: center; padding: 24px; }
.dialog {
  background: #fff; width: 100%; max-width: 380px; border-radius: 18px; padding: 20px 18px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25); display: grid; gap: 10px; animation: sheetIn .3s ease both;
}
.dialog h3 { margin: 0; font-size: 18px; }
.dialog p { margin: 0; color: var(--muted); font-size: 14px; }
.dialog ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.dialog-actions .btn { justify-content: center; text-align: center; }
.dialog-actions .btn { min-width: 0; white-space: normal; padding-left: 10px; padding-right: 10px; }

/* Tarjeta: hotel arriba a la izquierda, prioridad arriba a la derecha */
.card-head { grid-template-columns: minmax(0, 1fr); }
.card-row1 { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.card-place { min-width: 0; display: flex; }
.card-head > .card-title, .card-head > .title-edit { grid-column: 1 / -1; }
.card-head > .card-sub { margin-top: -4px; }

/* Tarjetas olvidadas (gag): solo el contenedor cambia de color y textura;
   el contenido (título, etiquetas, barras) se queda igual. */
.card.age-old, .card.age-mold, .card.age-rot { position: relative; isolation: isolate; }
.card.age-old::after, .card.age-mold::after, .card.age-rot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
}

/* >3 semanas: papel viejo, amarillento y craquelado */
.card.age-old { background: #f8efd9; border-color: #e6d8b3; box-shadow: inset 0 0 28px rgba(140, 100, 20, .12); }
.card.age-old::after {
  opacity: .32;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%23a3843f' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M0 30 L22 34 L35 22 L58 28 L70 45 L95 40 L110 55 L140 50 L160 58'/%3E%3Cpath d='M35 22 L40 5 M70 45 L64 70 L80 92 L76 120 M110 55 L118 80 L150 86 M95 40 L100 15 L126 8'/%3E%3Cpath d='M0 95 L20 88 L40 100 L64 70 M20 88 L14 120 M126 8 L160 14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 85% 20%, rgba(150, 110, 30, .28), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(150, 110, 30, .22), transparent 45%);
}

/* >1½ meses: moho verde */
.card.age-mold { background: #eaf2d8; border-color: #bfd1a1; box-shadow: inset 0 0 30px rgba(70, 110, 20, .15); }
.card.age-mold::after {
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200' preserveAspectRatio='none'%3E %3Cdefs%3E %3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.045 .06' numOctaves='4' seed='7'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 .30  0 0 0 0 .46  0 0 0 0 .14  3.2 0 0 0 -1.25'/%3E %3C/filter%3E %3CradialGradient id='g' cx='50%25' cy='50%25' r='72%25'%3E %3Cstop offset='.5' stop-color='black'/%3E%3Cstop offset='.82' stop-color='%23888'/%3E%3Cstop offset='1' stop-color='white'/%3E %3C/radialGradient%3E %3Cmask id='m'%3E%3Crect width='320' height='200' fill='url%28%23g%29'/%3E%3C/mask%3E %3C/defs%3E %3Crect width='320' height='200' filter='url%28%23f%29' mask='url%28%23m%29'/%3E %3C/svg%3E") center / 100% 100% no-repeat;
}

/* >2 meses: infectada, morada con manchas oscuras en las orillas */
.card.age-rot { background: #eadff3; border-color: #b08cc4; box-shadow: inset 0 0 36px rgba(60, 10, 80, .22); }
.card.age-rot::after {
  opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200' preserveAspectRatio='none'%3E %3Cdefs%3E %3Cfilter id='d' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='11' result='t'/%3E %3CfeDisplacementMap in='SourceGraphic' in2='t' scale='22' xChannelSelector='R' yChannelSelector='G'/%3E %3CfeGaussianBlur stdDeviation='.6'/%3E %3C/filter%3E %3C/defs%3E %3Cg filter='url%28%23d%29'%3E %3Cellipse cx='14' cy='38' rx='16' ry='13' fill='%235a1f78' fill-opacity='.55'/%3E %3Cellipse cx='10' cy='40' rx='7' ry='6' fill='%232a0638' fill-opacity='.7'/%3E %3Cellipse cx='300' cy='176' rx='24' ry='19' fill='%236a2a8c' fill-opacity='.5'/%3E %3Cellipse cx='306' cy='182' rx='10' ry='8' fill='%232a0638' fill-opacity='.65'/%3E %3Cellipse cx='286' cy='16' rx='11' ry='8' fill='%233a0a50' fill-opacity='.55'/%3E %3Cellipse cx='70' cy='194' rx='13' ry='9' fill='%237d3aa3' fill-opacity='.45'/%3E %3Cellipse cx='176' cy='4' rx='9' ry='6' fill='%235a1f78' fill-opacity='.4'/%3E %3Cellipse cx='318' cy='92' rx='8' ry='12' fill='%234a1266' fill-opacity='.45'/%3E %3C/g%3E %3C/svg%3E") center / 100% 100% no-repeat;
}

/* Tarjeta cerrada: fecha de alta a la izquierda y hitos a la derecha */
.card-head > .card-sub { justify-content: space-between; }
.ms-mini { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Vista previa: estado como menú, con el mismo estilo de los demás renglones */
.meta-status { cursor: pointer; }
.meta-status select {
  border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--accent); text-align: right;
  padding: 0 18px 0 0; min-height: 0; width: auto; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2313203c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px;
}

/* Fecha del hito: pastilla con ícono (el input va encima, transparente) */
.date-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 140px;
  min-height: 44px; padding: 0 12px; border-radius: 12px; background: #fff; color: var(--muted); font-size: 15px; cursor: pointer;
}
.ms .date-pill { flex: 0 0 auto; min-height: 36px; background: var(--fill); font-size: 14px; }
.date-pill.has { color: var(--text); font-weight: 600; }
.date-pill svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.date-pill input.ms-date {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; margin: 0; border: 0; min-height: 0;
}
.date-pill input.ms-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Historial narrativo */
.hist .chg b { color: var(--accent); }
.h-reason { display: block; margin-top: 2px; font-style: italic; color: var(--muted); }

/* Diálogo de motivo */
.dialog textarea { min-height: 80px; }
.dialog-cancel { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 4px; justify-self: center; }
.hist .chg { font-size: 13px; line-height: 1.4; }
.owner-pick { display: grid; gap: 8px; margin-top: 4px; }
.owner-pick .btn { justify-content: flex-start; gap: 10px; width: 100%; }
.owner-pick .avatar { width: 28px; height: 28px; font-size: 11px; }
/* Mientras se arrastra, las columnas ocupan todo el alto para poder soltar en cualquier parte */
html.is-dragging .board { align-items: stretch; }
html.is-dragging .board .col { min-height: 140px; border-radius: 14px; }
.dialog p.dialog-task {
  color: var(--text); font-weight: 600; font-size: 16px; line-height: 1.35;
  background: rgba(255, 224, 102, .35); border: 1px solid rgba(214, 170, 0, .35); border-radius: 12px; padding: 10px 14px;
}
.meta-status select.empty { color: var(--muted); font-weight: 600; }
/* Comentario de la revisión: botón con contorno gris que abre la caja */
.btn.note-toggle, .acc .btn.note-toggle:not(.primary) {
  width: 100%; justify-content: center; background: transparent; color: var(--muted);
  border: 1.5px solid #c7c7cc; box-shadow: none; font-weight: 600;
}
.btn.note-toggle:hover { color: var(--accent); border-color: var(--accent); }
.note-box { display: grid; gap: 10px; min-width: 0; }
.note-box[hidden] { display: none; }
#app.focus, #app.focus .board { cursor: pointer; }

/* Logo: lleva al tablero y con un poco más de aire arriba y a la izquierda */
.brand { padding: 4px 0 0 4px; }
.logo-link { display: inline-block; border-radius: 6px; }
.logo-link:active { opacity: .7; }
.card-place { gap: 6px; flex-wrap: wrap; }
.sched-tag {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  background: #e8eefc; color: #3555a8;
}

/* Score de la tarjeta (abajo a la izquierda, 70% de opacidad): 1–3 gris y 4 turquesa solo con
   contorno y texto; 5 relleno verde con ✓ */
.score-tag {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 6px; white-space: nowrap;
  background: #fff; border: 1px solid currentColor; line-height: 1.5;
}
.score-tag.sc-1, .score-tag.sc-2, .score-tag.sc-3 { color: #8e8e96; }
.score-tag.sc-4 { color: var(--teal-text); }
.score-tag.sc-5 { background: rgba(52, 199, 89, .2); border-color: rgba(52, 199, 89, .45); color: var(--green-text); }   /* verde suave: se nota sin destacar de más */
.score-miss { display: none; grid-column: 1 / -1; margin: -4px 0 0; font-size: 12px; color: var(--muted); text-align: left; font-weight: 400; }
.card.open:not(.expanded) .score-miss { display: block; }
.card-score { grid-column: 1 / -1; display: flex; justify-content: flex-start; margin-top: -2px; opacity: .7; }
/* Solicitante como #hashtag junto al score */
.card-score { align-items: center; gap: 8px; min-width: 0; }
.req-hash { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.meta-status select { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fecha de entrega en la vista previa: renglón tocable con ícono */
button.meta-row.meta-due { width: 100%; font: inherit; cursor: pointer; text-align: left; }
.meta-due b { display: inline-flex; align-items: center; gap: 6px; }
.meta-due b svg { width: 16px; height: 16px; color: var(--accent); }

/* Mini calendario de mes */
.cal-dialog { max-width: 340px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head b { font-size: 16px; }
.cal-head .icon-btn { font-size: 22px; line-height: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-wd { font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 15px; cursor: pointer; color: var(--text);
}
.cal-day:hover { background: var(--fill); }
.cal-day.past { color: #b8b8c0; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700; }
.cal-day.sel { background: var(--accent); color: #fff; font-weight: 700; }

/* Sub-hitos: grupo desplegable con sus sub-hitos */
.ms-group { gap: 6px; }
.ms-tog { border: 0; background: none; padding: 4px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.ms-tog .chev { transform: rotate(-45deg); transition: transform .2s; border-color: var(--accent); }
.ms-group.open > .ms-row .ms-tog .chev { transform: rotate(45deg) translateY(-2px); }
.ms-gname {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
  color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ms-gcount { font-size: 12px; font-weight: 600; color: var(--muted); }
.ms-gbar { flex: 1; height: 6px; }
.ms-group.done .ms-gname { color: var(--muted); }
.ms-subs { margin: 2px 0 2px 14px; padding-left: 12px; border-left: 2px solid var(--fill-2); }
.ms-subs .ms { background: #edf4fd; border-color: transparent; padding: 8px 10px; }
.ms-add-sub { margin-left: 26px; }
.ms-add-sub .btn { min-height: 40px; }
.btn.ms-addsub { justify-self: start; min-height: 34px; font-size: 13px; padding: 4px 12px; }
/* Agregar sub-hito: fecha y botón a la derecha; el botón con contorno */
.ms-add.ms-add-sub { justify-content: flex-end; }
.ms-add.ms-add-sub .date-pill { flex: 0 0 auto; }
.ms-add.ms-add-sub .btn, .acc .ms-add.ms-add-sub .btn:not(.primary) {
  flex: 0 0 auto; background: #fff; border: 1.5px solid #c7c7cc; color: var(--accent); box-shadow: none; padding: 0 16px;
}
/* Proveedores: varias columnas que se acomodan solas */
@media (min-width: 700px) { .tm-board.tm-prov { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
@media (max-width: 430px) {
  .filter-row { column-gap: 6px; }
  .filter-row .cal-btn { width: 40px; height: 40px; border-radius: 11px; }
  .filter-row .cal-btn svg { width: 20px; height: 20px; }
  .filter-row #btnFilters { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 360px) {
  .filter-row { column-gap: 5px; }
  .filter-row .cal-btn { width: 36px; height: 36px; border-radius: 10px; }
  .filter-row .cal-btn svg { width: 18px; height: 18px; }
  .filter-row #btnFilters { padding-left: 4px; padding-right: 4px; font-size: 15px; }
}

/* Proveedores: gráfica, destacados y contraídos */
.pchart { margin: 0 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px 18px 14px; display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(19,32,60,.05); }
.pchart-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pchart-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; letter-spacing: -.01em; color: var(--text); }
.pchart-toggle .muted { letter-spacing: 0; }
.pchart-chev { font-size: 22px; line-height: 1; color: var(--muted); transform: rotate(90deg); transition: transform .2s; margin-left: 2px; }
.pchart.closed { padding: 0; }
.pchart.closed .pchart-toggle { width: 100%; padding: 14px 18px; }
.pchart.closed .pchart-chev { transform: none; margin-left: auto; }
.pc-demo { font-size: 11px; font-weight: 600; color: #8a6d00; background: #fff6d6; border: 1px solid #f1dc8f; border-radius: 999px; padding: 2px 8px; }
.pchart-seg { overflow-x: auto; scrollbar-width: none; justify-self: start; max-width: 100%; }
.pchart-seg::-webkit-scrollbar { display: none; }
.pchart-seg button { flex: 0 0 auto; padding: 7px 14px; white-space: nowrap; }
.pchart-seg.small button { font-size: 12px; padding: 4px 11px; }
.pchart-hint { margin: 0; }
.pc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc-kpi { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--fill); border: 1px solid transparent; position: relative; overflow: hidden; transition: background .2s, border-color .2s, opacity .2s; }
.pc-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.pc-kpi:hover { background: #ebebf0; }
.pc-kpi.on { background: #fff; border-color: var(--c); }
.pchart[data-focus] .pc-kpi:not(.on) { opacity: .55; }
.pc-kpi-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.pc-kpi-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pc-kpi-big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; display: flex; align-items: baseline; gap: 6px; }
.pc-kpi-big small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pc-kpi-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); min-height: 16px; }
.pc-tr { font-weight: 600; }
.pc-tr.good { color: var(--green-text); }
.pc-tr.bad { color: var(--red); }
.pc-charts { display: grid; gap: 18px; }
.pc-charts.two { grid-template-columns: 1fr 1fr; gap: 32px; }
.pc-fig { margin: 0; min-width: 0; }
.pc-fig figcaption { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.pc-fig figcaption b { font-size: 14px; color: var(--text); }
.pc-fig figcaption span { font-size: 12px; color: var(--muted); }
.pc-plot { position: relative; }
.pc-svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.pc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.pc-grid.base { stroke-dasharray: none; }
.pc-ytick, .pc-xtick { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.pc-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.pc-s { transition: opacity .25s; }
.pchart[data-focus="0"] .pc-s:not([data-s="0"]), .pchart[data-focus="1"] .pc-s:not([data-s="1"]), .pchart[data-focus="2"] .pc-s:not([data-s="2"]) { opacity: .15; }
.pc-dot, .pc-hdot { stroke: #fff; stroke-width: 2; }
.pc-end { font-size: 12px; }
.pc-end-v { fill: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-end-n { fill: var(--muted); font-weight: 500; }
.pc-cross { stroke: var(--text); stroke-opacity: .25; stroke-width: 1; }
.pc-hit { fill: transparent; cursor: crosshair; }
.pc-tip { position: absolute; top: 4px; z-index: 2; pointer-events: none; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(19,32,60,.12); padding: 8px 10px; font-size: 12px; display: grid; gap: 4px; min-width: 130px; color: var(--text); }
.pc-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pc-tip span { display: flex; align-items: center; gap: 6px; }
.pc-tip span b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.pchart-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.pchart-foot .pchart-hint { flex: 1 1 320px; }
.pc-table { flex: 0 0 auto; max-width: 100%; }
.pc-table[open] { flex-basis: 100%; }
.pc-table summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.pc-table-scroll { overflow-x: auto; margin-top: 6px; }
.pc-table table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-table th, .pc-table td { padding: 3px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pc-table th:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
@media (max-width: 520px) {
  .pchart { padding: 14px 12px 12px; border-radius: 18px; }
  .pc-kpis { gap: 6px; }
  .pc-kpi { padding: 10px 10px 9px 12px; border-radius: 12px; }
  .pc-kpi-big { font-size: 22px; flex-direction: column; align-items: flex-start; gap: 0; }
  .pc-kpi-foot span:not(.pc-tr) { display: none; }
}
.tm-featured { margin-bottom: 4px; }
@media (min-width: 700px) { .tm-board.tm-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tm-who-txt { flex: 1; }
.tm-who .tm-edit { margin-left: auto; align-self: flex-start; }
.tm-compact .tm-who { cursor: pointer; }
.tm-coltog { border: 0; background: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; flex-shrink: 0; }
.tm-mini-num { font-size: 22px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.tm-mini-num.lv-red { color: var(--red); } .tm-mini-num.lv-orange { color: var(--orange); }
.tm-mini-num.lv-blue { color: var(--teal-text); } .tm-mini-num.lv-green { color: var(--green); }
.tm-compact.open .tm-coltog .chev { transform: rotate(-135deg) translate(-2px, 0); }
.tm-compact:not(.open) .tm-score { margin-bottom: 0; }
.tm-who-txt { display: grid; gap: 2px; min-width: 0; }
.board.tm-featured { padding-bottom: 6px !important; }
.tm-compact .tm-who .avatar { width: 36px; height: 36px; font-size: 13px; }
.pc-empty { margin: 4px 0; padding: 18px; text-align: center; background: var(--fill); border-radius: 14px; }
/* Reordenar hitos y sub-hitos arrastrando la agarradera */
.ms-grip { border: 0; background: none; padding: 6px 2px; margin: -6px 0 -6px -6px; color: var(--muted); opacity: .55; cursor: grab; touch-action: none; flex-shrink: 0; display: grid; place-items: center; }
.ms-grip svg { width: 10px; height: 16px; fill: currentColor; }
.ms-grip:hover { opacity: 1; }
.ms-sorting { user-select: none; -webkit-user-select: none; }
.ms-sorting .ms-grip { cursor: grabbing; }
.ms.ms-dragging { position: relative; z-index: 2; box-shadow: 0 8px 22px rgba(19,32,60,.16); border-color: var(--accent); transform: scale(1.015); transition: box-shadow .15s, transform .15s; }
/* Filtro por fechas */
.f-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-range label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.f-range input { width: 100%; min-width: 0; }
.filter-panel .f-all { justify-self: start; }
/* Escritorio: filtros compactos en uno o dos renglones (en celular se quedan apilados) */
@media (min-width: 900px) {
  .filter-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .filter-panel select { flex: 1 1 170px; max-width: 240px; width: auto; min-height: 36px; padding: 7px 30px 7px 12px; font-size: 14px; border-radius: 10px; background-position: right 11px center; }
  .filter-panel .f-range { display: flex; gap: 8px; flex: 0 1 auto; }
  .filter-panel .f-range[hidden] { display: none; }
  .filter-panel .f-range label { display: flex; align-items: center; gap: 6px; }
  .filter-panel .f-range input { min-height: 36px; padding: 6px 10px; font-size: 14px; border-radius: 10px; width: 150px; }
  .filter-panel .f-all { min-height: 36px; padding: 6px 14px; font-size: 14px; }
}
/* Filtros: outline gris Oxford, fondo blanco y letra gris */
.filter-panel select, .filter-panel .f-range input {
  background-color: #fff; border: 1px solid #4b4f54; color: #6e7378;
}
.filter-panel select:focus, .filter-panel .f-range input:focus { border-color: #4b4f54; box-shadow: 0 0 0 3px rgba(75, 79, 84, .12); }
.filter-panel select.has-val { color: #3a3d41; font-weight: 600; }
.filter-panel .f-all { background: #fff; border: 1px solid #4b4f54; color: #4b4f54; }
/* Proveedores: los 3 principales arriba; el resto con "Ver más proveedores" */
.tm-prov.tm-featured { margin-bottom: 8px; }
.tm-more { display: flex; justify-content: center; padding: 18px 16px 28px; border-top: 1px solid var(--line); margin: 10px 16px 0; }
.tm-more-btn { background: #fff; border: 1px solid #4b4f54; color: #4b4f54; padding: 10px 22px; }
.tm-rest + .tm-more { margin-top: 0; }

/* ===================== Inversión publicitaria y Configuración ===================== */
#app[data-view="ads"] #btnFilters, #app[data-view="ads"] #filterPanel,
#app[data-view="settings"] #btnFilters, #app[data-view="settings"] #filterPanel { display: none; }
#app[data-view="settings"] .fab { display: none; }
.set-btn { width: 40px; height: 40px; }
.set-btn.on { background: var(--accent); color: #fff; }

.ads-view { --ad-ink: #13203c; --ad-sub: #5b6475; --ad-line: #e6e9ef; --ad-soft: #f5f7fa; --ad-blue: #2563c9; --ad-teal: #16a37f; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
.ad-wrap { display: grid; gap: 16px; }
.ad-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ad-head h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; color: var(--ad-ink); }
.ad-head p { margin: 4px 0 0; }
.ad-up { background: #fff; border: 1px solid #4b4f54; color: #3a3d41; }

.ad-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-filters select, .st-year {
  flex: 1 1 150px; max-width: 220px; width: auto; min-height: 36px; padding: 7px 30px 7px 12px; font-size: 14px; border-radius: 10px;
  background-color: #fff; border: 1px solid #4b4f54; color: #6e7378; background-position: right 11px center;
}
.ad-clear { min-height: 36px; padding: 6px 14px; font-size: 14px; background: #fff; border: 1px solid #4b4f54; color: #4b4f54; }

.ad-warn { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff8e6; border: 1px solid #f3dfa3; color: #6b5300; font-size: 13px; }
.ad-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--ad-soft); color: var(--ad-sub); font-size: 13px; }
.linkish { border: 0; background: none; padding: 0; color: var(--ad-blue); font: inherit; text-decoration: underline; cursor: pointer; }

.ad-empty { background: #fff; border: 1px dashed #cdd3dd; border-radius: 22px; padding: 40px 24px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.ad-empty p { max-width: 460px; margin: 0; }

/* Inversión total + mezcla */
.ad-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; background: linear-gradient(135deg, #13203c 0%, #1d3a6e 58%, #1a5f8a 100%); color: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 10px 30px rgba(19, 32, 60, .18); }
.ad-hero .ad-kpi-ic { color: #9fd3ff; background: rgba(255,255,255,.08); }
.ad-hero-main { display: grid; gap: 4px; align-content: start; }
.ad-hero .ad-kpi-l { color: rgba(255,255,255,.72); }
.ad-hero-v { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ad-hero .ad-delta { color: rgba(255,255,255,.85); }
.ad-hero .ad-delta.up { color: #7ee2b8; } .ad-hero .ad-delta.down { color: #ffb4a8; }
.ad-hero .ad-kpi-s { color: rgba(255,255,255,.6); }
.ad-budget { display: grid; gap: 6px; margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.78); }
.ad-budget-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.ad-budget-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5fb3f0, #7ee2b8); }
.ad-mix { display: grid; gap: 12px; align-content: center; }
.ad-mix-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: rgba(255,255,255,.82); }
.ad-mix-row b { font-variant-numeric: tabular-nums; color: #fff; min-width: 56px; text-align: right; }
.ad-mix-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.ad-mix-bar i { display: block; height: 100%; border-radius: 99px; background: #5fb3f0; }

/* Tarjetas de indicadores */
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ad-kpi { background: #fff; border: 1px solid var(--ad-line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 3px; align-content: start; min-width: 0; box-shadow: 0 1px 2px rgba(19,32,60,.03); }
.ad-kpi-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #eef4fd; color: var(--ad-blue); margin-bottom: 6px; }
.ad-kpi-ic svg { width: 20px; height: 20px; }
.ad-kpi-l { font-size: 12.5px; color: var(--ad-sub); font-weight: 600; }
.ad-kpi-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ad-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ad-kpi-s { font-size: 12px; color: var(--ad-sub); }
.ad-none { font-size: 15px; font-weight: 500; color: #a3aab6; letter-spacing: 0; }
.ad-delta { font-size: 12px; font-weight: 600; color: var(--ad-sub); }
.ad-delta.up { color: #0f7a5c; } .ad-delta.down { color: #c2410c; } .ad-delta.flat { font-weight: 500; }
.ad-goal { justify-self: start; margin-top: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.ad-goal.ok { color: #0f7a5c; background: #e3f6ee; } .ad-goal.no { color: #b42318; background: #fdecea; }

/* Tarjetas de gráficas */
.ad-grid { display: grid; gap: 16px; }
.ad-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-card { background: #fff; border: 1px solid var(--ad-line); border-radius: 22px; padding: 18px 17px; display: grid; gap: 12px; align-content: start; min-width: 0; box-shadow: 0 1px 2px rgba(19,32,60,.03), 0 8px 24px rgba(19,32,60,.04); }
.ad-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ad-card h3 { margin: 0; font-size: 16px; color: var(--ad-ink); letter-spacing: -.01em; }
.ad-card-h span { font-size: 12.5px; color: var(--ad-sub); }
.ad-seg button { font-size: 12px; padding: 4px 11px; }
.ad-nodata { margin: 0; padding: 26px 12px; text-align: center; color: #98a1b0; font-size: 13px; background: var(--ad-soft); border-radius: 14px; }
.ad-foot { margin: 0; }
.ad-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ad-ink); }
.ad-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ad-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ad-legend i.dash { width: 14px; height: 0; border-top: 2px dashed #13203c; border-radius: 0; }
.ad-plot { position: relative; }
.ad-svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.ad-grid-l { stroke: var(--ad-line); stroke-dasharray: 2 4; }
.ad-tick { font-size: 10.5px; fill: #8a93a3; font-variant-numeric: tabular-nums; }
.ad-line { fill: none; stroke: #2563c9; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ad-line.ly { stroke: #9aa5b4; stroke-dasharray: 5 5; stroke-width: 2; }
.ad-dot { fill: #2563c9; stroke: #fff; stroke-width: 2; }
.ad-budget-mark { stroke: #13203c; stroke-width: 2; stroke-dasharray: 3 2; }
.ad-hit { fill: transparent; cursor: crosshair; }
.ad-hit:hover { fill: rgba(37, 99, 201, .05); }
.ad-tip { position: absolute; top: 0; z-index: 3; pointer-events: none; background: rgba(255,255,255,.97); border: 1px solid var(--ad-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(19,32,60,.14); padding: 9px 11px; font-size: 12px; display: grid; gap: 4px; min-width: 150px; color: var(--ad-ink); }
.ad-tip span { display: flex; align-items: center; gap: 6px; }
.ad-tip span b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.ad-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ad-tip .tt-total { border-top: 1px solid var(--ad-line); padding-top: 4px; color: var(--ad-sub); }

/* Embudo */
.ad-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-funnel li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }
.ad-step-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #e8f6f1; color: var(--ad-teal); }
.ad-step-ic svg { width: 19px; height: 19px; }
.ad-step-body { display: grid; gap: 5px; min-width: 0; }
.ad-step-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ad-sub); }
.ad-step-top b { color: var(--ad-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.ad-step-bar { height: 10px; background: var(--ad-soft); border-radius: 99px; overflow: hidden; }
.ad-step-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2563c9, #16a37f); }
.ad-step-rate { font-size: 11.5px; color: #8a93a3; }

/* Tabla por canal */
.ad-table-wrap { overflow-x: auto; margin: 0 -4px; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ad-table th, .ad-table td { padding: 9px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--ad-line); }
.ad-table thead th { font-size: 11.5px; font-weight: 600; color: var(--ad-sub); text-transform: uppercase; letter-spacing: .03em; }
.ad-table tbody th { text-align: left; font-weight: 600; color: var(--ad-ink); }
.ad-table thead th:first-child { text-align: left; }
.ad-table tbody th i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; }
.ad-table td b { display: block; color: var(--ad-ink); }
.ad-share { display: block; height: 4px; background: var(--ad-soft); border-radius: 99px; margin-top: 4px; overflow: hidden; min-width: 60px; }
.ad-share i { display: block; height: 100%; border-radius: 99px; }
.ad-roas { font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.ad-roas.ok { color: #0f7a5c; background: #e3f6ee; } .ad-roas.no { color: #b42318; background: #fdecea; }

/* Hoteles */
.ad-hbars { display: grid; gap: 9px; }
.ad-hbar { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ad-hbar-n { color: var(--ad-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-hbar-t { height: 12px; background: var(--ad-soft); border-radius: 4px; overflow: hidden; }
.ad-hbar-t i { display: block; height: 100%; background: #2563c9; border-radius: 0 4px 4px 0; }
.ad-hbar b { font-variant-numeric: tabular-nums; color: var(--ad-ink); min-width: 56px; text-align: right; }

.ad-mini-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ad-mini-kpis div { background: var(--ad-soft); border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.ad-mini-kpis span { font-size: 12px; color: var(--ad-sub); }
.ad-mini-kpis b { font-size: 20px; color: var(--ad-ink); font-variant-numeric: tabular-nums; }

/* Datos cargados */
.ad-data { gap: 0; }
.ad-data-h { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-data-h .chev { margin-left: auto; }
.ad-data.open .ad-data-b { margin-top: 14px; }
.ad-data-b { display: grid; gap: 12px; }
.ad-data-ch { display: grid; gap: 8px; }
.ad-data-ch > b { font-size: 13.5px; color: var(--ad-ink); display: flex; align-items: center; gap: 7px; }
.ad-data-ch > b i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-chip { border: 1px solid #cfd5df; background: #fff; color: var(--ad-ink); border-radius: 99px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.ad-chip:hover { border-color: #4b4f54; }

/* Ventana de subir y editar */
.dialog.ad-upload { max-width: 520px; max-height: calc(100dvh - 48px); overflow: auto; }
.ad-drop { display: grid; justify-items: center; gap: 4px; padding: 22px 14px; border: 1.5px dashed #b9c2d0; border-radius: 16px; background: #fafbfd; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ad-drop.over { border-color: #2563c9; background: #eef4fd; }
.ad-drop b { color: var(--accent); font-size: 15px; word-break: break-all; }
.ad-prev { display: grid; gap: 8px; }
.ad-prev-h { margin: 0; font-weight: 600; color: #0f7a5c !important; font-size: 13.5px !important; }
.ad-pms { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 6px !important; max-height: 260px; overflow: auto; }
.ad-pm { border: 1px solid #e6e9ef; border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; }
.ad-pm label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ad-pm-tag { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.ad-pm.new .ad-pm-tag { color: #0f7a5c; background: #e3f6ee; }
.ad-pm.same .ad-pm-tag { color: #5b6475; background: #eef0f4; }
.ad-pm.changed { border-color: #f3c58a; background: #fffaf2; }
.ad-pm.changed .ad-pm-tag { color: #9a4d00; background: #fdebd3; }
.ad-diff { font-size: 12px; color: #9a4d00; }
.dialog.ad-edit { max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }
.ad-edit-scroll { overflow: auto; max-height: 52vh; border: 1px solid #e6e9ef; border-radius: 12px; }
.ad-edit-t { border-collapse: collapse; font-size: 12.5px; }
.ad-edit-t th { position: sticky; top: 0; background: #f5f7fa; padding: 6px; text-align: left; white-space: nowrap; font-size: 11.5px; color: #5b6475; z-index: 1; }
.ad-edit-t td { padding: 3px; border-top: 1px solid #eef0f4; }
.ad-edit-t input { min-height: 30px; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; min-width: 90px; background: #fff; border: 1px solid #e1e5ec; }
.ad-edit-tools { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }

/* Configuración */
.st-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.st-fx { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-fx th, .st-fx td { padding: 5px 6px; border-bottom: 1px solid var(--ad-line); text-align: left; }
.st-fx thead th { font-size: 12px; color: var(--ad-sub); font-weight: 600; }
.st-fx input, .st-plan input { min-height: 34px; padding: 5px 9px; font-size: 14px; border-radius: 9px; background: #fff; border: 1px solid #d5dae3; font-variant-numeric: tabular-nums; }
.st-plan { border-collapse: collapse; font-size: 13px; }
.st-plan th, .st-plan td { padding: 4px; border-bottom: 1px solid var(--ad-line); }
.st-plan thead th { font-size: 12px; color: var(--ad-sub); font-weight: 600; }
.st-plan tbody th { text-align: left; white-space: nowrap; display: grid; min-width: 150px; }
.st-plan input { width: 96px; }
.st-ch { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ad-ink); }
.st-ch i, .st-chan i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.st-fields { display: grid; gap: 10px; }
.st-fields input { background: #fff; border: 1px solid #d5dae3; }
.st-sub { margin: 6px 0 0; font-size: 14px; color: var(--ad-ink); }
.st-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chan { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d5dae3; border-radius: 99px; padding: 3px 4px 3px 11px; font-size: 13px; }
.st-year { flex: 0 0 auto; }

@media (max-width: 720px) {
  .ad-hero { grid-template-columns: 1fr; padding: 18px; border-radius: 20px; }
  .ad-hero-v { font-size: 36px; }
  .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ad-kpi { padding: 12px; border-radius: 16px; }
  .ad-kpi-v { font-size: 21px; }
  .ad-filters select { flex: 1 1 calc(50% - 4px); max-width: none; }
  .ad-hbar { grid-template-columns: 100px 1fr auto; }
  .ad-head h2 { font-size: 22px; }
}
.st-fields input[type=number] { width: 100%; max-width: 220px; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: 15px; background: #fff; border: 1px solid #d5dae3; outline: none; }
.st-fields input[type=number]:focus, .st-fx input:focus, .st-plan input:focus { border-color: #4b4f54; box-shadow: 0 0 0 3px rgba(75, 79, 84, .12); }
.st-fx input, .st-plan input { outline: none; -webkit-appearance: none; appearance: none; }

/* --- Inversión publicitaria v2: retorno, indicadores en una línea, filtros y cashback --- */
.ad-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 24px 26px; align-items: start; }
.ad-hero-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ad-flow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.ad-flow > div { display: grid; gap: 2px; }
.ad-flow span { font-size: 12.5px; color: rgba(255,255,255,.7); }
.ad-flow b { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ad-flow small { font-size: 18px; font-weight: 600; opacity: .75; }
.ad-flow-roas b { color: #7ee2b8; }
.ad-arrow { font-style: normal; font-size: 24px; color: rgba(255,255,255,.45); padding-bottom: 6px; }
.ad-hero-say { margin: 14px 0 0; font-size: 15px; color: rgba(255,255,255,.9); line-height: 1.5; }
.ad-hero-say .ad-goal { margin: 0 0 0 6px; vertical-align: 1px; }
.ad-hero .ad-goal.ok { background: rgba(126, 226, 184, .16); color: #9ff0cb; }
.ad-hero .ad-goal.no { background: rgba(255, 180, 168, .16); color: #ffc7bd; }
.ad-hero-sub { margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,.7); }
.ad-hero-sub b, .ad-hero-say b { color: #fff; }
.ad-hero-side { display: grid; gap: 12px; align-content: start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 16px 18px; }
.ad-roas-row { display: grid; grid-template-columns: minmax(80px, 140px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: rgba(255,255,255,.85); }
.ad-roas-row b { font-variant-numeric: tabular-nums; color: #fff; min-width: 54px; text-align: right; }
.ad-roas-bar { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); }
.ad-roas-bar i { display: block; height: 100%; border-radius: 99px; }
.ad-roas-bar em, .ad-roas-legend em { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed rgba(255,255,255,.75); }
.ad-roas-legend { position: relative; font-size: 11.5px; color: rgba(255,255,255,.6); padding-left: 12px; }
.ad-roas-legend em { left: 0; top: 2px; bottom: 2px; }
.ad-roas-na { font-size: 12px; color: rgba(255,255,255,.5); font-style: italic; }
.muted-row b { color: rgba(255,255,255,.7); font-weight: 600; }

.ad-filters { background: #fff; border: 1px solid var(--ad-line); border-radius: 18px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
.ad-f { display: grid; gap: 3px; flex: 1 1 120px; min-width: 0; }
.ad-f > span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a93a3; padding-left: 4px; }
.ad-filters .ad-f select { max-width: none; width: 100%; flex: none; min-height: 34px; font-size: 13.5px; padding: 6px 28px 6px 10px; }
.ad-filters .ad-clear { align-self: flex-end; }

.ad-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ad-kpi { padding: 12px 13px; border-radius: 16px; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center; }
.ad-kpi .ad-kpi-ic { width: 28px; height: 28px; border-radius: 9px; margin: 0; }
.ad-kpi .ad-kpi-ic svg { width: 17px; height: 17px; }
.ad-kpi .ad-kpi-l { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-kpi > .ad-kpi-v, .ad-kpi > .ad-kpi-s, .ad-kpi > .ad-goal { grid-column: 1 / -1; }
.ad-kpi > .ad-kpi-v { font-size: 23px; margin-top: 6px; }
.ad-kpi > .ad-goal { margin-top: 4px; }
@media (min-width: 1180px) { .ad-kpis { grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); } }

.ad-card.wide { grid-column: 1 / -1; }

.ad-cash { background: linear-gradient(135deg, #f1faf6 0%, #eef6fd 100%); border: 1px solid #d5ece2; border-radius: 22px; padding: 18px 20px; display: grid; gap: 14px; }
.ad-cash-h { display: flex; align-items: center; gap: 10px; }
.ad-cash-h .ad-kpi-ic { margin: 0; background: #ddf3ea; color: var(--ad-teal); }
.ad-cash-h h3 { margin: 0; font-size: 16px; color: var(--ad-ink); }
.ad-cash-h span { font-size: 12.5px; color: var(--ad-sub); }
.ad-cash-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.ad-cash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ad-cash-kpis div { background: #fff; border-radius: 14px; padding: 12px 13px; display: grid; gap: 2px; box-shadow: 0 1px 2px rgba(19,32,60,.04); }
.ad-cash-kpis span { font-size: 12px; color: var(--ad-sub); }
.ad-cash-kpis b { font-size: 24px; color: var(--ad-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ad-cash-kpis small { font-size: 14px; opacity: .7; }
.ad-cash-kpis em { font-style: normal; font-size: 11px; color: #8a93a3; }
.ad-cash-split { display: grid; gap: 8px; }
.ad-cash-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a93a3; }
.ad-cash-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; gap: 2px; background: #fff; }
.ad-cash-bar i { display: block; height: 100%; }
.ad-cash-bar .cb, .ad-cash-leg i.cb, .ad-cm-bars .c { background: #16a37f; }
.ad-cash-bar .net, .ad-cash-leg i.net, .ad-cm-bars .v { background: #2563c9; }
.ad-cash-leg { display: grid; gap: 4px; font-size: 12.5px; color: var(--ad-ink); }
.ad-cash-leg span { display: flex; align-items: center; gap: 7px; }
.ad-cash-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ad-cash-months { display: flex; gap: 10px; align-items: flex-end; margin-top: 6px; }
.ad-cash-months > div { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; color: #8a93a3; }
.ad-cm-bars { display: flex; gap: 2px; align-items: flex-end; height: 48px; }
.ad-cm-bars i { width: 8px; border-radius: 3px 3px 0 0; display: block; }

@media (max-width: 900px) {
  .ad-hero { grid-template-columns: 1fr; gap: 16px; }
  .ad-cash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ad-flow b { font-size: 28px; }
  .ad-flow { gap: 10px; }
  .ad-arrow { font-size: 18px; padding-bottom: 4px; }
  .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-cash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-f { flex: 1 1 calc(50% - 4px); }
}
.ad-kpi .ad-kpi-l { white-space: normal; line-height: 1.2; }
/* Bloque principal por canal */
.ad-cash-bar.dark { background: rgba(255,255,255,.12); height: 14px; }
.ad-cash-bar.dark .cb { background: #7ee2b8; }
.ad-cash-bar.dark .net { background: #5fb3f0; }
.ad-cash-leg.dark { color: rgba(255,255,255,.85); }
.ad-cash-leg.dark i.cb { background: #7ee2b8; } .ad-cash-leg.dark i.net { background: #5fb3f0; }
.ad-cash-leg.dark b { color: #fff; }
.ad-hero-side .ad-hero-k + .ad-roas-row, .ad-hero-side .ad-cash-bar { margin-top: 2px; }
.ad-roas-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkish.light { color: #9fd3ff; }
.ad-hero-list { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.ad-flow-roas.below b { color: #ffb4a8; }
/* Íconos de vista a la derecha también en Inversión publicitaria */
.ad-gear-wrap { position: relative; }

.ad-gear[aria-expanded="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.ad-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 200px; z-index: 20; }
.st-back { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; justify-self: start; }
.st-yearf { flex: 0 0 140px; }
.st-yearf .st-year { width: 100%; max-width: none; }

/* Engrane de reportes: solo en Inversión publicitaria, en el lugar de "Filtros" */
#adsGear { display: none; flex-shrink: 0; }
#app[data-view="ads"] #adsGear, #app[data-view="settings"] #adsGear { display: flex; }
#adsGear .ad-gear { background: var(--fill); border: 0; color: var(--accent); }
#adsGear .ad-gear[aria-expanded="true"] { background: var(--accent); color: #fff; }
#count { display: none; }   /* sin contador de abiertas */
/* Vista previa: la columna nunca crece más que la tarjeta (las listas con opciones largas la empujaban). */
.card-detail { grid-template-columns: minmax(0, 1fr); }
.card-detail > *, .meta, .meta-row { min-width: 0; }
.meta-row > span:first-child { flex-shrink: 0; }
.meta-status select { min-width: 0; flex: 0 1 auto; }

/* Selector de vista del tablero: mosaico (completa) o compacta (media altura) */
.show-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.show-row > #fShow { flex: 1 1 auto; }
.view-toggle { flex: 0 0 auto; }
.view-toggle[hidden] { display: none; }
.view-toggle button { flex: 0 0 auto; width: 38px; padding: 5px; display: grid; place-items: center; color: var(--muted); }
.view-toggle button.on { color: var(--accent); }
.view-toggle svg { width: 18px; height: 18px; }

/* Tarjeta compacta: proyecto, prioridad, título (2 renglones) y barrita de avance */
.card.compact > .card-head { padding: 9px 12px 9px; gap: 5px 8px; }
.card.compact .card-sub, .card.compact .card-score, .card.compact .score-miss, .card.compact .mini-prog .pct { display: none; }
.card.compact .card-title { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.compact .mini-bar { height: 3px; }
.card.compact .pill, .card.compact .ptag { font-size: 8.8px; padding-top: 1.6px; padding-bottom: 1.6px; }
.col-list:has(.card.compact) { gap: 8px; }
/* Filas de la vista previa: si el valor no cabe junto a la etiqueta, baja de renglón (nunca se sale). */
.meta-row { flex-wrap: wrap; row-gap: 2px; }
.meta-row > b, .meta-row > select { margin-left: auto; max-width: 100%; }
.meta-due b { flex-wrap: wrap; justify-content: flex-end; }
/* Jalar un hito a la derecha lo mete como sub-hito del de arriba */
.ms.ms-nesting { transform: translateX(28px) scale(1.01); border-color: var(--teal); }
.ms.ms-unnesting { transform: translateX(-20px) scale(1.01); }
.ms.ms-nest-target { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26, 181, 193, .18); }
.ms.ms-nest-target::after { content: 'Soltar como sub-hito'; display: block; font-size: 11px; font-weight: 600; color: var(--teal-text); margin-top: 4px; }

/* Dónde estoy: lo que se está usando se resalta con un contorno azul marino
   suave (más claro que el del logo) y un halo tenue: cajas de texto y grabación. */
:root { --focus: #4a6496; --focus-soft: rgba(74, 100, 150, .14); }
/* Solo donde se escribe (cajas de texto), no en selects, botones ni previews. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 5px var(--focus-soft);
  background-color: #fff;
}
/* Grabando: la onda y el botón Terminar quedan resaltados juntos */
.recwave, .btn.recording, .section .btn.recording, .acc .btn.recording {
  box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 5px var(--focus-soft);
}

/* Tache para cancelar la grabación */
.recwave .rec-cancel {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: var(--fill-2); color: #4b4f54;
  font-size: 13px; line-height: 1; cursor: pointer; margin-left: 2px;
}
.recwave .rec-cancel:hover { background: #d8d8de; color: var(--text); }

/* Vista de lista: la tarjeta agrandada (1er toque) o en vista previa queda
   al frente con un contorno azul suave; lo demás se desenfoca. */
.board.focus .card:not(.expanded):not(.open):not(.grown) { filter: blur(5px); opacity: .4; pointer-events: none; }
.board.focus .card.grown:not(.expanded):not(.open) { filter: none; opacity: 1; pointer-events: auto; animation: none; }
.card.grown { border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-soft), var(--shadow); }
@media (min-width: 900px) {
  .board .col-list > .card { transition: margin .3s ease; }
  .card.wide { position: relative; z-index: 6; }
}
/* Vista de lista: el detalle (revisión, historial) se ve centrado en la
   pantalla; al cerrarlo, la tarjeta regresa a su lugar en la columna. */
@media (min-width: 900px) {
  .card.expanded.centered {
    position: fixed; z-index: 30; left: 50%; top: 84px; transform: translateX(-50%);
    width: min(820px, calc(100vw - 48px)); max-height: calc(100vh - 108px); overflow-y: auto;
    overscroll-behavior: contain; animation: centerIn .3s ease both;
  }
  @keyframes centerIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }
}
@media (min-width: 900px) { #app:has(.card.expanded.centered) ~ #fab, body:has(.card.expanded.centered) #fab { opacity: 0; pointer-events: none; } }

/* "Otro…": nombre y categoría */
.dialog.new-item { display: grid; gap: 12px; }
.dialog.new-item h3 { margin: 0; }
.ni-f { display: grid; gap: 6px; }
.ni-f > span { font-size: 13px; color: var(--muted); }
.ni-f input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--fill); }
.ni-group { display: flex; }
.ni-group button { flex: 1; }
a.cal-btn { text-decoration: none; }
/* Celular: con el ícono de reservas, los botones se achican un poco para que "Filtros" quepa en la misma fila */
@media (max-width: 430px) {
  .filter-row { column-gap: 5px; }
  .filter-row .cal-btn { width: 36px; height: 36px; border-radius: 10px; }
  .filter-row .cal-btn svg { width: 19px; height: 19px; }
  .filter-row #btnFilters { padding-left: 5px; padding-right: 5px; }
}
@media (max-width: 380px) {
  .filter-row { column-gap: 4px; }
  .filter-row .cal-btn { width: 35px; height: 35px; }
}
@media (max-width: 360px) {
  .filter-row { column-gap: 3px; }
  .filter-row .cal-btn { width: 33px; height: 33px; }
  .filter-row .cal-btn svg { width: 18px; height: 18px; }
  .filter-row #btnFilters { padding-left: 3px; padding-right: 3px; font-size: 14px; }
}

/* Menú de hamburguesa: solo en celular reemplaza a los íconos de navegación */
.nav-menu-wrap { position: relative; display: none; flex-shrink: 0; }
.nav-menu { right: 0; left: auto; top: calc(100% + 6px); min-width: 210px; z-index: 40; }
.nav-item { display: flex; align-items: center; gap: 12px; }
.nav-item svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.nav-item.on { background: var(--fill); font-weight: 600; }
@media (max-width: 700px) {
  .nav-menu-wrap { display: block; }
  .filter-row > #btnBoard, .filter-row > #btnCal, .filter-row > #btnArchive, .filter-row > #btnPeople,
  .filter-row > #btnAds, .filter-row > #btnBook, .filter-row > #btnProv, .filter-row > #btnReports, .filter-row > #btnOdc, .filter-row > #btnOtb, .filter-row > #btnPauta, .filter-row > #btnVideo, .filter-row > #btnNews, .filter-row > #btnLanding, .filter-row > #btnBanner, .filter-row > #btnVBanner, .filter-row > #btnVoice, .filter-row > #btnAi, .filter-row > #btnLib, .filter-row > #btnBrand, .filter-row > .cfg-wrap { display: none; }
  .filter-row { flex-wrap: nowrap; }
  .filter-row > #btnBrief { display: none; }
  .filter-row #fQ { flex: 1 1 auto; min-width: 0; }
  .filter-row #btnFilters { margin-left: 0; }
  .filter-row .cal-btn { width: 44px; height: 44px; border-radius: 12px; }
  .filter-row .cal-btn svg { width: 22px; height: 22px; }
}

/* ---------- Panel de reservas de intercambio ---------- */
#bookGo { display: none; flex-shrink: 0; width: auto; padding: 0 12px; }
#app[data-view="book"] #bookGo { display: grid; }
#app[data-view="book"] #btnFilters, #app[data-view="book"] #filterPanel, #app[data-view="book"] .fab { display: none; }
.bk-contracts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
.bk-contract { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(19,32,60,.05); }
.bk-c-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bk-c-h b { font-size: 17px; }
.bk-c-h span { font-size: 12.5px; color: var(--muted); }
.bk-c-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bk-c-nums span { display: block; font-size: 12px; color: var(--muted); }
.bk-c-nums b { font-size: 21px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.bk-c-nums b.ok { color: #0f7a5c; }
.bk-c-bar { position: relative; height: 8px; border-radius: 999px; background: var(--fill); }
.bk-c-bar i { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.bk-c-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.bk-c-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.bk-alert { margin: 0; font-size: 13px; color: var(--orange-text); background: var(--orange-soft); border-radius: 10px; padding: 8px 10px; }
.bk-val { font-size: 12px; font-weight: 600; fill: var(--text); }
.bk-cap { display: grid; grid-template-columns: minmax(0, 1fr) 90px 38px; align-items: center; gap: 8px; margin: -4px 0 10px; font-size: 11.5px; color: var(--muted); }
.bk-cap-t { height: 5px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.bk-cap-t i { display: block; height: 100%; background: #9aa5b4; }
.bk-cap.near .bk-cap-t i { background: var(--orange); } .bk-cap.near em { color: var(--orange-text); }
.bk-cap.over .bk-cap-t i { background: var(--red); } .bk-cap.over em { color: var(--red); font-weight: 700; }
.bk-cap em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.bk-table-wrap { overflow-x: auto; margin: 0 -4px; }
.bk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bk-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bk-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bk-table tr.off td { color: var(--muted); text-decoration: line-through; }
.bk-table tr.off td select, .bk-table tr.off td input { text-decoration: none; }
.bk-table select, .bk-table input { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: #fff; }
.bk-table input { width: 110px; text-align: right; }
.bk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.bk-del { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.bk-del:hover { background: var(--fill); color: var(--red); }
.bk-more { margin-top: 10px; }
@media (max-width: 600px) { .bk-c-nums b { font-size: 18px; } }
.bk-src { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; text-align: right; }
.bk-table input::placeholder { color: var(--text); opacity: .55; }

/* Escritorio: logotipo, buscador e íconos en un solo renglón */
@media (min-width: 901px) {
  .top { gap: 24px; justify-content: flex-start; }
  .top > .filter-row { flex: 1 1 auto; }
  .top > .top-actions:empty, .top > .top-actions { display: none; }
  .filters { padding-top: 4px; }
}

/* ---------- Celular: logo + buscador + ☰ arriba; estados en una pastilla ---------- */
.show-pick { display: none; }
.nav-sep { height: 1px; background: var(--line); margin: 6px 4px; }
@media (max-width: 700px) {
  .top { padding: calc(18px + env(safe-area-inset-top)) 20px 10px; gap: 14px; justify-content: flex-start; }
  .logo { height: 24px; }
  .top > .filter-row { flex: 1 1 auto; min-width: 0; }
  .top > .top-actions { display: none; }
  .filter-row #btnFilters { display: none !important; }
  .filters { padding: 2px 20px 12px; }
  #fShow { display: none; }
  .show-pick {
    display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px;
    border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .show-pick[hidden] { display: none; }
  .show-pick #showPickLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .show-pick svg { width: 18px; height: 18px; margin-left: auto; color: var(--muted); flex-shrink: 0; }
}
/* Hoja inferior a todo lo ancho */
.pick-ov { position: fixed; inset: 0; z-index: 60; background: rgba(20, 24, 36, 0); transition: background .25s ease; display: flex; align-items: flex-end; }
.pick-ov.in { background: rgba(20, 24, 36, .32); }
.pick-sheet {
  width: 100%; background: #fff; border-radius: 22px 22px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -10px 30px rgba(0, 0, 0, .12);
  max-height: 85vh; overflow-y: auto;
}
.pick-ov.in .pick-sheet { transform: none; }
.pick-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 2px auto 10px; }
.pick-sheet h3 { margin: 0 4px 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pick-list { display: grid; gap: 2px; }
.pick-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; padding: 14px 12px; border-radius: 14px; font: inherit; font-size: 17px; color: var(--text); text-align: left; cursor: pointer;
}
.pick-opt em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-opt svg { width: 22px; height: 22px; color: var(--accent); }
.pick-opt.on { background: var(--fill); font-weight: 600; }
.pick-opt:active { background: var(--fill); }
.pick-filters {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; height: 52px;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-size: 16px; font-weight: 700; color: var(--accent); cursor: pointer;
}
.pick-filters svg { width: 20px; height: 20px; }
/* Tarjeta recién creada o duplicada: un destello para ubicarla */
.card.just-added { animation: justAdded 2.2s ease; }
@keyframes justAdded { 0%, 40% { box-shadow: 0 0 0 2px var(--focus), 0 0 0 7px var(--focus-soft); } 100% { box-shadow: var(--shadow); } }

/* Botón +: menú con dos opciones (tarea / correo) */
.fab { transition: transform .2s ease; }
.fab.open svg { transform: rotate(45deg); }
.fab svg { transition: transform .2s ease; }
.fab-menu { position: fixed; z-index: 21; right: 28px; bottom: calc(100px + env(safe-area-inset-bottom)); display: grid; gap: 12px; justify-items: end; animation: fabIn .18s ease both; }
.fab-menu[hidden] { display: none; }
@keyframes fabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fab-opt { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.fab-opt span { background: #fff; color: var(--text); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.fab-opt i { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(19,32,60,.22); }
.fab-opt i svg { width: 26px; height: 26px; }
.fab-opt:hover i { background: var(--fill); }
@media (min-width: 700px) { .fab-menu { right: 46px; bottom: 132px; } .fab-opt i { width: 58px; height: 58px; } }
/* Borrador de correo */
.sheet.sheet-lg { max-width: 760px; }
@media (min-width: 700px) { .sheet.sheet-lg { min-height: min(760px, 88vh); } }
.mail-draft { display: flex; flex-direction: column; min-height: 100%; }
.md-step { display: grid; gap: 16px; }
.md-hint { margin: 0; }
.mail-draft textarea#mdText { min-height: 160px; }
.md-btns { display: grid; gap: 12px; margin-top: 4px; }
@media (min-width: 700px) { .md-btns { grid-template-columns: 1fr 1fr; } }
.md-to { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--muted); }
.md-to b { color: var(--text); font-weight: 600; }
.md-field { display: grid; gap: 8px; }
/* La sección de Clave se ilumina mientras se elige */
.md-sec { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--fill); transition: background .15s ease, box-shadow .15s ease; }
.md-sec:focus-within, .md-sec:hover { background: #fff; box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 5px var(--focus-soft); }
.md-label { font-size: 13px; color: var(--muted); }
.md-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md-codes { display: flex; flex-wrap: wrap; gap: 8px; }
.md-code { border: 1.5px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.md-code:hover { border-color: var(--focus); }
.md-code.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.md-code.sm { padding: 3px 9px; font-size: 12px; cursor: default; }
.md-subj { margin: 2px 4px 6px; font-size: 13px; color: var(--muted); }
.md-body { min-height: 240px; line-height: 1.55; font-size: 15px; }
.md-speak { border: 0; background: var(--fill); color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.md-speak.on { background: var(--accent); color: #fff; }
.md-link { margin: 22px auto 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(19,32,60,.25); }
/* En proceso (transcribiendo, mejorando, preparando…): fondo verde pastel y texto verde oscuro. */
.btn.busy, .btn.busy:disabled, .btn.primary.busy { background: #e3f6ee; color: #0f6b4f; opacity: 1; box-shadow: none; }
.btn.ok { background: #e3f6ee; color: #0f6b4f; }
.md-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; margin-bottom: 10px; }
.md-item-top { display: flex; align-items: center; gap: 10px; }
.md-del { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.md-del:hover { background: var(--fill); color: var(--red); }
.md-item-subj { font-size: 15px; }
.md-item-body { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 8px 0 0; color: var(--text); }
.md-empty { text-align: center; padding: 30px 0; }
.recwave + .md-btns, .md-btns:has(.recording) { gap: 14px; }
/* Opciones del +: círculos azul marino con ícono blanco; + > Correo > Tarea */
.fab-opt i { background: var(--accent); color: #fff; }
.fab-opt:hover i { background: #1f3260; }
#fabMail i { width: 55px; height: 55px; }
#fabMail i svg { width: 27px; height: 27px; }
@media (min-width: 700px) { #fabMail i { width: 61px; height: 61px; } }
.btn.danger-solid { background: var(--red); color: #fff; }
/* Clave: menú propio */
.md-dd { position: relative; }
.md-select { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 16px; cursor: pointer; color: var(--text); }
.md-select svg { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
.md-sec.open { background: #fff; box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 5px var(--focus-soft); }
.md-pop { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 14px 34px rgba(19,32,60,.18), 0 0 0 1px var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.md-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.md-opt:hover, .md-opt.on { background: var(--fill); }
.md-opt svg { width: 18px; height: 18px; color: var(--accent); }
.md-pick .md-opt { padding: 14px 12px; font-size: 17px; }
#mdSubject { font-weight: 700; }
.md-field .md-speak { justify-self: start; margin-top: 2px; }
/* Historial de enviados: la hoja llega casi hasta arriba */
.sheet.sheet-tall { height: 92vh; height: 92dvh; max-height: 92dvh; }
#mdSearch { margin-bottom: 4px; }
/* Vista previa: todos los valores alineados a la derecha en la misma columna */
.meta-row > select { flex: 1 1 auto; text-align: right; text-align-last: right; padding-right: 22px; background-position: right 1px center; }
.meta-row > b { text-align: right; }
.meta-row:not(.meta-due) > b { padding-right: 22px; }
.sheet-foot .card-title { font-size: 16px; }
/* Al abrir el + el fondo se desenfoca */
body.fab-on::before { content: ''; position: fixed; inset: 0; z-index: 19; background: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fabIn .18s ease both; }
body.fab-on .fab { z-index: 22; }
/* Leer en voz alta: círculo morado arriba a la derecha de la caja del correo */
.md-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md-speak { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #820ad1; color: #fff; box-shadow: 0 4px 12px rgba(130, 10, 209, .3); transition: transform .15s ease, background .15s ease; }
.md-speak svg { width: 20px; height: 20px; }
.md-speak:hover { background: #6d08b0; }
.md-speak:active { transform: scale(.92); }
.md-speak.on { background: #6d08b0; color: #fff; box-shadow: 0 0 0 4px rgba(130, 10, 209, .2); }
/* Clave: sin fondo gris */
#mdCodeSec, #mdCodeSec:hover, #mdCodeSec:focus-within, #mdCodeSec.open { background: transparent; padding: 0; box-shadow: none; }
#mdCodeSec.open .md-select, #mdCodeSec .md-select:focus-visible { box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 5px var(--focus-soft); outline: none; }
/* Feedback por rondas sobre el borrador */
.md-fb { display: grid; gap: 10px; }
.md-redo { border: 1.5px dashed var(--line); background: #fff; }
.md-fb-box { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.md-fb-box textarea { min-height: 96px; }
.md-fb-x { border: 0; background: var(--fill); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--muted); font-size: 13px; }
.md-fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.md-fb-list li { font-size: 13px; color: var(--muted); background: var(--fill); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.md-fb-n { display: inline-block; font-weight: 700; color: var(--accent); margin-right: 6px; }
@keyframes mdNew { from { box-shadow: 0 0 0 3px rgba(15, 122, 92, .45); } to { box-shadow: 0 0 0 3px rgba(15, 122, 92, 0); } }
.md-body.md-new { animation: mdNew 1.4s ease-out; }
/* Borrador listo: sin título "Nuevo correo"; acciones apiladas Enviar → Feedback → Volver a redactar */
.sheet.md-notitle #sheetTitle { visibility: hidden; }
.md-actions { display: grid; gap: 10px; }
.md-speak.loading { background: #a24be0; }
.md-speak.loading svg { animation: mdPulse 1s ease-in-out infinite; }
@keyframes mdPulse { 50% { opacity: .35; } }
/* Borrador listo: sin renglón de título; la ✕ flota arriba a la derecha y "Para" sube */
.sheet.md-notitle { position: relative; }
.sheet.md-notitle .sheet-head { position: absolute; top: 0; right: 0; z-index: 3; padding: 10px 12px 0 0; }
.sheet.md-notitle #sheetTitle { display: none; }
.sheet.md-notitle .mail-draft { padding-top: 18px; }
.sheet.md-notitle .md-to { padding-right: 44px; }
/* Botones con el ícono a la derecha */
.md-ico-r { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Celular: lista/mosaico a la izquierda y "Todas las tareas" a la derecha */
@media (max-width: 700px) { .show-row > #viewToggle { order: -1; } }
/* Celular: un solo botón que alterna; muestra la vista a la que cambias (en lista se ve el mosaico y viceversa) */
@media (max-width: 700px) {
  .view-toggle button.on { display: none; }
  .view-toggle button { width: 40px; color: var(--accent); background: transparent; box-shadow: none; }
}
/* Bocina en azul marino */
.md-speak { background: var(--accent); box-shadow: 0 4px 12px rgba(19, 32, 60, .3); }
.md-speak:hover, .md-speak.on { background: #22345e; }
.md-speak.on { box-shadow: 0 0 0 4px rgba(19, 32, 60, .18); }
.md-speak.loading { background: #3a4c75; }
/* Casilla: crear tarjeta de tarea */
.md-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.md-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.md-check span { display: grid; gap: 2px; }
.md-check b { font-size: 15px; color: var(--text); }
.md-check small { font-size: 13px; color: var(--muted); }
.md-check:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Documentos y links de referencia */
.att { display: grid; gap: 8px; margin-top: 6px; }
.att-list { display: grid; gap: 6px; }
.att-list:empty { display: none; }
.att-item { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 4px 4px 4px 6px; min-width: 0; }
.att-item a { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: var(--text); padding: 4px; }
.att-kind { flex-shrink: 0; display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.att-kind.att-link { background: var(--fill); color: var(--accent); }
.att-kind svg { width: 18px; height: 18px; }
.att-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.att-item button { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); cursor: pointer; font-size: 12px; }
.att-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.att-btns .add-img { width: auto; height: 40px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600; }
.att-add { display: flex; gap: 8px; }
.att-add[hidden] { display: none; }
.att-add input { flex: 1 1 auto; min-width: 0; }
.brief:not(.editing) .att-btns, .brief:not(.editing) .att-add, .brief:not(.editing) .att-item button { display: none; }
/* Casilla "crear tarjeta": en celular la palomita va a la derecha */
@media (max-width: 700px) { .md-check { flex-direction: row-reverse; } .md-check span { flex: 1 1 auto; } }
.md-imgs { display: grid; gap: 6px; }
.md-imgs .tiny { margin: 0; }
.att-thumb { width: 38px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--fill); }
@media (max-width: 700px) { #mdAtt .att-btns { justify-content: flex-end; } }
/* Clave obligatoria */
#mdCodeVal.md-ph { color: var(--muted); font-weight: 600; }
.md-err-msg { margin: 6px 2px 0; color: var(--red); font-size: 13px; font-weight: 600; }
#mdCodeSec.md-err .md-select { box-shadow: inset 0 0 0 1.5px var(--red), 0 0 0 4px var(--red-soft); }
#mdCodeSec.md-err .md-label { color: var(--red); }
/* Celular: cambio de estado deslizando el tablero */
@keyframes swipeInL { from { transform: translateX(36px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes swipeInR { from { transform: translateX(-36px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes swipeEdge { 30% { transform: translateX(-8px); } 60% { transform: translateX(8px); } }
.board.swipe-in-l { animation: swipeInL .22s ease-out; }
.board.swipe-in-r { animation: swipeInR .22s ease-out; }
.board.swipe-edge { animation: swipeEdge .25s ease; }
/* Trasladar hitos */
.mv-sheet { display: flex; flex-direction: column; gap: 8px; max-height: 88dvh; }
.mv-lbl { margin: 6px 2px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.mv-ms { display: grid; gap: 4px; max-height: 26dvh; overflow-y: auto; }
.mv-msi { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--fill); font-size: 14px; font-weight: 600; cursor: pointer; }
.mv-msi input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.mv-msi em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; }
.mv-q { width: 100%; }
.mv-list { display: grid; gap: 4px; overflow-y: auto; min-height: 120px; flex: 1 1 auto; }
.mv-t { display: grid; gap: 2px; text-align: left; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--text); }
.mv-t b { font-size: 14px; }
.mv-t span { font-size: 12px; color: var(--muted); }
.mv-t.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--focus-soft); }
.mv-empty { padding: 12px 4px; }
.mv-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding-top: 6px; }
.mv-foot .btn[disabled] { opacity: .45; }
@media (min-width: 701px) { .mv-sheet { max-width: 560px; } }
.rec-recovered { width: 100%; min-height: 140px; margin: 10px 0; }
/* Agregar como hito a una tarea existente */
.md-msbox { display: grid; gap: 8px; margin-top: -2px; }
.md-msbox[hidden] { display: none; }
.md-msbox .mv-list { min-height: 0; max-height: 40dvh; }
.md-msbox .mv-ms { max-height: none; }
/* + → Pendiente (el más chico, hasta arriba) */
#fabPend i { width: 49px; height: 49px; }
#fabPend i svg { width: 24px; height: 24px; }
@media (min-width: 700px) { #fabPend i { width: 55px; height: 55px; } }
.pend textarea#pdText { min-height: 120px; }
.tp-status { width: 100%; }
.tp-status[hidden], .mv-q[hidden] { display: none; }
/* Pendiente en dos pasos: la lista usa todo el alto y el botón queda fijo abajo */
.pd-pick .mv-list { max-height: none; }
.pd-item { min-height: 0; font-weight: 600; }
.pd-back { margin: 0; font-size: 13px; }
.pd-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 0 -6px calc(-24px - env(safe-area-inset-bottom)); padding: 10px 6px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255,255,255,0), var(--bg) 30%); z-index: 2; }
/* iPhone: a veces no pintaba parte de la hoja al desplazarse rápido (quedaba en blanco) */
#sheetBody { -webkit-overflow-scrolling: auto; transform: translateZ(0); }
/* Celular: el título amarillo de la tarea va anclado arriba, usando el espacio sobre la hoja */
@media (max-width: 700px) {
  .sheet:has(#sheetFoot:not([hidden])) { height: calc(100dvh - env(safe-area-inset-top) - 6px); max-height: none; }
  .sheet:has(#sheetFoot:not([hidden]))::before { display: none; }
  .sheet:has(#sheetFoot:not([hidden])) #sheetFoot { order: -1; border-top: 0; border-bottom: 1px solid rgba(214, 170, 0, .25); padding: 16px 20px 14px; border-radius: 14px 14px 0 0; }
  .sheet:has(#sheetFoot:not([hidden])) #sheetBody { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* Hitos por vencer: contorno discreto (3 días azul, 2 naranja, 1 o vencido rojo) */
.card.due-3 { outline: 2px solid #2f7cf6; outline-offset: -1px; }
.card.due-2 { outline: 2px solid #ff9500; outline-offset: -1px; }
.card.due-1 { outline: 2px solid var(--red); outline-offset: -1px; }
/* Volver arriba (celular): círculo blanco con sombra, abajo a la izquierda */
.to-top { position: fixed; left: 16px; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 10; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(19, 32, 60, .22), 0 0 0 1px rgba(19, 32, 60, .06); cursor: pointer; animation: fabIn .2s ease both; }
.to-top[hidden] { display: none; }
.to-top svg { width: 24px; height: 24px; }
.to-top:active { transform: scale(.94); }
@media (min-width: 701px) { .to-top { display: none !important; } }
body.fab-on .to-top { display: none; }
/* Filtros dentro de la hoja "Ver tareas" (celular) */
.pf-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 4px 6px; }
.pf-head h3 { margin: 0 !important; }
.pf-back { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.pf-row em { justify-self: end; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; color: var(--muted); font-size: 15px; }
.pf-row.on em { color: var(--accent); font-weight: 600; }
.pf-row svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.pf-opts { max-height: 62dvh; overflow-y: auto; }
.pf-group { margin: 10px 14px 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 10px; }
/* Avisos: arriba y más anchos */
.toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; width: min(560px, calc(100% - 24px)); max-width: none; padding: 14px 18px; font-size: 15px; font-weight: 600; z-index: 70; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: toastIn .22s ease-out; }
@keyframes toastIn { from { transform: translate(-50%, -14px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
/* Bocina flotante del borrador: misma posición que el botón + */
.sheet { position: relative; }
.md-speak.md-speak-float { position: absolute; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 5; width: 64px; height: 64px; margin: 0; box-shadow: 0 6px 20px rgba(19, 32, 60, .35); }
.md-speak.md-speak-float[hidden] { display: none; }
.md-speak.md-speak-float svg { width: 28px; height: 28px; }
@media (min-width: 700px) { .md-speak.md-speak-float { right: 22px; bottom: 22px; } }
.sheet:has(.md-speak-float:not([hidden])) .mail-draft { padding-bottom: 90px; }
/* Confirmar hito */
.cm-sheet { display: grid; gap: 10px; }
.cm-where { margin: 0 4px; font-size: 14px; color: var(--muted); }
.cm-where b { color: var(--text); }
.cm-f { display: grid; gap: 4px; }
.cm-f span { font-size: 13px; color: var(--muted); padding-left: 2px; }
.cm-f textarea { min-height: 0; font-weight: 600; }
.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-subs { margin: 0 4px; }
/* Imágenes de contexto: toque para decidir a dónde van (azul = tarea, verde = correo) */
.ctx-thumb { cursor: pointer; transition: box-shadow .15s ease; }
.ctx-thumb.use-1 { box-shadow: 0 0 0 3px var(--accent); }
.ctx-thumb.use-2 { box-shadow: 0 0 0 3px #22a05a; }
.use-tag { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; color: #fff; pointer-events: none; }
.use-1 .use-tag { background: var(--accent); }
.use-2 .use-tag { background: #22a05a; }
.md-ctx-legend b { font-weight: 700; }
.lg-task { color: var(--accent); }
.lg-mail { color: #22a05a; }
#mdImgs2 .thumb, #mdImgs .thumb { overflow: visible; }
#mdImgs2 .thumb img, #mdImgs .thumb img { border-radius: 12px; }
/* Pendiente paso 3: resumen del hito */
.pd-sum { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--fill); display: grid; gap: 2px; font-size: 14px; }
.pd-sum span { color: var(--muted); font-size: 13px; }
.tp-status { width: 100%; }
.cm-f .md-select { min-height: 46px; }
.md-select b { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Celular: responsable y fecha uno por renglón; botón final más abajo */
@media (max-width: 700px) { .cm-row { grid-template-columns: 1fr; } }
.cm-f input[type=date] { width: 100%; min-height: 46px; }
.pd-foot { padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
/* Paso 3: el botón queda pegado abajo aunque la lista sea corta */
#pdStep3:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
#pdStep3 .pd-foot { margin-top: auto; }
/* Cuarto estado: ambas (morado) y archivos de contexto */
.ctx-thumb.use-3 { box-shadow: 0 0 0 3px #7b3fe4; }
.use-3 .use-tag { background: #7b3fe4; }
.lg-both { color: #7b3fe4; }
#mdDocs:empty, #mdDocs2:empty { display: none; }
.ctx-doc { cursor: pointer; padding: 6px 6px 6px 8px; gap: 10px; }
.ctx-doc.use-1 { box-shadow: inset 0 0 0 2px var(--accent); }
.ctx-doc.use-2 { box-shadow: inset 0 0 0 2px #22a05a; }
.ctx-doc.use-3 { box-shadow: inset 0 0 0 2px #7b3fe4; }
.ctx-doc .use-tag { position: static; flex-shrink: 0; }
.ctx-doc .att-name { flex: 1 1 auto; }
/* Filtros: cada uno como botón con contorno (igual que "Filtros") */
.pf-head + .pick-list { gap: 8px; }
.pick-opt.pf-row { border: 1.5px solid var(--line); border-radius: 14px; background: #fff; padding: 13px 14px; }
.pick-opt.pf-row.on { border-color: var(--accent); background: #fff; }
/* Filtro elegido: azul marino con letra blanca */
.filter-panel select.has-val { background-color: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.filter-panel select.has-val option { color: var(--text); background: #fff; }
/* Escritorio: el panel de filtros abre arriba de Agenda/Asignadas/… */
@media (min-width: 701px) {
  .filters > .filter-row { order: -2; }
  .filters > #filterPanel { order: -1; }
}
/* Gantt: tareas que se expanden en sus hitos + marcadores con emoji */
.g-label { flex-direction: row; align-items: center; gap: 4px; padding: 0 4px 0 0; }
.g-tog { flex: 1 1 auto; min-width: 0; border: 0; background: none; text-align: left; padding: 8px 4px 8px 10px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; color: inherit; }
.g-tog[disabled] { cursor: default; }
.g-chev { font-style: normal; color: var(--muted); margin-right: 4px; font-size: 11px; }
.g-open-btn { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 8px; background: var(--fill); color: var(--accent); font-weight: 700; cursor: pointer; }
.g-row.g-open > .g-label { background: var(--fill); }
.g-msrow { min-height: 40px; background: #fbfbfd; }
.g-mslabel { flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 10px 6px 22px; background: #fbfbfd; cursor: default; }
.g-msrow.sub .g-mslabel { padding-left: 34px; }
.g-mstext { font-size: 12px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-msrow.fin .g-mstext { color: var(--muted); text-decoration: line-through; }
.g-msbar { height: 8px; margin-top: -4px; opacity: .9; }
.g-msover { height: 8px; margin-top: -4px; }
.g-emo { position: absolute; top: 50%; z-index: 2; transform: translate(-50%, -50%); font-size: 15px; line-height: 1; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.g-emo.up { top: calc(50% - 15px); }
.g-emo.run { font-size: 17px; }
.g-legend span { display: inline-flex; align-items: center; gap: 4px; }
.g-nodate { color: var(--red); font-weight: 600; }
/* Gantt: tarea vs hito, hilo de color, leyenda centrada */
.g-legend { justify-content: center; }
.g-chev { flex-shrink: 0; width: 22px; height: 22px; margin-left: 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; }
.g-chev:hover { background: var(--fill); }
.g-chev-sp { width: 28px; flex-shrink: 0; }
.g-tog { padding-left: 2px; }
.g-hint { font-weight: 600; color: var(--gc); }
/* La tarea: fila más marcada con franja de su color */
.g-task > .g-label { box-shadow: inset 4px 0 0 var(--gc); }
.g-task.g-open > .g-label { background: color-mix(in srgb, var(--gc) 12%, #fff); }
.g-task.g-open > .g-label .g-title { color: var(--gc); }
.g-task.g-open > .g-track { background-color: color-mix(in srgb, var(--gc) 6%, transparent); }
.g-task.g-open { border-bottom: 0; }
/* Los hitos: más chicos, con la misma franja y un tinte suave a todo lo largo */
.g-msrow > .g-label { background: color-mix(in srgb, var(--gc) 5%, #fff); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--gc) 55%, #fff); }
.g-msrow > .g-track { background-color: color-mix(in srgb, var(--gc) 5%, transparent); }
.g-msrow { border-bottom-color: color-mix(in srgb, var(--gc) 15%, var(--line)); }
.g-msrow:last-of-type, .g-msrow + .g-task { }
.g-mstext::before { content: '◆ '; color: var(--gc); font-size: 9px; vertical-align: 2px; }
.g-msrow.sub .g-mstext::before { content: ''; }
.g-flag { font-size: 16px; transform: translate(-30%, -85%); }
/* Ícono de ruta (tarea con hitos), del color de su tarea */
.g-chev { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gc); border-radius: 9px; background: color-mix(in srgb, var(--gc) 10%, #fff); }
.g-chev svg { width: 20px; height: 20px; }
.g-chev:hover { background: color-mix(in srgb, var(--gc) 18%, #fff); }
.g-open .g-chev { background: var(--gc); color: #fff; }
.g-chev-sp { width: 36px; }
/* Gantt: el contenedor de la tarea lleva su color; ícono de ruta más chico y sin fondo propio */
.g-task > .g-label { background: color-mix(in srgb, var(--gc) 8%, #fff); }
.g-task.g-open > .g-label { background: color-mix(in srgb, var(--gc) 16%, #fff); }
.g-chev, .g-open .g-chev { width: 20px; height: 20px; background: none; color: var(--gc); border-radius: 6px; }
.g-chev svg { width: 13px; height: 13px; }
.g-chev:hover { background: color-mix(in srgb, var(--gc) 20%, #fff); }
.g-chev-sp { width: 26px; }
/* Tarjetita de detalle */
.g-tip { position: fixed; z-index: 80; max-width: 300px; background: #fff; color: var(--text); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(19, 32, 60, .2), 0 0 0 1px rgba(19, 32, 60, .06); display: grid; gap: 3px; font-size: 12px; line-height: 1.35; pointer-events: none; animation: fabIn .12s ease both; }
.g-tip b { font-size: 13px; margin-bottom: 2px; }
.g-tip span { color: #3a3d41; }
/* Gantt: hitos con texto normal y más chico; ojo para ocultar */
.g-mstext { font-size: 11.5px; font-weight: 400; }
.g-mslabel { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 1px; }
.g-mslabel .g-mstext { flex: 1 1 calc(100% - 30px); min-width: 0; }
.g-mslabel .g-sub { flex-basis: 100%; padding-left: 26px; }
.g-eye { flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: color-mix(in srgb, var(--gc) 70%, #555); display: grid; place-items: center; cursor: pointer; }
.g-eye svg { width: 15px; height: 15px; }
.g-eye:hover { background: color-mix(in srgb, var(--gc) 15%, #fff); }
.g-hid { min-height: 24px; opacity: .55; }
.g-hid .g-mslabel { padding-top: 2px; padding-bottom: 2px; }
.g-hid .g-mstext { -webkit-line-clamp: 1; font-size: 10.5px; }
.g-mslabel[data-gms] { cursor: pointer; }
.g-mslabel[data-gms]:hover .g-mstext { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gc) 60%, transparent); }
@keyframes msFlash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
li.ms.ms-flash { animation: msFlash 2.2s ease-out; border-radius: 14px; }
/* Menú de opciones de la tarea: íconos y botón ⋮ junto a "Ver detalle" */
.menu-item { display: flex; align-items: center; gap: 10px; }
.menu-item .mi { width: 18px; height: 18px; flex-shrink: 0; }
.card-actions { position: relative; display: flex; gap: 8px; }
.card-actions [data-open] { flex: 1 1 auto; }
.card-more { flex: 0 0 auto; width: 46px; padding: 0; font-size: 20px; font-weight: 800; line-height: 1; }
.card-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 230px; }
.card-menu[hidden] { display: none; }
.card-actions .card-more { flex: 0 0 48px; width: 48px; min-width: 48px; }
.card-menu { position: fixed; right: auto; bottom: auto; }
/* ⋮ discreto: sin contenedor, pegado a "Ver detalle" */
.card-actions { gap: 0; align-items: center; }
.card-actions .card-more { flex: 0 0 28px; width: 28px; min-width: 28px; height: 40px; background: none; box-shadow: none; border: 0; color: var(--muted); font-size: 18px; font-weight: 700; margin-right: -6px; }
.card-actions .card-more:hover, .card-actions .card-more:active { background: none; color: var(--text); }
/* Títulos del Kanban sin negritas; en la vista previa (abierta) sí */
.card .card-title { font-weight: 500; }
.card.open .card-title, .card.expanded .card-title { font-weight: 600; }
.card-menu { z-index: 45; }

.card.grown .card-title { font-weight: 600; }
#btnFilters.icon-only { display: inline-flex; align-items: center; justify-content: center; gap: 4px; position: relative; }
.week-sep { font-size: 11px; color: var(--muted, #8a8f98); text-align: center; margin: 6px 0 2px; letter-spacing: .02em; }
.week-sep:first-child { margin-top: 0; }
.board.focus .week-sep { filter: blur(2px); opacity: .5; }

.acc[data-acc="brief"] .brief { margin-top: 0; padding-top: 0; border-top: 0; }
.acc[data-acc="brief"] .brief-head { margin-bottom: -6px; }

.card.open:not(.expanded) .card-title { cursor: pointer; }

/* Hito nuevo en un renglón: caja + fecha chica + flecha para crearlo */
.ms-add.ms-add-main { flex-wrap: nowrap; align-items: center; }
.ms-add-main .ms-new-wrap { flex: 1 1 auto; }
.ms-add-main .date-pill { flex: 0 0 25%; max-width: 160px; min-width: 84px; padding: 0 8px; }
.ms-addok { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #e6e8ec; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ms-addok svg { width: 20px; height: 20px; }
.btn.ms-open { justify-self: stretch; width: 100%; }

/* Barras de los hitos en gris; la del avance general (arriba) un poco más gruesa */
.ms-prog input.slider.mini[class] { --c: #9a9fa8; }
.ms-gbar i { background: #9a9fa8 !important; }
.card.expanded .card-head .mini-bar { height: 6px; border-radius: 3px; }

/* Número del hito (1., 2.…) y letra del sub-hito (a), b)…) */
.ms-num { flex: 0 0 auto; min-width: 20px; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* Hito terminado: %, palomita y @ en verde (la barra se queda gris) */
.ms.done > .ms-prog [data-mspct], .ms.done > .ms-prog b { color: var(--green-text); }
.ms.done .ms-check input {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; margin: 0; border-radius: 5px; cursor: pointer;
  background: #E9F8EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%2324893D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border: 1px solid #bfe6c9;
}
.ms.done .mention, .ms.done .ms-check span.mention { background: var(--green-soft); color: var(--green-text); }
/* Borrar comentario del historial */
.hist .what { position: relative; }
.hist-del { border: 0; background: none; color: var(--muted); padding: 2px; margin-right: 6px; cursor: pointer; vertical-align: -3px; opacity: .55; }
.hist-del:hover { color: var(--red); opacity: 1; }
.hist-del svg { width: 15px; height: 15px; }
/* Hito terminado: texto y la raya que lo cruza en verde */
.ms.done .ms-check span, .ms.done .ms-text { color: #24893D; text-decoration-color: #24893D; }

/* Trasladar hitos y correo de seguimiento: en escritorio, al centro con el fondo desenfocado */
@media (min-width: 701px) {
  .pick-ov:has(.mv-sheet) { align-items: center; justify-content: center; padding: 24px; }
  .pick-ov.in:has(.mv-sheet) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .pick-ov .mv-sheet { border-radius: 22px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; box-shadow: 0 20px 60px rgba(0, 0, 0, .18); }
  .pick-ov.in .mv-sheet { transform: none; opacity: 1; }
  .pick-ov .mv-sheet .pick-grab { display: none; }
}
/* Correo de seguimiento */
.fu-btn svg { width: 19px; height: 19px; }
.fu-task { margin: 0 4px 4px; font-weight: 700; font-size: 16px; color: var(--text); }
.fu-ms .mv-msi.fu-sub { margin-left: 26px; }
.fu-ms .mv-msi.fu-done span { color: #24893D; }
.fu-n { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 2px; }
.fu-ctx { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--fill); margin-bottom: 10px; }
.fu-ctx > b { font-size: 15px; }
.fu-topics { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.fu-topics li.done { color: #24893D; }
.fu-topics b { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Trasladar hitos en escritorio: dos pasos, cada lista con todo el alto */
.mv-step { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mv-step[data-mvstep="2"] { flex: 1 1 auto; }
.mv-foot [hidden] { display: none; }
@media (min-width: 701px) {
  .mv-sheet[data-step] { height: min(760px, 88dvh); }
  .mv-sheet[data-step="1"] .mv-step[data-mvstep="2"], .mv-sheet[data-step="2"] .mv-step[data-mvstep="1"] { display: none; }
  .mv-sheet[data-step] .mv-step { flex: 1 1 auto; }
  .mv-sheet[data-step="1"] .mv-ms { max-height: none; flex: 1 1 auto; align-content: start; }
}

/* Gantt con filtros: barra para quitarlos */
.g-fbar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px 16px 8px; padding: 8px 12px; border-radius: 12px; background: var(--focus-soft, #eef2fb); font-size: 13px; color: var(--text); }
.g-fclear { border: 0; background: #fff; color: var(--accent); font: inherit; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.g-fclear:hover { background: var(--accent); color: #fff; }
/* Estado activo en la barra de estados: con ✕ para quitarlo */
#fShow button.on::after { content: '✕'; margin-left: 6px; font-size: .85em; opacity: .7; }

/* ---------- Calendarios por tipo (promociones, shootings, eventos, pauta) ---------- */
.cal-menu { position: fixed; z-index: 70; min-width: 290px; padding: 6px; }
.cal-menu-h { margin: 4px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cal-opt { display: flex; align-items: center; gap: 12px; text-align: left; }
.cal-opt .cal-ic { font-size: 20px; width: 26px; text-align: center; }
.cal-opt b { display: block; font-size: 15px; }
.cal-opt small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.cal-opt.on { background: var(--fill); }
.cal-list .cal-opt { padding: 12px; border-radius: 14px; border: 0; background: none; font: inherit; color: var(--text); width: 100%; }
.cal-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 16px 8px; }
.cal-tabs button { border: 0; background: var(--fill); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.cal-tabs button.on { background: var(--accent); color: #fff; }
.k-legend { align-items: center; }
.k-new { border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.lg-bar.k-aw, .k-bar.k-aw { background: #c9d8ff; }
.lg-bar.k-sale, .k-bar.k-sale { background: #3b6fe0; color: #fff; }
.lg-bar.k-stay, .k-bar.k-stay { background: #8fd3b0; }
.lg-bar.k-range, .k-bar.k-range { background: #e4e4ea; }
.lg-bar.k-shoot, .k-bar.k-shoot { background: #e0663b; color: #fff; }
.lg-bar.k-event, .k-bar.k-event { background: #8e5be0; color: #fff; }
.lg-bar.k-ads, .k-bar.k-ads { background: #24893D; color: #fff; }
.lg-today { display: inline-block; width: 2px; height: 12px; background: var(--red, #ff3b30); margin-right: 4px; vertical-align: -2px; }
.k-empty { padding: 28px 16px; text-align: center; }
.k-scroll { position: relative; overflow: auto; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--line); }
.k-head, .k-row { display: flex; min-width: max-content; }
.k-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
.k-lbl { position: sticky; left: 0; z-index: 2; flex: 0 0 var(--kgl); width: var(--kgl); background: #fff; border-right: 1px solid var(--line); padding: 8px 12px; display: grid; gap: 2px; align-content: center; min-width: 0; }
.k-corner { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.k-title { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-title:hover { color: var(--accent); }
.k-lbl small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-track { position: relative; flex: 0 0 auto; }
.k-days { height: 44px; }
.k-month { position: absolute; top: 4px; font-size: 12px; font-weight: 700; color: var(--text); padding-left: 4px; border-left: 1px solid var(--line); text-transform: capitalize; white-space: nowrap; }
.k-day { position: absolute; top: 24px; font-size: 11px; color: var(--muted); text-align: center; }
.k-day.wk { color: #b8b8c0; }
.k-day.today { color: #fff; background: var(--red, #ff3b30); border-radius: 6px; font-weight: 700; }
.k-row { border-bottom: 1px solid var(--line); min-height: 58px; }
.k-row .k-track { min-height: 58px; }
.k-body { position: relative; }
.k-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red, #ff3b30); opacity: .5; z-index: 1; pointer-events: none; }
.k-bar { position: absolute; height: 20px; top: 12px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 700; line-height: 20px; padding: 0 6px; white-space: nowrap; cursor: default; }
.k-bar span { overflow: hidden; text-overflow: ellipsis; display: block; }
.k-bar.lane1 { top: 36px; height: 12px; line-height: 12px; font-size: 9px; }
.k-bar.k-range { height: 28px; top: 8px; color: var(--muted); }
.k-bar.k-range span { visibility: hidden; }
.k-mark { top: 12px; transform: translateX(-50%); }
/* Tipo y ligas en la tarjeta y el brief */
.kind-tag, .lk-count { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--text); white-space: nowrap; }
.kind-tag.k-promo { background: #e5edff; color: #2c55b8; }
.kind-tag.k-shoot { background: #fde9e1; color: #b44a22; }
.kind-tag.k-event { background: #efe6fc; color: #6a3dbd; }
.kind-tag.k-ads { background: #E9F8EB; color: #24893D; }
.lk-box { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-chip { display: inline-flex; align-items: center; border-radius: 999px; background: var(--fill); overflow: hidden; }
.lk-chip.k-promo { background: #e5edff; } .lk-chip.k-shoot { background: #fde9e1; } .lk-chip.k-event { background: #efe6fc; } .lk-chip.k-ads { background: #E9F8EB; }
.lk-open { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); padding: 5px 4px 5px 10px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-x { border: 0; background: none; color: var(--muted); padding: 5px 9px 5px 4px; cursor: pointer; font-size: 11px; }
.lk-x:hover { color: var(--red, #ff3b30); }
.lk-add { border: 1px dashed var(--line); background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.lk-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.lk-kinds button { border: 0; background: var(--fill); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; color: var(--text); }
.lk-kinds button.on { background: var(--accent); color: #fff; }
.lk-sheet .mv-list { min-height: 200px; align-content: start; }

.k-track { z-index: 0; }
.k-lbl { z-index: 4; }
@media (max-width: 700px) {
  .cal-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 6px 0 8px; padding: 0 12px; scrollbar-width: none; }
  .cal-tabs::-webkit-scrollbar { display: none; }
  .cal-tabs button { flex: 0 0 auto; }
  .k-lbl { padding: 6px 8px; }
  .k-title { font-size: 13px; }
}

/* Hitos: duplicar y nota plegable */
.ms-btn.ms-dupbtn svg, .ms-btn.ms-notebtn svg { width: 16px; height: 16px; }
.ms-btn.ms-dupbtn, .ms-btn.ms-notebtn, .ms-btn.ms-delbtn { color: #a0a4ad; }
.ms-btn.ms-delbtn svg { width: 16px; height: 16px; }
.ms-btn.ms-delbtn:hover { color: var(--red, #ff3b30); }
.ms-btn.ms-dupbtn:hover, .ms-btn.ms-notebtn:hover { color: var(--accent); }
.ms-btn.ms-notebtn.has { color: var(--accent); position: relative; }
.ms-notebtn .nb { position: absolute; top: -2px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #f5a623; color: #fff; font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; }
.ms-btn.ms-notebtn.on { color: var(--accent); background: var(--fill); }
.ms-note { display: grid; gap: 10px; padding: 8px 4px 6px 34px; }
.ms-note-item { position: relative; padding: 6px 30px 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.ms-note-txt { cursor: text; overflow-wrap: anywhere; }
.ms-note-txt p { margin: 0; }
.ms-note-txt ul { margin: 2px 0; padding-left: 18px; }
.ms-note-txt li { margin: 1px 0; }
.note-tag { border: 0; background: var(--focus-soft, #eef2fb); color: var(--accent); font: inherit; font-weight: 700; padding: 0 5px; border-radius: 6px; cursor: pointer; }
.note-tag:hover { background: var(--accent); color: #fff; }
.ms-note-item small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.ms-note-rm { position: absolute; top: 4px; right: 4px; border: 0; background: none; color: #b9b2a0; font-size: 11px; padding: 4px 6px; cursor: pointer; }
.ms-note-rm:hover { color: var(--red, #ff3b30); }
.ms-note-new { display: flex; align-items: flex-end; gap: 8px; }
.ms-note-new textarea { flex: 1; min-width: 0; min-height: 0; height: 34px; resize: none; overflow: hidden; font-size: 13px; line-height: 1.4; padding: 7px 10px; border-radius: 10px; background: #fffbea; border: 1px solid #f3e3a1; }
.ms-note-ok { flex: 0 0 auto; width: 32px; height: 32px; margin-bottom: 2px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #9a9fa8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ms-note-ok svg { width: 18px; height: 18px; }
.ms-note-ok:hover { color: #24893D; border-color: #bfe6c9; }

/* Celular: el tablero se desliza con el dedo para cambiar de estado */
@media (max-width: 700px) { #board { touch-action: pan-y; } }

/* Menú de celular: hoja desde abajo, con renglones como los de filtros */
.nav-sheet .pick-list { gap: 8px; }
.nav-row .nav-lbl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-row .nav-lbl svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.nav-row.on { border-color: var(--accent); font-weight: 700; }

/* Archivo: buscador y filtros de año / trimestre */
.arc-tools { display: grid; gap: 8px; margin: 4px 0 10px; padding: 0 20px; }
@media (min-width: 701px) { .arc-tools { grid-template-columns: minmax(240px, 420px) auto auto; align-items: center; justify-content: start; gap: 12px; } }
.arc-q { width: 100%; }
.arc-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.arc-chips::-webkit-scrollbar { display: none; }
.arc-chips button { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.arc-chips button em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 2px; }
.arc-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.arc-chips button.on em { color: rgba(255, 255, 255, .75); }
.arc-board.arc-one { grid-template-columns: minmax(0, 1fr) !important; max-width: 720px; }

.arc-pickbtn { display: none; }
@media (max-width: 700px) {
  .arc-tools { padding: 0 16px; margin: 0 0 10px; }
  .arc-q, .arc-tools > [data-arcyears], .arc-tools > [data-arcqs] { display: none; }
  .arc-pickbtn { display: flex; align-items: center; gap: 8px; width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; }
  .arc-pickbtn span { flex: 1; text-align: left; }
  .arc-pickbtn em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--muted); }
  .arc-pickbtn svg { width: 18px; height: 18px; color: var(--muted); }
}
.arc-chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0 2px 14px; }
.arc-sheet .btn.wide { width: 100%; margin-top: 4px; }
/* Las secciones (Revisión, Historial, Brief) cerradas ocupan solo un renglón: no se estiran para llenar la hoja */
.sheet-body, #taskForm { align-content: start; }

/* Celular: el texto del hito usa todo el ancho; fecha e íconos bajan a un segundo renglón a la derecha */
@media (max-width: 700px) {
  .ms-row { flex-wrap: wrap; justify-content: flex-end; column-gap: 6px; row-gap: 2px; }
  .ms-row > .ms-check, .ms-row > .ms-text { flex: 1 1 calc(100% - 48px); }
  .ms-row > .ms-gname { flex: 1 1 calc(100% - 76px); }
  .ms-row > .ms-grip, .ms-row > .ms-num, .ms-row > .ms-tog { align-self: flex-start; margin-top: 2px; }
  .ms-check { align-items: flex-start; gap: 8px; }
  .ms-check input { margin-top: 1px; }
  .ms-num { min-width: 14px; font-size: 12px; }
  .ms-row > .ms-btn { width: 32px; height: 30px; }
  .ms-row > .ms-due { margin-right: auto; margin-left: 48px; }
}

/* Búsqueda con un solo estado a la vista: resultados en otras columnas */
.elsewhere { margin: 6px 2px 12px; padding: 12px 14px; border-radius: 14px; background: var(--focus-soft, #eef2fb); font-size: 14px; }
.elsewhere p { margin: 0 0 8px; color: var(--text); }
.elsewhere-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.elsewhere-btns button { border: 1.5px solid var(--line); background: #fff; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.elsewhere-btns button em { font-style: normal; color: var(--accent); font-weight: 800; margin-left: 2px; }

.ms-addok { transition: background .18s ease, color .18s ease; }
.ms-addok.ready { background: var(--accent); color: #fff; }

@media (max-width: 700px) { .ms-note { padding-left: 4px; } }
.note-toggle { margin-top: 2px; }

/* ---------- Notificaciones ---------- */
.bell-btn { position: relative; }
.bell-btn.has svg { color: var(--accent); }
.bell-badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red, #ff3b30); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.nt-ov { position: fixed; inset: 0; z-index: 85; background: rgba(20, 24, 36, 0); transition: background .28s ease; }
.nt-ov.in { background: rgba(20, 24, 36, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nt-sheet { position: absolute; bottom: 0; left: 0; right: 0; max-height: 85dvh; display: flex; flex-direction: column; background: #fff; border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .12); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nt-ov.in .nt-sheet { transform: none; }
.nt-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
.nt-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nt-list { overflow-y: auto; display: grid; gap: 14px; padding-bottom: 6px; overscroll-behavior: contain; }
.nt-group h4 { margin: 0 4px 6px; font-size: 13px; font-weight: 800; color: var(--text); }
.nt-group h4 span { color: var(--muted); font-weight: 600; }
.nt-group.late h4 { color: #d70015; }
.nt-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 11px 12px; margin-bottom: 6px; font: inherit; color: var(--text); cursor: pointer; }
.nt-item.new { border-color: #c9d6f2; background: #f6f9ff; }
.nt-item:active { background: var(--fill); }
.nt-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.nt-dot.late { background: #ff3b30; } .nt-dot.soon { background: #ff9500; } .nt-dot.next { background: #3b82f6; }
.nt-txt { display: grid; gap: 2px; min-width: 0; }
.nt-main { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.nt-kind { color: var(--muted); }
.nt-sub { font-size: 12.5px; color: var(--muted); }
.nt-empty { display: flex; align-items: center; gap: 12px; padding: 16px 6px 20px; }
.nt-empty span { font-size: 30px; }
.nt-empty p { margin: 0; font-size: 14px; color: var(--muted); }
.nt-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 2px auto 8px; flex-shrink: 0; }
@media (min-width: 701px) {
  .nt-ov.in { background: rgba(20, 24, 36, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nt-sheet { left: auto; right: 16px; top: 64px; bottom: auto; width: 420px; padding-bottom: 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, .16); max-height: 70vh; border-radius: 20px; padding-top: 12px; transform: translateY(-12px); opacity: 0; transition: transform .22s ease, opacity .18s ease; }
  .nt-ov.in .nt-sheet { transform: none; opacity: 1; }
  .nt-grab { display: none; }
}

/* Botón +: menú principal y, al tocar Proyecto, los tipos de proyecto */
.fab-main, .fab-kinds { display: grid; gap: 12px; justify-items: end; }
.fab-main[hidden], .fab-kinds[hidden] { display: none; }
.fab-kinds { animation: fabIn .18s ease both; }
.fab-opt i.fab-emo { font-style: normal; font-size: 24px; background: #fff; }
.fab-back { border: 0; background: #fff; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.14); cursor: pointer; }

/* Encabezado de cada columna (nombre y número) al centro */
.board .col-head { justify-content: center; }
/* Escritorio: lista/mosaico en un solo botón (se ve el de la vista actual; al tocarlo cambia) */
@media (min-width: 701px) {
  .view-toggle { background: none; box-shadow: none; padding: 0; }
  .view-toggle button:not(.on) { display: none; }
  .view-toggle button.on { width: 40px; height: 36px; border-radius: 10px; background: var(--fill); color: var(--accent); box-shadow: none; }
}
/* Archivo: con un solo trimestre, la columna va al centro */
.arc-board.arc-one { margin-left: auto; margin-right: auto; }
/* Buscador: la ✕ para borrar más grande y con manita */
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-left: 6px; cursor: pointer; border-radius: 50%;
  background: var(--fill-2, #e3e5ea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%2313203c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
input[type=search]::-webkit-search-cancel-button:hover { background-color: #d4d8e0; }

/* ---------- Minor Bot ---------- */
.bot-btn {
  position: fixed; z-index: 10; right: 16px; bottom: calc(20px + 76px + 14px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--accent); display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(19, 32, 60, .22), 0 0 0 1px rgba(19, 32, 60, .06);
  animation: fabIn .2s ease both;
}
.bot-btn svg { width: 27px; height: 27px; }
.bot-btn:active { transform: scale(.94); }
@media (min-width: 700px) {
  .bot-btn { right: 32px; bottom: calc(32px + 84px + 16px); width: 58px; height: 58px; }
  .bot-btn:hover { transform: scale(1.05); }
}
body.fab-on .bot-btn, body.bot-on .bot-btn, body.bot-on .fab, body.bot-on .to-top { display: none; }

.bot-panel {
  position: fixed; z-index: 18; top: 0; right: 0; bottom: 0; width: 100%;
  background: #fff; display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(19, 32, 60, .16);
  animation: botIn .26s cubic-bezier(.2, .8, .2, 1) both;
}
.bot-panel[hidden] { display: none; }
@media (min-width: 701px) { .bot-panel { width: 420px; border-left: 1px solid var(--line); } }
@keyframes botIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bot-panel.drop::after { content: 'Suelta aquí tus archivos'; position: absolute; inset: 10px; border: 2px dashed var(--focus); border-radius: 18px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; font-weight: 600; color: var(--accent); }

.bot-head { display: flex; align-items: center; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 10px 10px 16px; border-bottom: 1px solid var(--line); }
.bot-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 17px; }
.bot-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bot-ava svg { width: 19px; height: 19px; }
.bot-ava.big { width: 56px; height: 56px; margin: 0 auto 10px; }
.bot-ava.big svg { width: 32px; height: 32px; }
.bot-model { display: flex; background: var(--fill); border-radius: 9px; padding: 2px; margin-right: 4px; }
.bot-model button { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.bot-model button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.bot-head .icon-btn svg { width: 21px; height: 21px; }

.bot-msgs { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.bot-hello { margin: auto 6px; text-align: center; color: var(--muted); }
.bot-hello h3 { color: var(--text); margin: 0 0 6px; font-size: 19px; }
.bot-hello p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; }
.bot-sugs { display: flex; flex-direction: column; gap: 8px; }
.bot-sugs button { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 14px; text-align: left; color: var(--text); cursor: pointer; }
.bot-sugs button:hover { background: var(--fill); }

.bm { display: flex; flex-direction: column; max-width: 92%; }
.bm-user { align-self: flex-end; align-items: flex-end; }
.bm-bot { align-self: flex-start; }
.bm-bub { border-radius: 18px; padding: 9px 13px; font-size: 15px; line-height: 1.42; word-wrap: break-word; overflow-wrap: anywhere; }
.bm-user .bm-bub { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.bm-bot .bm-bub { background: var(--fill); color: var(--text); border-bottom-left-radius: 6px; }
.bm-err .bm-bub { background: var(--red-soft); color: #b3261e; }
.bm-bub p { margin: 0 0 6px; } .bm-bub p:last-child { margin: 0; }
.bm-bub ul { margin: 2px 0 6px; padding-left: 18px; } .bm-bub li { margin: 2px 0; }
.bm-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bm-files span { font-size: 12px; background: rgba(255, 255, 255, .18); border-radius: 8px; padding: 2px 7px; }
.bm-typing { display: flex; gap: 4px; padding: 13px 15px; }
.bm-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: botDot 1.1s infinite ease-in-out; }
.bm-typing i:nth-child(2) { animation-delay: .15s; } .bm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes botDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.bm-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.bm-btn { border: 1px solid var(--line); background: #fff; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.bm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.bm-btn:disabled { opacity: .5; }
.bm-note { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.bm-mail { margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; font-size: 14px; }
.bm-mrow { display: flex; gap: 8px; padding: 2px 0; } .bm-mrow span { color: var(--muted); width: 52px; flex-shrink: 0; } .bm-mrow b { font-weight: 600; overflow-wrap: anywhere; }
.bm-mbody { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; line-height: 1.45; max-height: 320px; overflow-y: auto; }
.bm-mail .bm-acts { margin-top: 10px; }

.bot-hist { position: absolute; z-index: 2; left: 0; right: 0; top: calc(57px + env(safe-area-inset-top)); bottom: 0; background: #fff; overflow-y: auto; padding: 8px 10px; }
.bot-hist[hidden] { display: none; }
.bot-hist-search { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: var(--fill); color: var(--muted); }
.bot-hist-search input[type="search"] { flex: 1; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto; border-radius: 0; background: none !important; outline: none; font: inherit; font-size: 14px; color: var(--ink, inherit); min-width: 0; }
.bot-hist-open em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-hist-head { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px 8px; }
.bot-hist-row { display: flex; align-items: center; border-radius: 12px; }
.bot-hist-row.on, .bot-hist-row:hover { background: var(--fill); }
.bot-hist-open { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; font: inherit; padding: 10px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.bot-hist-open b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-hist-open span { font-size: 12.5px; color: var(--muted); }
.bot-hist-del { border: 0; background: transparent; color: var(--muted); font-size: 15px; width: 36px; height: 36px; cursor: pointer; border-radius: 50%; }
.bot-hist-del:hover { color: var(--red); }
.bot-hist-empty { color: var(--muted); padding: 20px 8px; text-align: center; }

.bot-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.bot-atts:not(:empty) { padding-top: 8px; }
.bot-att { display: inline-flex; align-items: center; gap: 4px; background: var(--fill); border-radius: 10px; padding: 4px 4px 4px 9px; font-size: 13px; max-width: 100%; }
.bot-att.loading { opacity: .55; }
.bot-att button { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: 50%; }

.bot-comp { display: flex; align-items: flex-end; gap: 6px; margin: 8px 10px calc(10px + env(safe-area-inset-bottom)); padding: 6px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.bot-comp textarea { flex: 1; min-width: 0; min-height: 0; height: 38px; border: 0; border-radius: 0; width: auto; resize: none; font: inherit; font-size: 16px; line-height: 1.35; padding: 8px 4px; max-height: 50dvh; background: transparent; }
.bot-comp textarea:focus { box-shadow: none !important; background: transparent !important; }
.bot-ico, .bot-send { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.bot-ico { background: transparent; color: var(--muted); }
.bot-ico:hover { background: var(--fill); color: var(--accent); }
.bot-ico svg, .bot-send svg { width: 21px; height: 21px; }
.bot-send { background: var(--accent); color: #fff; }
.bot-send:disabled { opacity: .4; cursor: default; }
.bot-comp:has(.recwave) textarea, .bot-comp:has(.recwave) #botAttach, .bot-comp:has(.recwave) .bot-send { display: none; }
.bot-comp .recwave { flex: 1; min-width: 0; box-shadow: none; padding: 4px 6px; gap: 8px; }
.bot-comp .recwave .bars { height: 30px; }
#botMic.recording, #botMic.busy { width: auto; padding: 0 12px; border-radius: 19px; background: var(--red); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#botMic.busy { background: var(--fill); color: var(--muted); }
#botMic .ico { width: 14px; height: 14px; }
.bot-hist-acts { display: flex; align-items: center; gap: 2px; padding-right: 4px; flex-shrink: 0; }
.bot-hist-acts button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.bot-hist-acts button svg { width: 19px; height: 19px; }
.bot-hist-acts button:hover { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.bot-hist-acts button.del:hover { color: var(--red); }
.bot-pick-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 10px; }
.bot-pick-head b { font-size: 16px; }
.bot-pick-back { align-self: flex-start; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; padding: 2px 0; cursor: pointer; }
.bot-pick-q { width: 100%; margin-bottom: 8px; }
.bot-pick-list { display: flex; flex-direction: column; }
.bot-pick-row { border: 0; background: transparent; text-align: left; font: inherit; padding: 10px 8px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.bot-pick-row:hover { background: var(--fill); }
.bot-pick-row b { font-weight: 600; font-size: 14.5px; }
.bot-pick-row span { font-size: 12.5px; color: var(--muted); }
.bm-auto .bm-bub { background: var(--fill-2); color: var(--muted); font-size: 13.5px; }
.bm-model { font-size: 11px; color: #aeaeb2; margin: 4px 0 0 6px; }
/* Bitácora de cada tarea / pendiente: leyenda chiquita bajo el renglón. */
.ms-stamp { font-size: 10.5px; line-height: 1.2; color: #aeaeb2; margin: -2px 0 3px 30px; letter-spacing: 0; }
.ms-subs .ms-stamp { margin-left: 30px; }
/* Proyectos y tareas que nombra el bot: links azules que llevan a la tarjeta. */
.bm-link { color: #2f80ed; font-weight: 600; text-decoration: none; cursor: pointer; }
.bm-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Detalle: el nombre del proyecto es el título de la hoja (editable), junto a correo, ⋯ y ✕. */
.sheet-detail #sheetTitle { flex: 1; min-width: 0; display: flex; }
.sheet-detail #sheetTitle .title-edit { align-items: center; }
.sheet-detail #sheetTitle .card-title { font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sheet-detail .sheet-head { align-items: flex-start; }
.sheet-detail .head-actions { flex-shrink: 0; }
@media (max-width: 700px) {
  .sheet.sheet-detail { height: calc(100dvh - env(safe-area-inset-top) - 6px); max-height: none; }
  .sheet-detail #sheetTitle .card-title { font-size: 18px; }
}
/* Arrastre de tareas y pendientes (fluido, tipo Trello) */
.ms-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; transform-origin: 30% 50%; will-change: transform; }
.ms-ghost > .ms { box-shadow: 0 2px 6px rgba(19, 32, 60, .1); transition: box-shadow .18s ease, transform .18s ease; }
.ms-ghost.lift > .ms { box-shadow: 0 14px 34px rgba(19, 32, 60, .22), 0 2px 6px rgba(19, 32, 60, .08); transform: scale(1.025); }
.ms-ghost.drop { transition: transform .19s cubic-bezier(.2, .8, .2, 1); }
.ms-ghost.drop > .ms { box-shadow: 0 2px 6px rgba(19, 32, 60, .08); transform: none; }
.ms.ms-ph { background: rgba(19, 32, 60, .05) !important; border: 1.5px dashed rgba(19, 32, 60, .2) !important; box-shadow: none !important; overflow: hidden; transition: margin .18s ease; }
.ms.ms-ph > * { visibility: hidden; }
.ms.ms-ph.ms-ph-sub { margin-left: 24px; }
.ms-sorting, .ms-sorting * { user-select: none; -webkit-user-select: none; }
body:has(.ms-ghost), body:has(.ms-ghost) * { cursor: grabbing !important; }
.ms.ms-nest-target { transition: box-shadow .15s, border-color .15s; }
.ms.ms-nest-target::after { content: 'Soltar como pendiente'; }
/* Revisión abierta: sin título (solo la flechita para plegar) y la barra de avance sube. */
.acc[data-acc="rev"].open > .acc-head { font-size: 0; gap: 0; padding: 8px 12px 0; min-height: 22px; }
.acc[data-acc="rev"].open > .acc-head > :not(.chev) { display: none; }
/* Perilla del avance un poco más chica */
input.slider:not(.mini)::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -5px; }
input.slider:not(.mini)::-moz-range-thumb { width: 22px; height: 22px; }
/* Fecha de entrega en la barra del proyecto abierto (a la izquierda de correo, ⋯ y ✕) */
.full-bar .full-due { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 14px; height: 40px; font: inherit; font-size: 14.5px; color: var(--muted); cursor: pointer; min-width: 0; }
.full-bar .full-due:hover { border-color: var(--accent); }
.full-bar .full-due svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.full-bar .full-due b { color: var(--text); font-weight: 600; white-space: nowrap; }
/* Fecha de entrega en la barra: un poco más chica */
.full-bar .full-due { height: 32px; padding: 0 11px; gap: 6px; font-size: 13px; }
.full-bar .full-due svg { width: 14px; height: 14px; }
/* Minor Bot: escuchar y 👍 debajo de cada respuesta (gris sutil) */
.bm-tools { display: flex; align-items: center; gap: 4px; margin: 5px 0 0 2px; }
.bm-ic { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: #aeaeb2; display: grid; place-items: center; cursor: pointer; padding: 0; }
.bm-ic svg { width: 17px; height: 17px; }
.bm-ic:hover { background: var(--fill); color: var(--accent); }
.bm-ic.on { color: var(--accent); }
.bm-ic.on svg path { fill: rgba(19, 32, 60, .12); }
.bm-ic.load { animation: botPulse 1s ease-in-out infinite; color: var(--accent); }
.bm-ic.play { background: var(--accent); color: #fff; }
@keyframes botPulse { 50% { opacity: .35; } }
.bm-tools .bm-model { margin: 0 0 0 4px; }
.bm-tools.in { margin: 0 0 0 2px; }
.bm-ic { width: 32px; height: 32px; background: var(--fill); color: #8e8e93; }
a.bm-btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (min-width: 701px) { body.bot-on #app { padding-right: 420px; } }
/* Minor Bot: pendientes debajo de su proyecto, con palomita para marcarlos */
.bm-bub ul.bm-sub { margin: 2px 0 6px; padding-left: 18px; list-style: circle; }
.bm-bub li { display: list-item; }
.bm-bub li > span { vertical-align: middle; }
.bm-bub li.done > span { color: var(--muted); text-decoration: line-through; }
.bm-chk { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin: -2px 0 0 8px; border: 1.5px solid #c7c7cc; border-radius: 5px; background: #fff; cursor: pointer; padding: 0; }
.bm-chk:hover { border-color: var(--accent); }
.bm-chk.on { background: #24893D; border-color: #24893D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#botBtn { display: none !important; }
/* Sin el encabezado de cada columna (nombre + conteo) ni los separadores por semana, en celular y escritorio */
.board .col:not(.arc-col) > .col-head, .board .week-sep { display: none !important; }
/* Celular: el texto del selector de estado va pegado a la derecha, junto a la flechita */
@media (max-width: 700px) {
  .show-pick #showPickLabel { margin-left: auto; text-align: right; }
  .show-pick svg { margin-left: 6px; }
}

/* ---------- Conocimiento ---------- */
.kb-view { padding: 4px 0 140px; max-width: 980px; margin: 0 auto; }
.kb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 0 12px; }
.kb-head h2 { margin: 0 0 4px; font-size: 24px; }
.kb-head p { margin: 0; font-size: 14px; }
.kb-add { white-space: nowrap; flex-shrink: 0; }
.kb-view .kb-q { width: 100%; margin-bottom: 16px; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kb-card { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow); }
.kb-card:hover { border-color: var(--accent); }
.kb-card b { font-size: 17px; }
.kb-card-task { font-size: 13px; color: #2f80ed; }
.kb-card-last { font-size: 13px; color: var(--muted); margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-empty { text-align: center; padding: 40px 12px; }
.kb-space-head { margin-bottom: 14px; }
.kb-space-head h2 { margin: 6px 0 2px; font-size: 22px; }
.kb-task { color: #2f80ed; font-size: 14px; text-decoration: none; }
.kb-space-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kb-docs { display: grid; gap: 12px; }
.kb-doc { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff; box-shadow: var(--shadow); }
.kb-doc.flash { box-shadow: 0 0 0 3px rgba(47, 128, 237, .35); }
.kb-doc-top { display: flex; align-items: center; gap: 10px; }
.kb-kind { font-size: 12px; font-weight: 600; background: var(--fill); border-radius: 999px; padding: 3px 9px; }
.kb-del { margin-left: auto; color: var(--muted); }
.kb-doc h3 { margin: 8px 0 4px; font-size: 17px; }
.kb-doc p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.kb-sec { font-size: 14px; margin: 6px 0; }
.kb-sec b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kb-sec ul { margin: 4px 0 0; padding-left: 18px; }
.kb-sec li { margin: 2px 0; }
.kb-text { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--fill); border-radius: 12px; padding: 12px; max-height: 420px; overflow: auto; margin: 8px 0 0; }
.kb-view .link-btn { border: 0; background: none; color: #2f80ed; font: inherit; font-size: 13.5px; font-weight: 600; padding: 4px 0; cursor: pointer; }
@media (max-width: 700px) {
  .filter-row > #btnKb { display: none; }
  .kb-head { flex-direction: column; gap: 10px; }
  .kb-add { width: 100%; }
}
.kb-card-desc { font-size: 13.5px; color: var(--text); opacity: .75; line-height: 1.4; }
.kb-desc { margin: 2px 0 6px; color: var(--muted); font-size: 14.5px; }
.kb-new { display: grid; gap: 12px; width: min(440px, 100%); }
.kb-new .field { display: grid; gap: 6px; }
.kb-new .field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.kb-new textarea { min-height: 72px; }
.kb-pick { position: relative; }
.kb-sug { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(19, 32, 60, .12); max-height: 240px; overflow-y: auto; padding: 4px; margin-top: 4px; }
.kb-sug button { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); }
.kb-sug button:hover { background: var(--fill); }
.kb-sug button b { font-size: 14.5px; font-weight: 600; }
.kb-sug button span { font-size: 12px; color: var(--muted); }
.kb-sug p { margin: 8px 10px; }
.kb-chosen { display: flex; align-items: center; gap: 8px; background: var(--fill); border-radius: 12px; padding: 10px 12px; }
.kb-chosen[hidden] { display: none; }
.kb-chosen b { flex: 1; font-size: 14.5px; }
.kb-chosen button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
/* Selector con chips (varios proyectos / espacios) */
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chips:not(:empty) { margin-bottom: 6px; }
.cp-chip { display: inline-flex; align-items: center; background: #eaf2fd; border-radius: 16px; padding: 2px 4px 2px 10px; max-width: 100%; min-width: 0; box-sizing: border-box; }
.kb-spick, .kb-tpick, .kb-links, .cp-chips { min-width: 0; max-width: 100%; }
.cp-go { border: 0; background: none; color: #2f80ed; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 3px 0; min-width: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.cp-x { flex: none; border: 0; background: none; color: #8e8e93; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; }
.cp-x:hover { background: rgba(0, 0, 0, .06); }
.cp-q { width: 100%; }
.kb-links { margin: 8px 0 4px; display: grid; gap: 4px; }
.kb-box { margin-top: 8px; }
.kb-head-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kb-up { width: min(520px, 100%); }
.kb-drop { border: 2px dashed #c7c7cc; border-radius: 16px; padding: 22px 14px; text-align: center; display: grid; gap: 4px; cursor: pointer; background: #fafafc; transition: border-color .15s, background .15s; }
.kb-drop:hover, .kb-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.kb-drop b { font-size: 15px; }
.kb-drop span { font-size: 12.5px; color: var(--muted); }
.kb-files { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-files:empty { display: none; }
.kb-file { text-decoration: none; margin-right: 10px; }
@media (max-width: 700px) { .kb-head-acts { width: 100%; } .kb-head-acts .kb-add { flex: 1; } }
@media (min-width: 701px) { .kb-head-acts { flex-wrap: nowrap; flex-shrink: 0; } }
.kb-pen { margin-left: auto; color: var(--muted); }
.kb-del2 { color: var(--muted); }
.kb-edit { max-height: calc(100dvh - 48px); overflow-y: auto; }
.kb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-sep { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
/* Editar documento de Conocimiento: pantalla propia */
.kb-editpage h2 { margin: 6px 0 14px; font-size: 22px; }
.kb-ep-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kb-ep-acts { display: flex; gap: 8px; }
.kb-ep-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.kb-ep-main, .kb-ep-side { display: grid; gap: 14px; min-width: 0; }
.kb-ep-side { background: var(--fill); border-radius: 18px; padding: 16px; position: sticky; top: 16px; }
.kb-ep-side h3 { margin: 0; font-size: 16px; }
.kb-ep-side p { margin: -8px 0 0; }
.kb-ep-side .kb-drop { background: #fff; }
.kb-editpage .field { display: grid; gap: 6px; }
.kb-editpage .field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.kb-editpage .field em { font-style: normal; font-weight: 400; }
.kb-editpage textarea { min-height: 0; }
.kb-more { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 12px; }
.kb-more summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.kb-more[open] summary { margin-bottom: 10px; }
.kb-more .field + .field { margin-top: 12px; }
@media (max-width: 800px) { .kb-ep-grid { grid-template-columns: 1fr; } .kb-ep-side { position: static; } }
/* Archivos que forman un documento de Conocimiento */
.kb-srcs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.kb-src { position: relative; }
.kb-src.busy { opacity: .45; pointer-events: none; }
.kb-src-in { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; padding: 12px 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.kb-src-in:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.kb-src-ic { width: 40px; height: 48px; border-radius: 6px 12px 6px 6px; background: var(--c); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; display: grid; place-items: end center; padding-bottom: 7px; }
.kb-src-name { font-size: 12px; line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.kb-src-at { font-size: 11px; color: var(--muted); }
.kb-src-del { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); opacity: 0; transition: opacity .15s; }
.kb-src-del svg { width: 14px; height: 14px; }
.kb-src:hover .kb-src-del, .kb-src-del:focus { opacity: 1; }
.kb-src-del:hover { color: var(--red); border-color: var(--red); }
@media (hover: none) { .kb-src-del { opacity: 1; } }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.kb-tag { border: 0; background: #eaf2fd; color: #2f80ed; font: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.kb-tag:hover { background: #d8e8fc; }
/* Documentos de Conocimiento en acordeón (uno abierto a la vez) */
.kb-doc-head { cursor: pointer; }
.kb-doc-head h3 { margin-bottom: 0; }
.kb-doc.open .kb-doc-head h3 { margin-bottom: 4px; }
.kb-chev { width: 30px; height: 30px; display: grid; place-items: center; }
.kb-chev .chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.kb-doc.open .kb-chev .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.kb-peek { margin: 4px 0 0 !important; color: var(--muted); font-size: 13.5px !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kb-doc:not(.open) { padding-bottom: 12px; }
.kb-doc:not(.open):hover { border-color: #c7d3e6; }
/* Brief: el lápiz vive en el encabezado de la sección (junto a la flechita), sin dejar un renglón vacío */
.acc[data-acc="brief"] { position: relative; }
.acc[data-acc="brief"] .brief-head { position: absolute; top: 8px; right: 42px; margin: 0; z-index: 1; }
.acc[data-acc="brief"] .brief-head > span:empty { display: none; }
.acc[data-acc="brief"]:not(.open) .brief-head { display: none; }
/* Archivos del proyecto (sección propia) */
.acc[data-acc="files"] .acc-inner { gap: 14px; }
/* Respuestas en varias nubes: el resultado va aparte, con copiar y escuchar */
.bm-bot { gap: 6px; }
.bm-bot .bm-bub.bm-res { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(19, 32, 60, .06); border-bottom-left-radius: 18px; }
.bm-bub p + p { margin-top: 2px; }
.bm-res-tools { margin-top: -2px; }
/* Móvil: los botones de escuchar/copiar quedan a la derecha, cerca del pulgar. */
@media (max-width: 700px) {
  .bm-bot { width: 92%; align-items: flex-start; }
  .bm-bot > .bm-mail, .bm-bot > .bm-acts, .bm-bot > .bm-tools { align-self: stretch; }
  .bm-bot .bm-tools [data-botspeak] { order: 9; margin-left: auto; }
  .bm-bot .bm-res-tools { justify-content: flex-end; }
  .bm-bot .bm-res-tools [data-botspeak] { margin-left: 0; }
  .bm-bot .bm-tools.in { margin-left: auto; }
  .bm-bot .bm-tools.in [data-botspeak] { margin-left: 0; }
}
/* WhatsApp en el chat del bot */
.bm-wa .bm-mrow b em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }
.bm-wabody { white-space: normal; outline: none; border-radius: 8px; cursor: text; padding: 8px 6px 4px; }
.bm-wabody:focus { background: #f6f8fb; box-shadow: 0 0 0 2px rgba(37, 211, 102, .25); }
.bm-btn.bm-wa-send { background: #25d366; border-color: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bm-btn.bm-wa-send svg { width: 17px; height: 17px; }
.bm-btn.bm-wa-send:hover { background: #1ebe5b; }
/* Historial del bot: el título ocupa todo el renglón y los íconos van abajo a la derecha, junto a la fecha (sin encimarse). */
.bot-hist-row { position: relative; display: block; }
.bot-hist-open { width: 100%; overflow: hidden; padding: 10px 8px 14px; }
.bot-hist-open b { display: block; max-width: 100%; }
.bot-hist-open span { line-height: 22px; }
.bot-hist-acts { position: absolute; right: 4px; bottom: 6px; padding-right: 0; }
.bot-hist-acts button { width: 32px; height: 32px; }
/* Notificaciones: deslizar a la izquierda para borrar (celular); en compu, bote al pasar el mouse. */
.nt-sw { position: relative; margin-bottom: 6px; border-radius: 14px; overflow: hidden; transition: height .25s ease, margin .25s ease, opacity .2s ease; }
.nt-sw .nt-item { position: relative; z-index: 1; margin-bottom: 0; transition: transform .22s ease; touch-action: pan-y; }
.nt-del { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 100%; border: 0; border-radius: 14px; background: #ff3b30; color: #fff; display: flex; align-items: center; justify-content: flex-end; padding-right: 28px; cursor: pointer; }
.nt-del svg { width: 24px; height: 24px; transition: transform .15s ease; }
.nt-sw.far .nt-del svg { transform: scale(1.2); }
.nt-sw.gone { opacity: 0; margin-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .nt-del { width: 34px; height: 34px; top: 50%; right: 8px; bottom: auto; transform: translateY(-50%); z-index: 2; padding: 0; justify-content: center; border-radius: 50%; background: transparent; color: var(--muted); opacity: 0; }
  .nt-del svg { width: 18px; height: 18px; }
  .nt-sw:hover .nt-del { opacity: 1; }
  .nt-del:hover { color: #d70015; background: var(--fill); }
  .nt-sw .nt-item { padding-right: 44px; }
}
@media (hover: none), (pointer: coarse) { .nt-sw:not(.swiping):not(.open):not(.gone) .nt-del { visibility: hidden; } }
/* Tablas en las respuestas del bot */
.bm-table { overflow-x: auto; margin: 4px -4px; -webkit-overflow-scrolling: touch; }
.bm-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; line-height: 1.35; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bm-table th, .bm-table td { padding: 7px 8px; overflow-wrap: break-word; hyphens: auto; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.bm-table th { background: #f3f5f9; font-weight: 700; font-size: 12.5px; color: var(--text); }
.bm-table tr:last-child td { border-bottom: 0; }
.bm-table td + td, .bm-table th + th { border-left: 1px solid var(--line); }
.bm-table tr:nth-child(odd) td { background: #fbfcfe; }
.bm-bub:has(.bm-table) { width: 100%; }
/* Burbujas nuevas del bot: salen y crecen desde su esquina (las del bot una tras otra). */
@keyframes bmIn { from { opacity: 0; transform: translateY(10px) scale(.86); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.bm-in > * { animation: bmIn .42s cubic-bezier(.2, .9, .3, 1.15) both; transform-origin: 0 100%; }
.bm-user.bm-in > * { transform-origin: 100% 100%; animation-duration: .3s; }
.bm-in > *:nth-child(2) { animation-delay: .14s; }
.bm-in > *:nth-child(3) { animation-delay: .28s; }
.bm-in > *:nth-child(4) { animation-delay: .4s; }
.bm-in > *:nth-child(n+5) { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .bm-in > * { animation: none; } }
/* Archivos de una tarea o pendiente */
.ms-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px 30px; }
.ms-file { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; background: var(--fill); border-radius: 8px; font-size: 12.5px; }
.ms-file a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; color: var(--text); text-decoration: none; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-file a:hover { color: var(--accent); }
.ms-file i, .msf-item i { font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff; background: #8e8e93; border-radius: 4px; padding: 1px 4px; flex-shrink: 0; }
.ms-file button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 11px; }
.ms-file button:hover { color: var(--red, #d70015); }
.ms-clipbtn svg { width: 16px; height: 16px; }
.msf-dlg { max-width: 460px; }
.msf-for { margin: -4px 0 10px; }
.msf-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 26px 14px; border: 2px dashed var(--line); border-radius: 16px; cursor: pointer; transition: background .15s, border-color .15s; }
.msf-drop:hover, .msf-drop.over { border-color: var(--accent); background: #f4f7ff; }
.msf-drop b { font-size: 15px; }
.msf-drop span { font-size: 12.5px; color: var(--muted); }
.msf-ic { color: var(--accent); }
.msf-ic svg { width: 30px; height: 30px; }
.msf-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.msf-item { display: inline-flex; align-items: center; gap: 6px; background: var(--fill); border-radius: 8px; padding: 4px 4px 4px 6px; font-size: 13px; max-width: 100%; }
.msf-item.loading { opacity: .55; }
.msf-item button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 4px; }
/* Correo y WhatsApp desde una tarea o pendiente */
.ms-mailbtn svg, .ms-wabtn svg { width: 17px; height: 17px; }
.ms-wabtn:hover { color: #1ebe5b; }
.mw-text { width: 100%; min-height: 140px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.45; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mw-dlg .dialog-actions { flex-wrap: wrap; }
.mw-dlg .bm-wa-send { display: inline-flex; align-items: center; gap: 6px; }
.mw-dlg .bm-wa-send svg { width: 17px; height: 17px; }
.fu-ctx .fu-para { margin-top: 6px; display: block; }
.ms-btn.ms-mailbtn, .ms-btn.ms-wabtn, .ms-btn.ms-clipbtn, .ms-btn.ms-calbtn { color: #a0a4ad; }
.ms-btn.ms-mailbtn:hover, .ms-btn.ms-clipbtn:hover, .ms-btn.ms-calbtn:hover { color: var(--accent); }
.ms-calbtn svg { width: 17px; height: 17px; }
.ms-btn.ms-wabtn:hover { color: #1ebe5b; }
.mw-dlg .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mw-dlg .dialog-actions .bm-wa-send { grid-column: 1 / -1; order: -1; justify-content: center; padding: 11px; }
/* La "M" de Minor (la del favicon) como ícono de Minor Bot; toma el color del botón. */
.m-mark { display: block; width: 25px; height: 25px; background: currentColor;
  -webkit-mask: url(/m-mark.png?v=2) center / contain no-repeat; mask: url(/m-mark.png?v=2) center / contain no-repeat; }
.bot-btn .m-mark { width: 29px; height: 29px; }
.fab-opt i .m-mark { width: 28px; height: 28px; }
.bot-ava .m-mark { width: 19px; height: 19px; }
.bot-ava.big .m-mark { width: 32px; height: 32px; }
/* ---------- Reportes y TC ---------- */
.rp-view { padding: 4px 16px 140px; max-width: 980px; margin: 0 auto; }
.rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 0 14px; }
.rp-head h2 { margin: 0 0 4px; font-size: 24px; }
.rp-head p { margin: 0; font-size: 14px; max-width: 620px; }
.rp-head .btn { flex-shrink: 0; }
.rp-list { display: grid; gap: 10px; }
.rp-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(19, 32, 60, .05); }
.rp-thumb { width: 112px; height: 63px; flex-shrink: 0; border-radius: 8px; background: #13213c; color: #fff; display: flex; align-items: center; gap: 7px; padding: 0 9px; overflow: hidden; }
.rp-thumb .m-mark { width: 21px; height: 21px; flex-shrink: 0; }
.rp-thumb b { font-family: Impact, 'Arial Narrow', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .02em; line-height: 1.1; border-left: 1px solid rgba(255,255,255,.5); padding-left: 7px; }
.rp-info { flex: 1; min-width: 0; }
.rp-info h3 { margin: 3px 0 2px; font-size: 16px; }
.rp-info p { margin: 0; }
.rp-chip { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent); background: #eef2fa; border-radius: 6px; padding: 2px 7px; }
.rp-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rp-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.rp-acts .rp-ok:hover { color: #1f8a4c; }
.rp-acts .rp-ok.on { color: #1f8a4c; background: #e3f6ea; }
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 1px 0 3px; }
.rp-tags .rp-per, .rp-tags .rp-sent { margin-left: 0; vertical-align: 0; }
.rp-sent { display: inline-block; vertical-align: 2px; margin-left: 4px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #1f8a4c; background: #e3f6ea; border-radius: 6px; padding: 2px 7px; }
.rp-acts .rp-del:hover { color: var(--red, #d70015); }
.rp-empty { display: flex; align-items: center; gap: 14px; padding: 26px 8px; color: var(--muted); }
.rp-empty span { font-size: 34px; }
.rp-empty p { margin: 0; font-size: 14px; }
.rp-body { display: grid; gap: 12px; }
.rp-fdesc { margin: -6px 0 0; }
.rp-foot { margin-top: 6px; gap: 8px; }
.rp-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.rp-note { margin: 0; font-size: 13px; background: #f4f7ff; border-radius: 10px; padding: 8px 10px; }
.rp-title { margin: 0; font-size: 15px; }
.rp-sec { margin: 10px 0 0; font-size: 14px; color: var(--accent); }
.rp-sec small { font-weight: 400; }
.rp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rp-inp { display: flex; align-items: center; gap: 6px; }
.rp-inp input { flex: 1; min-width: 0; }
.rp-inp i { font-style: normal; font-size: 13px; color: var(--muted); }
.rp-calc b { display: block; font-size: 16px; padding: 8px 0 2px; }
.rp-calc small { display: block; font-size: 11.5px; line-height: 1.3; }
.rp-table { display: grid; gap: 6px; }
.rp-trow { display: grid; grid-template-columns: 1fr 120px 34px; gap: 8px; align-items: center; }
.rp-trow.rp-feed { grid-template-columns: 1fr 120px 110px 34px; }
@media (max-width: 700px) {
  .rp-head { flex-direction: column; align-items: stretch; }
  .rp-card { flex-wrap: wrap; }
  .rp-thumb { width: 84px; height: 48px; }
  .rp-acts { width: 100%; justify-content: flex-end; }
  .rp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-trow.rp-feed { grid-template-columns: 1fr 90px 90px 34px; }
}
/* Configuración (engrane del menú de íconos) */
.cfg-wrap { position: relative; display: inline-flex; }
.cfg-pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(19, 32, 60, .18); padding: 8px; }
.cfg-pop[hidden] { display: none; }
.cfg-h { margin: 2px 6px 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cfg-pop button { display: grid; gap: 2px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 9px 10px; font: inherit; cursor: pointer; color: var(--text); }
.cfg-pop button:hover { background: var(--fill); }
.cfg-pop button span { font-size: 12.5px; color: var(--muted); }
/* TC */
.fx-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fx-years .chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.fx-years .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fx-wrap { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; margin-bottom: 12px; }
.fx-table td { width: 38%; }
.fx-table input { width: 100%; }
.fx-table .fx-avg th, .fx-table .fx-avg td { font-weight: 700; background: #f6f8fb; font-variant-numeric: tabular-nums; }
.fx-table .fx-avg:first-of-type th { border-top: 2px solid var(--line); }
.fx-table .fx-bad th { color: #b45309; }
.fx-imp { max-width: 520px; }
.fx-imp .msf-drop { padding: 14px; }
.fx-prev { max-height: 260px; overflow: auto; }
.rp-body input[type=number] { width: 100%; min-width: 0; padding: 11px 12px; min-height: 44px; border: 0; border-radius: 12px; background-color: var(--fill); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; -moz-appearance: textfield; }
.rp-body input[type=number]::-webkit-inner-spin-button, .rp-body input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rp-body .field > span:first-child { font-size: 12.5px; color: var(--muted); }
.rp-body .field .rp-inp { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.rp-body input { color: var(--text); }
.fx-warn { margin: -4px 0 12px; font-size: 13.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 9px 12px; }
.rp-hpick { position: relative; }
.rp-hlist { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(19, 32, 60, .16); padding: 5px; }
.rp-hlist[hidden] { display: none; }
.rp-hopt { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer; }
.rp-hopt:hover, .rp-hopt.on { background: var(--fill); }
.rp-hlist p { margin: 8px 10px; }
/* Botón PowerPoint: gris, un poco más oscuro que los demás */
.btn.rp-dl { background: #dde1e8; color: #13213c; border-color: #dde1e8; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.btn.rp-dl:hover { background: #cfd4dd; }
/* Vista previa de la presentación */
.pv-ov { align-items: center; }
.pv-box { background: #eef0f4; width: min(1100px, 100%); max-height: 92dvh; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.pv-head b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pv-acts .pv-dl { border-radius: 50%; background: var(--fill); }
.pv-acts .pv-dl:hover { background: #13213c; color: #fff; }
.pv-slides { overflow-y: auto; padding: 16px; display: grid; gap: 16px; }
.pv-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 10px rgba(19,33,60,.14); background: #fff; }
.pv-n { position: absolute; z-index: 2; left: 8px; top: 6px; font-size: 11px; color: #9aa5b4; }
.pv-scale { width: 960px; height: 540px; transform-origin: 0 0; }
.pv-slide { position: relative; width: 960px; height: 540px; overflow: hidden; }
.pv-t { position: absolute; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; white-space: normal; }
.pv-chart { position: absolute; display: flex; align-items: center; }
.pv-leg { display: grid; gap: 4px; font-family: Arial, sans-serif; }
.pv-leg i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; }
.rp-acts .rp-link { display: inline-grid; place-items: center; color: inherit; text-decoration: none; }
.rp-per { font-size: 12.5px; font-weight: 700; color: var(--accent); background: #eef2fa; border-radius: 6px; padding: 2px 7px; vertical-align: 2px; margin-left: 4px; white-space: nowrap; }
.rp-req { color: #d70015; font-weight: 700; }
/* Calendario de meses del TC (inicio → fin) */
.rp-mpick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.rp-mpick button { border: 1px solid var(--line, #e3e7ee); background: var(--card, #fff); color: inherit; border-radius: 8px; padding: 7px 0; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rp-mpick button:hover { border-color: #93b3e6; }
.rp-mpick button.on { background: #e6edf9; border-color: #93b3e6; color: #13213c; }
.rp-mpick button.first, .rp-mpick button.last { background: #13213c; border-color: #13213c; color: #fff; }
/* Móvil: acciones del espacio orilladas a la derecha; Eliminar abajo de Preguntar a Minor Bot */
@media (max-width: 640px) {
  .kb-space-acts { flex-direction: column; align-items: flex-end; }
}
/* ---------- Reportes por plantillas (asistente de 4 pasos) ---------- */
.rp-steps { flex-shrink: 0; display: flex; gap: 6px; padding: 0 20px 10px; overflow-x: auto; scrollbar-width: none; }
.rp-step { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--fill); color: var(--muted); border-radius: 999px; padding: 6px 12px 6px 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rp-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 12px; }
.rp-step.on { background: var(--accent); color: #fff; }
.rp-step.on i { color: var(--accent); }
.rp-step.done { color: var(--accent); }
.rp-step.done i { background: #dfe7f5; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tp-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.tp-card b { font-size: 14px; }
.tp-card .btn { justify-self: start; }
.tp-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; background: #eaf2fd; color: var(--accent); border-radius: 999px; padding: 4px 6px 4px 4px; font-size: 13px; font-weight: 600; }
.tp-chip.lock { background: var(--fill); color: var(--muted); padding-right: 12px; }
.tp-chip i, .tp-tab i, .tp-n { font-style: normal; min-width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: #fff; font-size: 11.5px; color: var(--accent); }
.tp-chip button { border: 0; background: none; color: #8e8e93; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; }
.tp-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tp-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: 5px 12px 5px 5px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tp-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-tab.ok:not(.on) i { background: #dff3e7; color: #1e9e5a; }
.tp-tab.on i { color: var(--accent); }
.tp-ed { display: grid; gap: 12px; }
.tp-acts { justify-content: space-between; align-items: center; }
.tp-read { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.tp-read summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.tp-read[open] { display: grid; gap: 10px; }
.tp-span2 { grid-column: span 2; }
.rp-trow.tp-seg { grid-template-columns: 1fr 100px 120px 130px 34px; }
.tp-seghead { margin-bottom: -6px; }
.tp-seghead span { font-size: 12px; }
.tp-phhead { display: flex; gap: 12px; align-items: center; }
.tp-phhead p { margin: 0; }
.tp-phdrop { border: 2px dashed #c7c7cc; border-radius: 14px; padding: 16px; text-align: center; display: grid; gap: 2px; cursor: pointer; background: #fafafc; }
.tp-phdrop span { font-size: 12.5px; color: var(--muted); }
.tp-phdrop.over { border-color: var(--accent); background: #eef3fb; }
.tp-phdrop.full { cursor: default; opacity: .6; }
.tp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tp-photos:empty { display: none; }
.tp-ph { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--fill); }
.tp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-ph i { position: absolute; left: 6px; top: 6px; font-style: normal; font-size: 11px; font-weight: 700; background: rgba(19, 32, 60, .8); color: #fff; border-radius: 999px; padding: 1px 7px; }
.tp-ph button { position: absolute; top: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.tp-ph .tp-phx { right: 5px; }
.tp-ph .tp-phl { right: 33px; font-size: 15px; }
.tp-ph.loading { animation: tp-pulse 1s ease-in-out infinite alternate; }
@keyframes tp-pulse { from { opacity: .5; } to { opacity: 1; } }
.tp-order { display: grid; gap: 8px; }
.tp-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; background: #fff; touch-action: pan-y; user-select: none; cursor: grab; transition: box-shadow .15s; }
.tp-row.lock { background: var(--fill); cursor: default; }
.tp-row.drag { position: relative; z-index: 2; box-shadow: 0 10px 24px rgba(19, 32, 60, .18); cursor: grabbing; transition: none; }
.tp-row.over { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tp-grip { color: #aeaeb2; font-size: 14px; letter-spacing: -2px; cursor: grab; padding: 6px 2px; touch-action: none; }
.tp-rowtx { flex: 1; min-width: 0; display: grid; }
.tp-rowtx b { font-size: 14px; }
.tp-rowtx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-arrows { display: flex; gap: 4px; }
.tp-arrows .icon-btn:disabled { opacity: .3; }
/* Miniaturas de los diseños (16:9) */
.tp-mini { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.tp-mini.sm { width: 120px; flex: none; }
.tp-mini.xs { width: 72px; flex: none; border-radius: 6px; }
.mn { width: 100%; height: 100%; box-sizing: border-box; padding: 7%; display: grid; gap: 5%; }
.mn i, .mn em, .mn u { display: block; background: #dfe5ef; border-radius: 3px; }
.mn .tt { display: block; height: 9%; width: 55%; background: #13213c; border-radius: 2px; }
.mn-cover { background: #13213c; display: flex; align-items: center; gap: 8%; padding: 0 12%; }
.mn-cover span { width: 22%; height: 14%; background: #fff; opacity: .9; border-radius: 2px; }
.mn-cover b { width: 40%; height: 18%; background: #fff; border-radius: 2px; }
.mn-booked { grid-template-columns: 1fr 1.4fr 1.1fr; grid-template-rows: 9% 1fr 1fr 18%; }
.mn-booked .tt { grid-column: 1 / -1; }
.mn-booked i:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.mn-booked i:nth-of-type(2) { grid-column: 1; grid-row: 3; }
.mn-booked i.dn { grid-column: 2; grid-row: 2 / 4; background: radial-gradient(circle, #fff 30%, #4a78c2 31%, #4a78c2 48%, #dfe5ef 49%); }
.mn-booked i:nth-of-type(4) { grid-column: 3; grid-row: 2 / 4; }
.mn-booked em { grid-column: 1 / -1; }
.mn-tp { grid-template-columns: 1.15fr 1fr; gap: 8%; }
.mn-tp .l { display: grid; grid-template-rows: 9% 26% 1fr 5% 5%; gap: 5%; min-height: 0; }
.mn-tp .kp { display: flex; justify-content: space-around; align-items: center; }
.mn-tp .kp i { width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #dfe5ef, 0 3px 0 0 #1d3558; }
.mn-tp .br { display: flex; align-items: flex-end; gap: 5%; border-bottom: 1px solid #dfe5ef; }
.mn-tp .br u { flex: 1; border-radius: 2px 2px 0 0; background: #45c3ff; }
.mn-tp .br u:first-child { background: #00c9db; } .mn-tp .br u:last-child { background: #66a6fa; }
.mn-tp em { width: 85%; }
.mn-tp .r { display: grid; gap: 7%; padding-top: 10%; }
.mn-tp .r i { border: 1px dashed #13213c; background: #eef3fb; }
.tp-slots { display: grid; grid-template-columns: 1fr 1fr 0.6fr; gap: 10px; }
.tp-slot { position: relative; aspect-ratio: 7.19 / 3.95; border: 2px dashed #c7c7cc; border-radius: 12px; display: grid; place-content: center; text-align: center; gap: 2px; cursor: pointer; background: #fafafc; overflow: hidden; }
.tp-slot.logo { aspect-ratio: 2.57 / 1.11; align-self: start; }
.tp-slot span { font-size: 12px; color: var(--muted); }
.tp-slot.has { border-style: solid; border-color: var(--line); background: #fff; }
.tp-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-slot.logo img { object-fit: contain; padding: 6px; box-sizing: border-box; }
.tp-slot button { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 12px; }
.tp-slot.over { border-color: var(--accent); background: #eef3fb; }
.tp-slot.loading { animation: tp-pulse 1s ease-in-out infinite alternate; }
.tp-txtacts { gap: 8px; }
.mn-gal { grid-template-rows: 9% 1fr 10%; }
.mn-gal em { width: 70%; }
.mn .ph { display: grid; gap: 4%; min-height: 0; }
.mn .ph .mp { background: #93b3e6; border-radius: 2px; }
.mn-gal .ph.n2 { grid-template-columns: 1fr 1fr; } .mn-gal .ph.n3 { grid-template-columns: repeat(3, 1fr); }
.mn-gal .ph.n4 { grid-template-columns: 1fr 1fr; } .mn-gal .ph.n5, .mn-gal .ph.n6 { grid-template-columns: repeat(3, 1fr); }
.mn-side { grid-template-columns: 1.1fr 1fr; gap: 7%; }
.mn-side.rev .ph { order: 2; }
.mn-side .ph.n2 { grid-template-rows: 1fr 1fr; }
.mn-side .ph.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .mn-side .ph.n3 .mp:first-child { grid-column: 1 / -1; }
.mn-side .ph.n4 { grid-template-columns: 1fr 1fr; }
.mn-side .tx { display: grid; gap: 8%; align-content: center; }
.mn-side .tx .tt { width: 80%; height: 14%; min-height: 6px; }
.mn-side .tx em { height: 5px; }
@media (max-width: 640px) {
  .rp-steps { padding: 0 16px 8px; }
  .rp-step span { display: none; }
  .rp-step.on span { display: inline; }
  .rp-step { flex: none; }
  .tp-grid { grid-template-columns: 1fr 1fr; }
  .tp-slots { grid-template-columns: 1fr 1fr; }
  .tp-slot.logo { grid-column: 1 / -1; width: 50%; }
  .tp-span2 { grid-column: 1 / -1; }
  .rp-trow.tp-seg { grid-template-columns: 1fr 1fr 1fr 34px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .rp-trow.tp-seg > input[data-k="name"] { grid-column: 1 / 4; grid-row: 1; }
  .rp-trow.tp-seg > button { grid-column: 4; grid-row: 1; }
  .tp-seghead { display: none; }
  .tp-arrows { display: none; }
  .tp-mini.xs { width: 56px; }
  .rp-foot { flex-wrap: wrap; }
}
/* Asistente de reportes: más angosto y con aire a los lados; la selección de láminas arriba en verde pastel */
.sheet.sheet-lg.rp-sheet { max-width: 680px; }
.rp-sheet .sheet-head { padding: 14px 24px 8px; }
.rp-sheet .rp-steps { padding: 0 24px 12px; }
.rp-sheet .rp-body { padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); }
.rp-mpick button { padding: 9px 0; }
.tp-selbox { position: sticky; top: -8px; z-index: 3; background: #e7f6ec; border: 1px solid #bfe3cb; border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; box-shadow: 0 4px 12px rgba(19, 32, 60, .06); }
.tp-selbox h4 { margin: 0; font-size: 14px; color: #1d5b36; }
.tp-selbox .tp-chip { background: #fff; color: #1d5b36; }
.tp-selbox .tp-chip.lock { background: rgba(255, 255, 255, .6); color: #4f7a5f; }
.tp-selbox .tp-chip i { background: #d3eedb; color: #1d5b36; }
@media (max-width: 640px) {
  .rp-sheet .sheet-head { padding: 10px 16px 8px; }
  .rp-sheet .rp-steps { padding: 0 16px 8px; }
  .rp-sheet .rp-body { padding: 6px 16px calc(24px + env(safe-area-inset-bottom)); }
}
/* ---------- Pautas ---------- */
.pa-card { grid-template-columns: auto 1fr auto; }
.pa-media { display: grid; gap: 4px; align-content: center; min-width: 96px; }
.pa-media span { color: #fff; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 6px 10px; text-align: center; }
.pa-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-medio { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 14px; font: inherit; color: var(--text); cursor: pointer; }
.pa-medio b { font-size: 16px; }
.pa-medio small { color: var(--muted); font-size: 12.5px; }
.pa-dot { width: 28px; height: 28px; border-radius: 8px; background: var(--mc); }
.pa-check { position: absolute; top: 10px; right: 12px; font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--mc); opacity: 0; }
.pa-medio.on { border-color: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 18%, transparent); }
.pa-medio.on .pa-check { opacity: 1; }
.pa-medio.soon { cursor: default; opacity: .55; }
.pa-pick { position: relative; display: grid; gap: 6px; }
.pa-sug { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 24px rgba(19, 32, 60, .14); max-height: 260px; overflow: auto; padding: 4px; }
.pa-pick .pa-chips + input + .pa-sug, .pa-pick input + .pa-sug { top: auto; }
.pa-sug button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; color: var(--text); }
.pa-sug button:hover, .pa-sug button.on { background: var(--fill); }
.pa-hlist { display: grid; gap: 10px; }
.pa-hrow { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.pa-hname { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pa-hby { display: grid; grid-template-columns: 100px 1fr 110px; gap: 10px; align-items: end; }
.pa-tag { align-self: center; justify-self: start; font-size: 12px; font-weight: 700; color: #fff; background: var(--mc); border-radius: 999px; padding: 4px 10px; }
.pa-total { margin: 0; text-align: right; font-size: 14px; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-chips:empty { display: none; }
.pa-hhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pa-hhead b { font-size: 16px; }
.pa-hhead .link-btn { margin-left: auto; font-size: 13px; }
.pa-geo { display: flex; flex-wrap: wrap; }
.pa-local { display: grid; gap: 8px; }
.pa-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-rad > span { font-size: 13px; color: var(--muted); margin-right: 2px; }
.pa-rad input[type=range] { flex: 1; min-width: 120px; accent-color: #13213c; }
.pa-rad b { min-width: 52px; text-align: right; font-size: 14px; }
.pa-addr { display: flex; gap: 8px; }
.pa-addr input { flex: 1; min-width: 0; }
.pa-map { height: 300px; border-radius: 14px; overflow: hidden; background: var(--fill); z-index: 0; }
.pa-nomap { padding: 16px; }
.pa-mats { display: grid; gap: 8px; }
.pa-mat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.pa-mat.on { border-color: #93b3e6; background: #f4f7fd; }
.pa-matck { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; cursor: pointer; }
.pa-matck input { width: 18px; height: 18px; accent-color: #13213c; }
.pa-matck span { display: grid; }
.pa-matck small { color: var(--muted); font-size: 12px; }
.pa-mat select { width: auto; min-height: 36px; padding: 6px 10px; }
.pa-qty { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pa-qty input { width: 64px !important; min-height: 36px !important; padding: 6px 8px !important; }
.pa-mat:not(.on) .pa-kind, .pa-mat:not(.on) select, .pa-mat:not(.on) .pa-qty { opacity: .45; }
.pa-sum pre { white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.5; margin: 0; background: var(--fill); border-radius: 14px; padding: 14px 16px; }
@media (max-width: 640px) {
  .pa-hby { grid-template-columns: 1fr 1fr; }
  .pa-hby .pa-tag { grid-column: 1 / -1; }
  .pa-card { grid-template-columns: 1fr; }
  .pa-media { grid-auto-flow: column; justify-content: start; }
  .pa-map { height: 240px; }
}
.pa-sheet .chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.pa-sheet .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pa-kind { flex: none; }
.pa-kind button { padding: 6px 12px; }
.pa-geo button { padding: 8px 10px; }
.pa-link { margin-left: auto; border: 0; background: none; color: #2f80ed; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.pa-rad b { min-width: 0; }
.pa-mat select { min-width: 76px; }
/* ---------- Biblioteca de activos ---------- */
/* Tarjeta completa: score 5 + 100% de entregables + Distribuido */
.card.card-ok { border-color: #34c759; background: linear-gradient(0deg, #f1fbf3, #f1fbf3); box-shadow: 0 0 0 1px #34c759 inset, 0 2px 10px rgba(52, 199, 89, .15); }
.card.card-ok .card-head { background: transparent; }
.as-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: #4a5568; background: var(--fill); border-radius: 999px; padding: 1px 8px; }
.as-mini.ok { background: #dff3e7; color: #1e7a45; }
.dv-list { display: grid; gap: 6px; }
.dv-row { display: grid; grid-template-columns: 64px 1fr 1fr 34px; gap: 6px; align-items: center; }
.dv-row input, .dv-row select { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.dv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.as-box { display: grid; gap: 10px; }
.as-cond { display: flex; flex-wrap: wrap; gap: 6px; }
.as-cond span { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--fill); color: var(--muted); }
.as-cond span.ok { background: #dff3e7; color: #1e7a45; }
.as-done { margin: 0; font-size: 13px; font-weight: 600; color: #1e7a45; }
.as-hint { margin: 0; }
.as-prog { display: flex; align-items: center; gap: 10px; }
.as-prog .mini-bar { flex: 1; height: 8px; }
.as-prog b { font-size: 14px; white-space: nowrap; }
.as-req { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.as-req summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.as-req[open] summary { margin-bottom: 8px; }
.as-group { display: grid; gap: 6px; }
.as-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.as-gh b { font-size: 14px; }
.as-cnt { font-size: 12.5px; font-weight: 700; color: #b26b00; }
.as-cnt.ok { color: #1e7a45; }
.as-empty { margin: 2px 0; }
.as-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.as-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: #fff; background: #5c6b85; }
.as-video { background: #2b4c86; } .as-diseno { background: #7b4dff; } .as-foto { background: #1e9e5a; } .as-animacion { background: #e8833a; } .as-audio { background: #d64545; } .as-documento { background: #6b7280; }
.as-tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.as-tx a { font-weight: 600; color: #2f80ed; overflow-wrap: anywhere; }
.as-tx small { color: var(--muted); font-size: 12px; }
.as-tx p { margin: 2px 0 0; font-size: 13px; }
.as-dlg { width: min(480px, 100%); display: grid; gap: 10px; max-height: 90vh; overflow: auto; }
.as-dlg h3 { margin: 0; }
.as-dlg > p { margin: -6px 0 0; }
.as-up { align-items: center; gap: 10px; }
.as-err { margin: 0; color: #d64545; font-size: 13px; font-weight: 600; }
.lib-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.lib-filters input, .lib-filters select { min-height: 42px; }
.lib-count { margin: 4px 0 10px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.lib-card { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.lib-tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lib-name { font-weight: 700; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.lib-tx p { margin: 0; font-size: 13px; color: #4a5568; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lib-chips > span:not(.ptag) { font-size: 11.5px; font-weight: 600; background: var(--fill); border-radius: 999px; padding: 2px 8px; color: #4a5568; }
.lib-proj { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: #2f80ed; cursor: pointer; text-align: left; }
.lib-acts { display: grid; gap: 6px; justify-items: end; }
.lib-pend { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.lib-pend summary { cursor: pointer; font-weight: 600; }
.lib-prow { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 9px 0; font: inherit; font-size: 14px; cursor: pointer; text-align: left; color: var(--text); }
.lib-prow b { color: #b26b00; white-space: nowrap; }
.bm-ext { color: #2f80ed; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .lib-filters { grid-template-columns: 1fr 1fr; }
  .lib-filters input { grid-column: 1 / -1; }
  .lib-grid { grid-template-columns: 1fr; }
  .dv-row { grid-template-columns: 56px 1fr 34px; }
  .dv-row select[data-k="format"] { grid-column: 2; grid-row: 2; }
}
.lib-acts .btn, .lib-name { text-decoration: none; }
.dv-row input { border: 0; border-radius: 10px; background: var(--fill); font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; }
/* Conocimiento: textos pegados con renglones largos sin espacios (tablas markdown, links) no deben ensanchar la tarjeta */
.kb-docs, .kb-doc, .kb-doc > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
#kbView, .kb-view { min-width: 0; }
.kb-doc { overflow-wrap: anywhere; word-break: break-word; }
.kb-text { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.kb-doc a { overflow-wrap: anywhere; }
/* Pautas: vista previa del brief (igual que el PDF) */
.pp-box { width: min(760px, 100%); }
.pp-scroll { overflow-y: auto; padding: 18px; }
.pp-page { background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(19, 33, 60, .14); padding: 34px 40px 22px; color: #13213c; font-family: Helvetica, Arial, sans-serif; font-size: 13.5px; line-height: 1.4; }
.pp-page header { display: flex; justify-content: space-between; align-items: flex-start; }
.pp-lbl { font-size: 11px; font-weight: 700; color: #6b7280; letter-spacing: .02em; padding-top: 6px; }
.pp-page header img { width: 128px; height: auto; }
.pp-page h1 { font-size: 24px; margin: 14px 0 10px; padding-bottom: 12px; border-bottom: 1px solid #dde2ea; }
.pp-gen { margin-bottom: 8px; }
.pp-kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 2px 0; }
.pp-kv span { font-weight: 700; color: #6b7280; font-size: 12.5px; }
.pp-kv b { font-weight: 400; }
.pp-kv a { color: #2f80ed; }
.pp-bar { background: #13213c; color: #fff; font-weight: 700; border-radius: 5px; padding: 6px 12px; margin: 16px 0 10px; }
.pp-hotel { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #dde2ea; }
.pp-hotel h4 { margin: 0 0 6px; font-size: 16px; }
.pp-hotel h6 { margin: 8px 0 2px; font-size: 12.5px; color: #6b7280; }
.pp-hotel ul { margin: 2px 0 4px; padding-left: 20px; }
.pp-seg h5 { margin: 6px 0 1px; font-size: 13.5px; }
.pp-seg p { margin: 2px 0; }
.pp-page footer { margin-top: 18px; font-size: 11px; color: #6b7280; }
@media (max-width: 640px) { .pp-scroll { padding: 10px; } .pp-page { padding: 20px 18px 16px; } .pp-page header img { width: 96px; } .pp-kv { grid-template-columns: 96px 1fr; } }
/* Pautas: acciones del historial (mismo gris para todas) y logo de Meta */
.pa-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn.pa-pdf { background: var(--fill); color: var(--text); border-color: transparent; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.btn.pa-pdf:hover { background: var(--fill-2); }
.pa-media span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pa-media svg { flex: none; }
.pa-acts .icon-btn { width: 36px; height: 36px; }
.pa-acts .icon-btn svg { width: 18px; height: 18px; }
/* Pautas: secciones de la segmentación que van (o no) en el PDF */
.pa-secl { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-sec { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #93b3e6; background: #eef3fb; color: #13213c; border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pa-sec input { width: 16px; height: 16px; accent-color: #13213c; margin: 0; }
.pa-sec.off { border-color: var(--line); background: #fff; color: var(--muted); text-decoration: line-through; font-weight: 500; }

/* Ventana para elegir las secciones del PDF antes de descargar. */
.pa-pick-dlg { max-width: 560px; width: 100%; max-height: 88dvh; overflow-y: auto; }
.pa-pickg { margin: 12px 0; display: grid; gap: 8px; }
.pa-pickg b { font-size: 14px; }
.pa-pick-dlg .btn.primary { display: inline-flex; align-items: center; gap: 6px; }
.pa-pick-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pa-pick-acts { grid-template-columns: 1fr 1fr 1.3fr; }
@media (max-width: 560px) { .pa-pick-acts { grid-template-columns: 1fr 1fr; } .pa-pick-acts [data-yes] { grid-column: 1 / -1; order: -1; } }
.btn.pa-pdfgo { display: inline-flex; align-items: center; gap: 6px; }

/* Conocimiento: mosaicos más compactos y vista de lista. */
.kb-qrow { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.kb-view .kb-qrow .kb-q { margin-bottom: 0; flex: 1; min-width: 0; }
.kb-viewsw { display: inline-flex; background: var(--fill); border-radius: 12px; padding: 3px; gap: 2px; flex-shrink: 0; }
.kb-viewsw button { border: 0; background: none; color: var(--muted); width: 38px; height: 34px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.kb-viewsw button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.kb-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kb-grid .kb-card { padding: 13px 14px; border-radius: 14px; }
.kb-grid .kb-card b { font-size: 15px; }
.kb-grid .kb-card-desc { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kb-grid .kb-card-task { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-grid .kb-card .small, .kb-grid .kb-card-last { font-size: 12px; }
.kb-list { display: grid; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.kb-list .kb-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 11px 16px; min-width: 0; }
.kb-list .kb-card:last-child { border-bottom: 0; }
.kb-list .kb-card:hover { background: var(--fill); }
.kb-list .kb-card > * { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-list .kb-card b { font-size: 15px; }
.kb-list .kb-card-desc { font-size: 13px; }
.kb-list .kb-card-task { font-size: 12.5px; }
.kb-list .kb-card .small { grid-column: 2; grid-row: 1; text-align: right; font-size: 12px; }
.kb-list .kb-card-last { display: none; }
@media (max-width: 700px) { .kb-list .kb-card { grid-template-columns: minmax(0, 1fr); } .kb-list .kb-card .small { grid-column: 1; grid-row: auto; text-align: left; } }

/* Correo: destinatarios (Jorge, Eli, Dylan), "Abrir en Outlook" y referencias "/" y "_". */
.md-tosec { display: grid; gap: 6px; }
.sheet.md-notitle .md-tosec { padding-right: 44px; }
#mdToVal small { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 6px; }
.md-topop { grid-template-columns: 1fr; }
.md-toopt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.md-toopt:hover { background: var(--fill); }
.md-toopt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.md-toopt span { display: grid; line-height: 1.25; min-width: 0; }
.md-toopt b { font-size: 15px; }
.md-toopt small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-sendrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-outlook { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.md-outlook .ico { width: 20px; height: 20px; }
@media (max-width: 520px) { .md-sendrow { grid-template-columns: 1fr; } }
.ref-box { position: fixed; z-index: 400; top: 0; left: 0; width: min(360px, calc(100vw - 16px)); max-height: 320px; overflow-y: auto; }
.ref-head { margin: 4px 8px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.ref-head span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ref-box .mention-opt { align-items: flex-start; }
.ref-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.ref-t { display: grid; min-width: 0; }
.ref-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-none { margin: 6px 10px 8px; }
/* Referencias elegidas: chips debajo del texto (toca para cambiar qué datos van). */
.ref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.bot-panel .ref-chips { margin: 0 12px 6px; }
.ref-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #93b3e6; background: #eef3fb; color: var(--text); border-radius: 999px; padding: 4px 11px 4px 5px; font: inherit; cursor: pointer; max-width: 100%; }
.ref-chip .ref-ic { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }
.ref-chip b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ref-chip small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ref-dlg { width: min(520px, 100%); }
.ref-dlg .pa-secl { margin: 4px 0 14px; }
.md-tosec.open { background: none; box-shadow: none; }
.unsaved-back { display: block; margin: 10px auto 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.card.expanded.centered.again { animation: none; }
/* Correo: asunto arriba (deja lugar a la ✕) y "Draft en Outlook" dentro del Para. */
.sheet.md-notitle .md-subj { padding-right: 44px; }
.sheet.md-notitle .md-tosec { padding-right: 0; }
.md-toout { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 12px; }
.md-toout b, #mdSend { display: inline-flex; align-items: center; gap: 6px; }
#mdToVal .ico { vertical-align: -3px; margin-right: 4px; }
#mdSend { justify-content: center; }
.md-toout .ico, #mdToVal .ico, #mdSend .ico { width: 18px; height: 18px; }
.md-toout small { white-space: normal; }
#mdToSec, #mdToSec:hover, #mdToSec:focus-within, #mdToSec.open { background: transparent; padding: 0; box-shadow: none; }
#mdToSec.open .md-select, #mdToSec .md-select:focus-visible { box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 5px var(--focus-soft); outline: none; }
.md-subj { margin-bottom: 2px; }
/* Trasladar: cada tarea con sus pendientes debajo. */
.mv-grp { display: grid; gap: 4px; }
.mv-subs { display: grid; gap: 4px; margin-left: 28px; }
.mv-sub { font-weight: 500; }
.mv-sub.fu-done span { color: #24893D; }
.mv-grp.on > .mv-msi { background: #eef3fb; }
.mv-lbl small { display: block; font-weight: 500; margin-top: 2px; }
.mv-into { margin-top: 12px; }
.mv-into select { width: 100%; }
.mv-sheet .mv-list { align-content: start; }
.mv-mode { margin: 0 0 12px; }
.mv-mode button.off { opacity: .55; }
.mv-cardinfo p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.mv-prev { margin: 0 0 10px; padding: 10px 12px 10px 30px; background: var(--fill); border-radius: 12px; font-size: 14px; display: grid; gap: 4px; max-height: 34dvh; overflow-y: auto; }
.mv-prev li.fu-done { color: #24893D; text-decoration: line-through; }
.mv-warn { background: #fff5e6; color: #8a5300; border-radius: 12px; padding: 10px 12px; }
/* Vista previa: "Sin fecha" en rojo y la cuenta en gris. */
.meta-due .no-due { color: var(--red); }
.meta-acct select, .meta-acct select:not(.empty) { color: var(--muted); font-weight: 600; }
/* Sin responsable o sin cuenta: en rojo, para que se note. */
.meta-status select.empty, .meta-acct select.empty { color: var(--red); }
/* Vista de lista: score en circulito junto a la cuenta. */
.score-dot { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1.3px solid #c7c7cc; color: #8e8e93; font-size: 8.5px; font-weight: 700; line-height: 1; flex-shrink: 0; vertical-align: middle; }
.score-dot.ok { background: #dff5e3; border-color: #dff5e3; color: #24893D; }
.score-dot svg { width: 9px; height: 9px; }
.card-place { align-items: center; }
.score-dot:not(.ok) { padding-top: 1px; box-sizing: border-box; }
/* Agendar llamada o cita */
.cal-dlg { display: grid; gap: 12px; width: min(460px, 100%); }
.cal-dlg h3 { margin: 0; }
.cal-dlg .field { display: grid; gap: 6px; }
.cal-dlg .field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.cal-ask > span { color: var(--red) !important; }
.cal-ask input { box-shadow: 0 0 0 1.5px var(--red), 0 0 0 4px var(--red-soft); border-radius: 10px; }
.cal-acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (max-width: 480px) { .cal-row { grid-template-columns: 1fr 1fr; } .cal-row .field:first-child { grid-column: 1 / -1; } }
.cal-dlg { width: min(540px, 100%); }
.cal-dlg input, .cal-dlg select { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 12px; font: inherit; font-size: 15px; color: var(--text); box-sizing: border-box; }
.cal-dlg input:focus, .cal-dlg select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--focus), 0 0 0 4px var(--focus-soft); }
.cal-row { grid-template-columns: 1.35fr 1.1fr 1fr; }
/* Pausa: transcribe y deja el texto en la caja (Minor-Bot), sin enviar */
.recwave .rec-pause { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--accent); color: #fff; cursor: pointer; margin-left: 2px; }
.recwave .rec-pause svg { width: 14px; height: 14px; }
.recwave .rec-pause:hover { background: #1f3260; }
/* Tareas y pendientes en revisión: número con la casilla (o la flechita del grupo) debajo; el texto a todo lo ancho
   hasta el lápiz; la fecha y los íconos en su propio renglón, debajo del texto. */
.ms-row.ms-row2 { display: grid; grid-template-columns: auto 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: start; }
.ms-row2 > .ms-grip { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.ms-row2 > .ms-num { grid-column: 2; grid-row: 1; text-align: center; min-width: 0; margin-top: 2px; }
.ms-row2 > .ms-check { display: contents; }
.ms-row2 > .ms-check > input { grid-column: 2; grid-row: 2; justify-self: center; margin: 0; }
.ms-row2 > .ms-check > span { grid-column: 3; grid-row: 1; cursor: pointer; }
.ms-row2 > .ms-tog { grid-column: 2; grid-row: 2; justify-self: center; }
.ms-row2 > .ms-gname { grid-column: 3; grid-row: 1; text-align: left; }
.ms-row2 > [data-mspen] { grid-column: 4; grid-row: 1; }
.ms-row2 > .ms-acts { grid-column: 3 / 5; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; min-width: 0; }
.ms-row2 > .ms-acts > .ms-due { margin-right: auto; }
/* La casilla (o flechita) pegada al número aunque el texto ocupe varios renglones; los íconos siempre debajo del texto. */
.ms-row.ms-row2 { grid-template-rows: auto auto 1fr auto; }
.ms-row2 > .ms-grip { grid-row: 1 / span 4; }
.ms-row2 > .ms-check > span, .ms-row2 > .ms-gname { grid-row: 1 / span 3; }
.ms-row2 > [data-mspen] { grid-row: 1 / span 3; align-self: start; }
.ms-row2 > .ms-acts { grid-row: 4; }
/* En compu, los íconos empiezan donde empieza el texto (la fecha primero). */
@media (min-width: 701px) {
  .ms-row2 > .ms-acts { justify-content: flex-start; }
  .ms-row2 > .ms-acts > .ms-due { margin-right: 6px; }
}
/* Los íconos suben justo debajo del texto; la casilla (o flechita) se dibuja debajo del número sin empujar nada. */
.ms-row.ms-row2 { grid-template-rows: auto auto; }
.ms-row2 > .ms-grip { grid-row: 1 / span 2; }
.ms-row2 > .ms-check > span, .ms-row2 > .ms-gname, .ms-row2 > [data-mspen] { grid-row: 1; }
.ms-row2 > .ms-acts { grid-row: 2; }
.ms-row2 > .ms-check > input, .ms-row2 > .ms-tog { grid-row: 1; align-self: start; position: relative; top: 28px; }
/* Todo se guarda solo: el botón Guardar queda discreto (y muestra Guardando… / Guardado ✓). */
.acc .btn.save:not(.primary) { width: auto; min-height: 0; justify-self: end; margin-left: auto; display: block; background: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.acc .btn.save:not(.primary):hover { color: var(--accent); border-color: var(--accent); }
.acc .btn.save:not(.primary):active, .acc .btn.save:not(.primary):disabled { background: none; color: var(--muted); }
/* Vista previa: el ⋮ va junto a la barra de avance (ya no hay "Ver detalle": se entra tocando la tarjeta otra vez). */
.prog-row { display: flex; align-items: center; gap: 8px; }
.prog-row .progress { flex: 1; min-width: 0; }
.prog-row .card-more { width: 34px; height: 30px; flex: 0 0 auto; border-radius: 10px; font-size: 18px; padding: 0; }
.card-hint { display: block; font-size: 12px; color: var(--muted); text-align: center; margin-top: 2px; }
button.card-hint { border: 0; background: none; width: 100%; cursor: pointer; padding: 4px; font: inherit; font-size: 12px; }
/* Ítems de un pendiente */
.ms-btn.ms-itembtn { color: #a0a4ad; position: relative; }
.ms-btn.ms-itembtn:hover, .ms-btn.ms-itembtn.on { color: var(--accent); }
.ms-btn.ms-itembtn.has { color: var(--accent); }
.ms-itembtn svg { width: 17px; height: 17px; }
.ms-items { margin: 8px 0 4px 32px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; }
.ms-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; }
.ms-item input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #24893D; flex-shrink: 0; }
.ms-item-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; cursor: text; }
.ms-item.done .ms-item-txt { text-decoration: line-through; color: #24893D; }
.ms-item-rm { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px; opacity: .6; }
.ms-item-rm:hover { opacity: 1; color: var(--red); }
.ms-item-add { display: flex; gap: 6px; align-items: center; position: relative; }
.ms-item-in { flex: 1; min-width: 0; min-height: 34px; border: 0; border-radius: 9px; background: var(--fill); padding: 0 10px; font: inherit; font-size: 14px; }
.ms-item-in:focus { outline: none; box-shadow: 0 0 0 1.5px var(--focus); }
.ms-item-ok { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 18px; font-weight: 700; display: grid; place-items: center; cursor: pointer; }
.ms-item-ok svg { width: 16px; height: 16px; }
.ms-item { position: relative; }
/* Hojas (correo, trasladar…) y el bot por encima del proyecto abierto al centro. */
#sheet.overlay { z-index: 35; }
.bot-panel { z-index: 31; }
.ms-itembtn .nb { position: absolute; top: -2px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; }
/* Ítems más sencillos: sin recuadro ni contornos; cada renglón con su casilla como viñeta. */
.ms-items { background: none; border: 0; padding: 4px 0 2px; margin-left: 34px; gap: 2px; }
.ms-item-in { background: none; min-height: 28px; padding: 0 2px; border-radius: 0; }
.ms-item-in:focus { box-shadow: none; }
.ms-item-bullet { width: 16px; height: 16px; flex-shrink: 0; border: 1.5px solid #c7c7cc; border-radius: 4px; }
.ms-item-add { gap: 8px; }
.ms-item-ok { width: 22px; height: 22px; font-size: 14px; }
.ms-item-ok svg { width: 13px; height: 13px; }
.ms-items input.ms-item-in, .ms-items input.ms-item-in:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; padding: 0 2px; min-height: 28px; }
.prog-row .card-more { background: #fff; border: 0; box-shadow: none; }
/* Minor-Bot: botones de opciones bajo la respuesta */
.bm-choices { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 6px 0 2px; }
.bm-choice { border: 1px solid var(--accent); background: #fff; color: var(--accent); border-radius: 14px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; max-width: 100%; }
.bm-choice:hover { background: var(--accent); color: #fff; }
/* Selector de fecha con ">" (atajos + calendario). */
.dp-box { width: min(300px, calc(100vw - 16px)); max-height: none; padding: 6px; }
.dp-short { display: grid; gap: 2px; margin-bottom: 6px; }
.dp-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.dp-opt small { color: var(--muted); font-size: 12px; }
.dp-opt.on, .dp-opt:hover { background: var(--fill); }
.dp-cal { border-top: 1px solid var(--line, rgba(127,127,127,.2)); padding-top: 6px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.dp-head button { border: 0; background: none; color: var(--text); font-size: 18px; width: 30px; height: 28px; border-radius: 8px; cursor: pointer; }
.dp-head button:hover { background: var(--fill); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-grid i { font-style: normal; font-size: 11px; color: var(--muted); padding: 2px 0; }
.dp-day { border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; height: 30px; border-radius: 8px; cursor: pointer; }
.dp-day:hover { background: var(--fill); }
.dp-day.today { color: var(--accent); font-weight: 700; }
.dp-day.sel { background: var(--accent); color: #fff; }
/* Encuadrar fotos de las láminas (reporte de socios). */
.tp-ph .tp-phfr, .tp-slot .tp-phfr { position: absolute; left: 6px; right: auto; top: auto; bottom: 6px; width: auto; height: 24px; border-radius: 999px; padding: 0 9px 0 7px; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.tp-phfr svg { width: 13px; height: 13px; }
.fr-dlg { width: min(680px, calc(100vw - 32px)); max-width: none; display: grid; gap: 12px; }
.fr-dlg h3, .fr-dlg p { margin: 0; }
.fr-seg { display: inline-flex; background: var(--fill); border-radius: 10px; padding: 3px; gap: 3px; justify-self: start; }
.fr-seg button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.fr-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }
.fr-stage { position: relative; width: 100%; max-height: 56vh; overflow: hidden; border-radius: 6px; background: #fff; outline: 1px solid #d5dae3; cursor: grab; touch-action: none; user-select: none; margin: 0 auto; }
.fr-stage:active { cursor: grabbing; }
.fr-stage.contain { background: #fff repeating-conic-gradient(#f2f3f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.fr-stage img { position: absolute; max-width: none; pointer-events: none; }
.fr-zoom { display: grid; grid-template-columns: auto 1fr 48px; align-items: center; gap: 10px; font-size: 13.5px; }
.fr-zoom b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.fr-dlg .dialog-actions { display: flex; gap: 8px; align-items: center; }
.fr-dlg .dialog-actions .spacer { flex: 1; }
/* ---------- Órdenes de compra (ODC) ---------- */
.rp-view.odc-view { max-width: 1480px; }
.odc-hacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.odc-hacts .btn { display: inline-flex; align-items: center; gap: 6px; }
.odc-imp { cursor: pointer; }
.odc-bar { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.odc-bar select { border: 0; background: var(--fill); border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 600; color: var(--text); }
.odc-months { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.odc-mo { position: relative; border: 0; background: none; border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.odc-mo.has { color: var(--text); }
.odc-mo.has::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--teal); }
.odc-mo:hover { background: var(--fill); }
.odc-mo.on { background: var(--accent); color: #fff; }
.odc-mo.on::after { background: #fff; }
.odc-empty { background: var(--fill); border-radius: var(--radius); padding: 28px 22px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.odc-empty p { margin: 0; max-width: 520px; }
.odc-eacts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.odc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.odc-stats > div { background: var(--fill); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; min-width: 0; }
.odc-stats span { font-size: 12px; color: var(--muted); }
.odc-stats b { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odc-stats .ok { background: var(--green-soft); } .odc-stats .ok b { color: var(--green-text); }
.odc-stats .over { background: var(--orange-soft); } .odc-stats .over b { color: var(--orange-text); }
.odc-stats .neg { background: var(--red-soft); } .odc-stats .neg b { color: var(--red); }
.odc-stats em { font-style: normal; padding-bottom: 4px; white-space: nowrap; }
@media (max-width: 700px) { .odc-stats { grid-template-columns: 1fr 1fr; } .odc-stats em { grid-column: 1 / -1; } }
.odc-scroll { overflow: auto; max-height: calc(100vh - 290px); min-height: 220px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.odc-t { border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 100%; }
.odc-t th, .odc-t td { border-bottom: 1px solid var(--line); padding: 0; white-space: nowrap; background: var(--card); }
.odc-t thead th { position: sticky; top: 0; z-index: 3; background: #f7f7fa; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; padding: 8px 8px; }
.odc-t thead tr.odc-tot td { position: sticky; top: 46px; z-index: 3; background: #eef1f6; font-weight: 700; text-align: right; padding: 7px 8px; }
.odc-t .odc-c0 { position: sticky; left: 0; z-index: 2; text-align: left; min-width: 280px; max-width: 340px; box-shadow: 1px 0 0 var(--line); }
.odc-t thead .odc-c0 { z-index: 4; }
.odc-t thead tr.odc-tot .odc-c0 { z-index: 4; text-align: left; }
.odc-ph button { border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; display: grid; justify-items: end; gap: 1px; width: 100%; padding: 0; }
.odc-ph button b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em; }
.odc-ph button small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.odc-ph button:hover b { text-decoration: underline; }
.odc-t input, .odc-t select { border: 0; background: transparent; font: inherit; color: var(--text); width: 100%; padding: 7px 8px; border-radius: 6px; }
.odc-t input:focus, .odc-t select:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.odc-rn, .odc-sn { display: flex; align-items: center; }
.odc-rn input { text-overflow: ellipsis; }
.odc-x { border: 0; background: none; color: var(--muted); width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; cursor: pointer; font-size: 11px; opacity: 0; }
tr:hover .odc-x, .odc-x:focus { opacity: 1; }
.odc-x:hover { background: var(--red-soft); color: var(--red); }
@media (hover: none) { .odc-x { opacity: .6; } }
.odc-cur select { width: 64px; color: var(--muted); }
.odc-bud input { text-align: right; font-weight: 600; min-width: 96px; }
.odc-cell { position: relative; min-width: 104px; }
.odc-cell input { text-align: right; padding-right: 26px; }
.odc-cell.split input { cursor: pointer; color: var(--accent); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
.odc-dz { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; opacity: 0; }
.odc-cell:hover .odc-dz, .odc-cell.split .odc-dz, .odc-dz:focus { opacity: 1; }
.odc-dz:hover { background: var(--fill); color: var(--accent); }
.odc-dz i { position: absolute; top: -3px; right: -3px; font-style: normal; font-size: 9px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; min-width: 13px; height: 13px; line-height: 13px; text-align: center; }
@media (hover: none) { .odc-dz { opacity: .55; } }
.odc-gap { min-width: 12px; }
.odc-t thead th.odc-gap { text-align: center; padding: 4px 8px; }
.odc-left { text-align: right; padding: 0 10px !important; font-weight: 700; min-width: 112px; }
.odc-left.ok { color: var(--green-text); }
.odc-left.over { color: var(--orange-text); background: #fff8ec; }
.odc-left.neg { color: var(--red); background: #fff1f0; }
.odc-sec td { background: #f7f7fa !important; }
.odc-sec td .odc-sn { position: sticky; left: 0; width: 340px; }
.odc-sec input { font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.odc-add td { border-bottom: 0; padding: 2px 4px; }
.odc-add td .btn { position: sticky; left: 4px; }
.odc-sub td { background: #fafafc; font-weight: 700; text-align: right; padding: 7px 8px; color: var(--accent); border-bottom: 2px solid var(--line); }
.odc-sub td.odc-c0 { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: #fafafc; }
.odc-under { display: flex; gap: 12px; align-items: center; margin: 8px 0 18px; flex-wrap: wrap; }
.odc-list h3 { margin: 6px 0 10px; font-size: 18px; }
.odc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.odc-card { background: var(--fill); border-radius: 12px; }
.odc-card summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; }
.odc-card summary::-webkit-details-marker { display: none; }
.odc-n { font-size: 11px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 8px; }
.odc-cp { display: grid; min-width: 0; }
.odc-cp b { font-size: 14px; }
.odc-cp small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odc-ct { font-variant-numeric: tabular-nums; }
.odc-items { padding: 0 12px 10px; display: grid; gap: 4px; font-size: 13px; }
.odc-items div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 4px; }
.odc-items b { font-variant-numeric: tabular-nums; font-weight: 600; }
.odc-items div > span { flex: 1; min-width: 0; }
.odc-del { border: 0; background: none; color: var(--muted); padding: 0 2px; cursor: pointer; opacity: .45; display: inline-flex; align-items: center; }
.odc-items div:hover .odc-del { opacity: 1; }
.odc-del:hover, .odc-delall:hover { color: #d33; }
.odc-delall { justify-self: start; margin-top: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.odc-dlg { width: min(560px, calc(100vw - 32px)); max-width: none; display: grid; gap: 12px; }
.odc-dlg h3, .odc-dlg p { margin: 0; }
.odc-dlg .field > span { display: block; margin-bottom: 6px; }
.odc-dlg .fr-seg { margin-bottom: 4px; }
.odc-dlg .dialog-actions { display: flex; gap: 8px; align-items: center; }
.odc-dlg .dialog-actions .spacer { flex: 1; }
.odc-move { gap: 8px; flex-wrap: wrap; }
.odc-lines { display: grid; gap: 6px; }
.odc-line { display: grid; grid-template-columns: 1fr 120px auto 26px; gap: 6px; align-items: center; }
.odc-line input[type=text] { border: 0; background: var(--fill); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 14px; color: var(--text); min-width: 0; }
.odc-line input[data-lk=amt] { text-align: right; }
.odc-line .odc-x { opacity: 1; }
.odc-own { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; color: var(--muted); }
@media (max-width: 520px) { .odc-line { grid-template-columns: 1fr 96px 26px; } .odc-own { grid-column: 1 / -1; } }
.odc-ltot { display: flex; justify-content: space-between; font-size: 15px; border-top: 1px solid var(--line); padding-top: 8px; }
.odc-impl { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.odc-imr { display: grid; grid-template-columns: auto 90px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--fill); border-radius: 10px; }
.odc-imr em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--orange-text); background: var(--orange-soft); border-radius: 999px; padding: 2px 8px; }
.odc-bar select { width: auto; flex: 0 0 auto; }
.odc-t th.odc-left, .odc-t td.odc-left { position: sticky; right: 0; z-index: 2; box-shadow: -1px 0 0 var(--line); }
.odc-t thead th.odc-left { z-index: 4; }
.odc-t td.odc-left.ok { background: #f3fbf5; }
.odc-sub td:last-child, .odc-tot td:last-child { position: sticky; right: 0; z-index: 2; box-shadow: -1px 0 0 var(--line); }
.odc-t thead tr.odc-tot td:last-child { z-index: 4; }
@media (max-width: 700px) {
  .odc-t .odc-c0 { min-width: 150px; max-width: 170px; }
  .odc-sec td .odc-sn { width: 170px; }
  .odc-left { min-width: 92px; }
  .odc-hacts { width: 100%; justify-content: stretch; }
  .odc-hacts .btn { flex: 1; justify-content: center; }
  .odc-view .rp-head { flex-direction: column; }
}
/* ODC: matriz sin scroll vertical (crece hacia abajo), resumen de ODC arriba, filtro por sección y aire entre secciones. */
.odc-scroll { max-height: none; overflow-x: auto; overflow-y: hidden; min-height: 0; }
.odc-view .odc-list { margin: 0 0 14px; }
.odc-view .odc-list h3 { font-size: 16px; }
.odc-spacer td { height: 22px; border-bottom: 0 !important; background: var(--card) !important; padding: 0; }
.odc-secbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.odc-secbtn:hover { background: var(--fill-2); }
.odc-secbtn svg { opacity: .7; }
.odc-sec td .odc-sn { width: auto; gap: 8px; }
.odc-fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 4px 3px 10px; white-space: nowrap; }
.odc-fchip button { border: 0; background: rgba(19, 32, 60, .15); color: var(--accent); width: 18px; height: 18px; border-radius: 50%; font-size: 10px; cursor: pointer; }
.odc-menu { position: fixed; z-index: 500; min-width: 280px; max-width: min(420px, calc(100vw - 16px)); background: var(--card); border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 6px; display: grid; gap: 1px; }
.odc-mhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px 4px; }
.odc-mlist { display: grid; gap: 1px; max-height: 46vh; overflow-y: auto; }
.odc-menu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.odc-menu button:hover { background: var(--fill); }
.odc-menu button.on { background: var(--accent-soft); font-weight: 600; }
.odc-menu button small { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.odc-menu small.ok { color: var(--green-text); } .odc-menu small.over { color: var(--orange-text); } .odc-menu small.neg { color: var(--red); }
.odc-menu .danger { color: var(--red); }
.odc-msep { height: 1px; background: var(--line); margin: 4px 6px; }
.odc-cards { display: flex; gap: 8px; align-items: flex-start; }
.odc-col { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
/* ODC: cada sección en su contenedor plegable con su propia barra horizontal. */
.odc-boxes { display: grid; gap: 14px; }
.odc-box { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.odc-boxhead { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; background: #f7f7fa; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.odc-box.closed .odc-boxhead { border-bottom: 0; }
.odc-coll { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: transform .2s; }
.odc-coll:hover { background: var(--fill-2); color: var(--text); }
.odc-box.closed .odc-coll { transform: rotate(-90deg); }
.odc-boxsum { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.odc-boxsum b { color: var(--text); font-weight: 600; }
.odc-boxsum b.ok { color: var(--green-text); } .odc-boxsum b.over { color: var(--orange-text); } .odc-boxsum b.neg { color: var(--red); }
@media (max-width: 700px) { .odc-boxsum { margin-left: 36px; white-space: normal; } }
.odc-box .odc-scroll { border: 0; border-radius: 0; overflow-x: auto; overflow-y: hidden; }
.odc-box .odc-t { table-layout: fixed; min-width: 100%; }
.odc-box .odc-t .odc-c0 { min-width: 0; max-width: none; }
.odc-box .odc-t thead th { position: static; }
.odc-box .odc-t thead tr.odc-tot td { position: static; }
.odc-ph button b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.odc-ph button { min-width: 0; }
.odc-rn input { min-width: 0; }
.odc-cell, .odc-bud input { min-width: 0; }
.odc-left { min-width: 0; }
.odc-box .odc-t thead th.odc-left, .odc-box .odc-t thead tr.odc-tot td:last-child { position: sticky; right: 0; z-index: 3; box-shadow: -1px 0 0 var(--line); }
.odc-box .odc-t thead th.odc-c0, .odc-box .odc-t thead tr.odc-tot td.odc-c0 { position: sticky; left: 0; z-index: 3; }
.odc-box .odc-t thead tr.odc-tot td.odc-c0 { background: #eef1f6; }
.odc-box .odc-t thead tr.odc-tot td:last-child { background: #eef1f6; }
/* ODC · ALL: consolidado del año */
.odc-mdiv { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; flex-shrink: 0; }
.odc-allbtn { letter-spacing: .06em; }
.odc-yt small { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.odc-yt .ok small, .odc-yt .over small, .odc-yt .neg small { color: inherit; opacity: .8; }
.odc-yt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.odc-bar1 { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: #dfe3ea; overflow: hidden; }
.odc-bar1 i { display: block; height: 100%; background: #2a78d6; border-radius: 999px; }
.odc-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.odc-viz { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 10px; min-width: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.odc-viz-hero { grid-column: 1 / -1; }
.odc-viz header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.odc-viz h3 { margin: 0; font-size: 15px; }
.odc-viz header p { margin: 2px 0 0; }
.odc-leg { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); align-items: center; }
.odc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.odc-leg i.ln { width: 16px; height: 2px; border-radius: 2px; }
.odc-leg i.ar { width: 10px; height: 10px; border-radius: 3px; }
.odc-chart { position: relative; min-height: 120px; }
.odc-chart svg { display: block; overflow: visible; }
.odc-chart .odc-hit { cursor: pointer; }
.odc-ax { font-size: 11px; fill: #8a8984; font-variant-numeric: tabular-nums; }
.odc-ax.off { fill: #c9c9cf; }
.odc-dot { transition: r .12s; }
.odc-tip { position: absolute; z-index: 5; pointer-events: none; background: #13203c; color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.odc-tip b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.odc-tip div { display: flex; align-items: center; gap: 6px; }
.odc-tip div span { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.odc-tip i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.odc-tip .ok i { background: #1baf7a; } .odc-tip .over i { background: #eda100; } .odc-tip .neg i { background: #e34948; }
.odc-tip .muted { color: rgba(255, 255, 255, .7); }
.odc-hbars { display: grid; gap: 8px; padding: 4px 0 8px; }
.odc-hb { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.odc-hbn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.odc-hbt { height: 12px; background: #f1f2f5; border-radius: 4px; overflow: hidden; }
.odc-hbt i { display: block; height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.odc-hb.other .odc-hbt i { background: #a3a7b0; }
.odc-hbv { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.odc-hbv small { font-weight: 500; color: var(--muted); margin-left: 6px; }
@media (max-width: 800px) { .odc-vgrid { grid-template-columns: 1fr; } .odc-yt { grid-template-columns: 1fr 1fr; } }
.odc-h3 { margin: 6px 0 10px; font-size: 16px; }
.odc-boxrm { border: 0; background: none; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.odc-boxrm:hover { background: var(--red-soft); color: var(--red); }
.odc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.odc-stat { margin-left: auto; font-style: normal; white-space: nowrap; }
@media (max-width: 700px) { .odc-stats { grid-template-columns: 1fr 1fr; } }
/* Reportes: barra de formato de las cajas de texto (negritas y viñetas). */
.rp-fmt { display: inline-flex; gap: 4px; margin: 2px 0 6px; }
.rp-fmt button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; min-width: 32px; justify-content: center; }
.rp-fmt button:hover { background: var(--fill); }
.rp-fmt button b { font-size: 14px; }
/* Reportes · Contenido: vista general con una tarjeta por lámina. */
.tp-ovhint { margin: 0 0 10px; }
.tp-ov { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tp-ovc { display: grid; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px; font: inherit; color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tp-ovc:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(19, 32, 60, .12); transform: translateY(-1px); }
.tp-ovc.lock { cursor: default; opacity: .75; }
.tp-ovc.lock:hover { border-color: var(--line); box-shadow: none; transform: none; }
.tp-ovc .tp-mini { width: 100%; }
.tp-ovtx { display: grid; gap: 2px; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.tp-ovtx .tp-n { grid-row: 1 / span 3; align-self: start; }
.tp-ovtx b { font-size: 14px; }
.tp-ovtx .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ovst { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--orange-text); }
.tp-ovst.ok { color: var(--green-text); }
.tp-tab.tp-all { padding: 5px 12px; gap: 6px; }
.tp-ovc .tp-mini.sm { width: 100%; }
.tp-ovtx .tp-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.tp-edhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 10px; flex-wrap: wrap; }
.tp-edhead .btn { padding-left: 0; }
.tp-edhead b { color: var(--text); font-weight: 600; }
.rp-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--fill); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; flex-wrap: wrap; }
.rp-titlebar b { font-size: 14px; line-height: 1.35; min-width: 0; }
.rp-reread { display: inline-flex; align-items: center; gap: 6px; background: var(--card) !important; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.rp-reread:hover { border-color: var(--accent); }
/* ---------- On the Books · Consultor ---------- */
.otb-bar .otb-cut { display: inline-flex; align-items: center; gap: 8px; }
.otb-bar .otb-cut select { max-width: 280px; }
.otb-tiles b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.otb-tiles small { font-size: 12px; }
.otb-view .pos { color: var(--green-text); }
.otb-view .neg, .otb-dlg .neg { color: var(--red); }
.otb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 18px; }
.otb-card { display: grid; gap: 8px; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px 14px; font: inherit; color: var(--text); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.otb-card:hover { box-shadow: 0 4px 16px rgba(19, 32, 60, .1); transform: translateY(-1px); }
.otb-card.alta { border-left-color: var(--red); }
.otb-card.media { border-left-color: var(--orange); }
.otb-card p { margin: 0; font-size: 13px; color: var(--muted); }
.otb-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.otb-ch b { font-size: 14.5px; }
.otb-pri { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; background: var(--fill); color: var(--muted); }
.otb-pri.alta { background: var(--red-soft); color: var(--red); }
.otb-pri.media { background: var(--orange-soft); color: var(--orange-text); }
.otb-pri.baja { background: #eef3fb; color: #2a5ea8; }
.otb-pri.ok { background: var(--green-soft); color: var(--green-text); }
.otb-ev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: var(--fill); border-radius: 10px; padding: 8px; }
.otb-ev span { display: grid; gap: 1px; min-width: 0; }
.otb-ev small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otb-ev b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.otb-t td, .otb-t th { text-align: right; padding: 8px 10px !important; }
.otb-t td.odc-c0, .otb-t th.odc-c0 { text-align: left; min-width: 230px; }
.otb-t tbody tr[data-otbh] { cursor: pointer; }
.otb-t tbody tr[data-otbh]:hover td { background: #f7f8fb; }
.otb-t tr.otb-tot td { font-weight: 700; background: #eef1f6; }
.otb-foot { margin: 8px 0 30px; }
.otb-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.otb-dlg h4 { margin: 8px 0 0; font-size: 14px; }
.otb-dh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.otb-kg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .otb-kg, .otb-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.otb-k { background: var(--fill); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.otb-k span { font-size: 11.5px; color: var(--muted); }
.otb-k b { font-size: 16px; font-variant-numeric: tabular-nums; }
.otb-k small { font-size: 11.5px; color: var(--muted); }
.otb-chg { margin: 0; background: #eef3fb; border-radius: 10px; padding: 8px 10px; }
.otb-sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.otb-sig li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--fill); border-left: 3px solid #c9ced8; font-size: 13px; }
.otb-sig li.alta { border-left-color: var(--red); }
.otb-sig li.media { border-left-color: var(--orange); }
.otb-sig li.positiva { border-left-color: var(--green); }
.otb-sig li span { color: var(--muted); }
.otb-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.otb-segs div { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; background: var(--fill); border-radius: 8px; padding: 6px 10px; }
.otb-segs b { font-variant-numeric: tabular-nums; }
.otb-segs em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.otb-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@media (max-width: 560px) { .otb-rules { grid-template-columns: 1fr; } }
.otb-view .t-pos, .otb-dlg .t-pos { color: var(--green-text); }
.otb-view .t-neg, .otb-dlg .t-neg { color: var(--red); }
.otb-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.otb-drop { display: grid; gap: 4px; justify-items: center; width: 100%; border: 2px dashed #c7c7cc; border-radius: 16px; padding: 28px 16px; background: #fafafc; font: inherit; color: var(--text); cursor: pointer; margin-top: 10px; }
.otb-drop span { font-size: 12.5px; color: var(--muted); }
.otb-drop:hover { border-color: var(--accent); background: #eef3fb; }
.otb-drop.slim { padding: 10px 16px; margin: 0 0 12px; grid-auto-flow: column; justify-content: center; gap: 10px; align-items: baseline; }
.otb-view.otb-over .otb-drop { border-color: var(--accent); background: #eef3fb; }
.otb-view.otb-over { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 16px; }
/* ---------- On the Books v2: lectura sencilla (fotos, semáforo, frases claras) ---------- */
.otb-bar { justify-content: space-between; }
.otb-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: linear-gradient(135deg, #13203c, #24365e); color: #fff; border-radius: 20px; padding: 22px 24px; margin-bottom: 20px; }
.otb-hero .muted { color: rgba(255, 255, 255, .7); }
.otb-hero h3 { margin: 4px 0 6px; font-size: 22px; line-height: 1.25; }
.otb-hero p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .85); line-height: 1.5; }
.otb-hero p b { color: #fff; }
.otb-hero-st { display: flex; gap: 10px; }
.otb-hero-st .st { background: rgba(255, 255, 255, .1); border-radius: 14px; padding: 12px 14px; min-width: 92px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.otb-hero-st .ic svg { width: 22px; height: 22px; }
.otb-hero-st .st.red .ic { color: #ff8a80; } .otb-hero-st .st.amber .ic { color: #ffcf66; } .otb-hero-st .st.green .ic { color: #7ee2a8; }
.otb-hero-st b { font-size: 26px; line-height: 1; }
.otb-hero-st small { font-size: 12px; color: rgba(255, 255, 255, .8); }
@media (max-width: 760px) { .otb-hero { grid-template-columns: 1fr; } .otb-hero-st .st { flex: 1; min-width: 0; } }
.otb-gh { display: flex; align-items: center; gap: 8px; }
.otb-gh .dot, .otb-sem i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.red, .otb-sem.red i { background: #e34948; } .dot.amber, .otb-sem.amber i { background: #eda100; } .dot.green, .otb-sem.green i { background: #1baf7a; }
.otb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 22px; }
.otb-hc { display: grid; grid-template-rows: auto 1fr; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 0; overflow: hidden; font: inherit; color: var(--text); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.otb-hc:hover { box-shadow: 0 10px 28px rgba(19, 32, 60, .14); transform: translateY(-2px); }
.otb-ph { position: relative; height: 128px; display: grid; place-items: center; overflow: hidden; color: rgba(255, 255, 255, .9); }
.otb-ph.big { height: 190px; border-radius: 14px; margin-bottom: 4px; }
.otb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otb-ph.b-nhc { background: linear-gradient(135deg, #1c1c1c, #4a3f2a); }
.otb-ph.b-nh { background: linear-gradient(135deg, #0d4f3c, #2f8f6f); }
.otb-ph.b-avani { background: linear-gradient(135deg, #0f5e66, #3fb3b5); }
.otb-ph.b-hilton { background: linear-gradient(135deg, #0b2a5b, #2f63b3); }
.otb-ph.b-otro { background: linear-gradient(135deg, #13203c, #4a6496); }
.otb-phic svg { width: 46px; height: 46px; opacity: .85; }
.otb-phb { position: absolute; left: 14px; bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.otb-hcb { padding: 14px 16px 14px; display: grid; gap: 10px; align-content: start; }
.otb-hct { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.otb-hct b { display: block; font-size: 15.5px; line-height: 1.25; }
.otb-hct small { font-size: 12px; }
.otb-sem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.otb-sem.red { background: #fdecec; color: #b42d2c; } .otb-sem.amber { background: #fff4dc; color: #8a5a00; } .otb-sem.green { background: #e6f6ee; color: #137a52; }
.otb-vd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.otb-vd.big { font-size: 16px; }
.otb-fill { display: grid; gap: 6px; }
.otb-fillt { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.otb-fillt b { color: var(--text); }
.otb-bar1 { position: relative; height: 10px; border-radius: 999px; background: #eef0f4; }
.otb-bar1 i.cur { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #2a78d6; }
.otb-bar1 .mk { position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px; transform: translateX(-1.5px); }
.otb-bar1 .mk.ly { background: #8a8984; }
.otb-bar1 .mk.goal { background: #13203c; }
.otb-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.otb-leg span { display: inline-flex; align-items: center; gap: 5px; }
.otb-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.otb-leg i.ly { width: 3px; height: 12px; background: #8a8984; } .otb-leg i.goal { width: 3px; height: 12px; background: #13203c; }
.otb-leg i.now { background: #2a78d6; } .otb-leg i.ly2 { background: #cfd6e2; }
.otb-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.otb-why li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.4; color: var(--text); }
.otb-why .ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #eef3fb; color: #2a5ea8; }
.otb-why .ic svg { width: 14px; height: 14px; }
.otb-why li.bad .ic { background: #fdecec; color: #c0392b; }
.otb-why li.good .ic { background: #e6f6ee; color: #137a52; }
.otb-why.big li { font-size: 14px; }
.otb-more { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.otb-tech { margin: 10px 0 14px; }
.otb-tech > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 8px 0; }
.otb-dlg .otb-ph.big { margin: -4px -4px 0; }
.otb-phbtn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; margin-top: -2px; }
.otb-phbtn svg { width: 15px; height: 15px; }
.otb-sg { display: grid; gap: 8px; }
.otb-sgr { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 56px; gap: 10px; align-items: center; font-size: 13px; }
.otb-sgb { display: grid; gap: 3px; }
.otb-sgb i { display: block; height: 7px; border-radius: 0 4px 4px 0; min-width: 2px; }
.otb-sgb i.now { background: #2a78d6; } .otb-sgb i.ly { background: #cfd6e2; }
.otb-sgr b { text-align: right; font-variant-numeric: tabular-nums; }
.otb-budget { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.otb-budget > div { background: var(--fill); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.otb-budget span { font-size: 12px; color: var(--muted); }
.otb-budget b { font-size: 17px; }
.otb-budget .okb { background: #e6f6ee; } .otb-budget .okb b { color: #137a52; }
.otb-budget .neg { background: #fdecec; } .otb-budget .neg b { color: #b42d2c; }
.otb-chg { background: #eef3fb; border-radius: 10px; padding: 8px 12px; margin: 0; font-size: 13.5px; }
.otb-conf { margin: 4px 0 0; }
.otb-dlg { width: min(680px, calc(100vw - 24px)); }
.otb-dlg .otb-vd, .otb-hc .otb-vd { color: var(--text); }
.otb-tl { cursor: pointer; transition: box-shadow .15s, outline-color .15s; outline: 2px solid transparent; }
.otb-tl:hover { box-shadow: 0 4px 14px rgba(19, 32, 60, .1); }
.otb-tl.on { outline-color: var(--accent); }
.otb-xp { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: -2px 0 14px; display: grid; gap: 8px; }
.otb-xp h4 { margin: 4px 0 0; font-size: 14px; }
.otb-xp p { margin: 0; font-size: 14px; line-height: 1.5; }
.otb-xr { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; background: var(--fill); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.otb-xr:hover { background: #e8ebf2; }
.otb-xr span { color: var(--muted); font-size: 13px; text-align: right; }
.otb-xb { display: grid; grid-template-columns: minmax(140px, 28%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.otb-xb i { height: 10px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.otb-xb em { display: block; height: 100%; background: #2a78d6; border-radius: 999px; }
.otb-xb em.r { background: #e34948; }
.otb-xb b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.otb-tip { background: #eef3fb; border-radius: 10px; padding: 8px 12px; }
.otb-drop.over { border-color: var(--accent); background: #eef3fb; }
.otb-xp .otb-tip { background: #dcebfd; color: #17406f; border: 1px solid #c4dcf9; font-weight: 500; }
.otb-xp .otb-tip b { color: #0f2f57; }
.odc-t tr.odc-flash td { background: #fff4c2 !important; transition: background .6s; }

/* Briefs (solicitudes por /brief) */
.cal-btn { position: relative; }
.nav-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.brf-acts { display: flex; gap: 8px; flex-shrink: 0; }
.brf-acts a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.brf-tabs { margin-bottom: 14px; }
.brf-tabs small { color: var(--muted); font-weight: 400; margin-left: 2px; }
.brf-list { display: grid; gap: 8px; }
.brf-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; border: 0; background: var(--fill); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; }
.brf-row:hover { filter: brightness(.98); }
.brf-row.new { box-shadow: inset 3px 0 0 #2563c9; }
.brf-main { display: grid; gap: 3px; min-width: 0; }
.brf-main b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brf-main small, .brf-side small { color: var(--muted); font-size: 12.5px; }
.brf-side { display: grid; gap: 4px; justify-items: end; flex-shrink: 0; }
.brf-pill { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #ececf0; color: #4a4a55; }
.brf-pill.ok { background: #e7f6ef; color: #0f7a5c; }
.brf-pill.parcial { background: #fff4e0; color: #b45309; }
.brf-empty { padding: 20px 0; }
.brf-dlg { width: min(720px, calc(100vw - 32px)); max-width: none; display: grid; gap: 10px; }
.brf-dlg h3, .brf-dlg p { margin: 0; }
.brf-text { margin: 0; white-space: pre-wrap; font: inherit; font-size: 13.5px; line-height: 1.5; background: var(--fill); border-radius: 12px; padding: 14px; max-height: 60vh; overflow: auto; }
@media (max-width: 700px) { .brf-row { flex-direction: column; align-items: flex-start; } .brf-side { justify-items: start; } .brf-acts { flex-wrap: wrap; } }
.brf-ptag { justify-self: start; margin-bottom: 2px; }
.brf-chat { margin: 18px 0 6px; font-size: 13px; color: var(--muted); }
.brf-chat summary { cursor: pointer; font-weight: 600; color: var(--ink, inherit); margin-bottom: 8px; }
.brf-chat p { margin: 6px 0; line-height: 1.45; }
.tp-readbox { display: grid; gap: 8px; margin: 14px 0 4px; padding: 12px 14px; background: #f7f9fc; }
.tp-readbox > b { font-size: 14px; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rp-filters { display: flex; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .rp-filters select { flex: 1 1 100%; width: 100% !important; } }
.rp-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--fill); color: var(--muted); }
.rp-search input[type="search"] { flex: 1; border: 0 !important; background: none !important; outline: none; box-shadow: none !important; padding: 0 !important; font: inherit; font-size: 15px; color: inherit; min-width: 0; height: auto; }
.rp-filters select.rp-sentf { flex: 0 0 170px; width: 170px !important; min-width: 150px; }
.rp-filters select { flex: 0 0 260px; width: 260px !important; height: 42px; border-radius: 12px; border: 0; background: var(--fill); padding: 0 12px; font: inherit; font-size: 14px; min-width: 220px; }
.rp-none { padding: 18px 4px; }
/* Autoguardado del editor de reportes */
.rp-autosv { margin-left: auto; margin-right: 8px; font-size: 12.5px; color: var(--muted, #8a94a6); white-space: nowrap; }
.pv-open { color: #13213c; }
/* Escritorio: íconos agrupados por categoría (cada grupo abre su cajita) */
.nav-grps { display: none; }
@media (min-width: 701px) {
  .nav-grps { display: flex; gap: 8px; flex-shrink: 0; }
  .filter-row > #btnBoard, .filter-row > #btnCal, .filter-row > #btnArchive, .filter-row > #btnPeople, .filter-row > #btnAds, .filter-row > #btnProv,
  .filter-row > #btnReports, .filter-row > #btnOdc, .filter-row > #btnOtb, .filter-row > #btnPauta, .filter-row > #btnVideo, .filter-row > #btnNews, .filter-row > #btnLanding, .filter-row > #btnBanner, .filter-row > #btnVBanner, .filter-row > #btnVoice, .filter-row > #btnAi, .filter-row > #btnLib, .filter-row > #btnKb, .filter-row > #btnBrief, .filter-row > #btnBrand, .filter-row > .cfg-wrap { display: none; }
}
.ng-wrap { position: relative; display: inline-flex; }
.ng-wrap[hidden] { display: none; }
.cal-btn.ng-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px 0 12px; font: inherit; font-size: 14px; font-weight: 600; }
.cal-btn.ng-btn svg { width: 20px; height: 20px; }
.cal-btn.ng-btn .ng-chev { width: 15px; height: 15px; opacity: .7; }
.ng-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(19, 32, 60, .18); padding: 8px; }
.ng-pop[hidden] { display: none; }
.ng-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 10px; font: inherit; font-size: 14.5px; cursor: pointer; color: var(--text); }
.ng-item svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.ng-item:hover { background: var(--fill); }
.ng-item.on { background: var(--fill); font-weight: 600; }
/* Reservas: el botón al motor vive en su tablero; en escritorio Reservas va dentro de Finanzas */
.btn.bk-go { display: inline-flex; align-items: center; gap: 6px; background: #dde1e8; color: #13213c; border-color: #dde1e8; font-weight: 600; text-decoration: none; }
.btn.bk-go:hover { background: #cfd4dd; }
#app[data-view="book"] #bookGo { display: none; }
@media (min-width: 701px) { .filter-row > #btnBook { display: none; } }
.ms.ms-nest-target.ms-item-target::after { content: 'Soltar como ítem'; }
/* Ítems: botones gris oscuro con el ícono bien centrado; flecha para sacar el ítem como pendiente. */
.ms-item-ok { background: #3a3a3c; color: #fff; padding: 0; line-height: 0; }
.ms-item-ok svg { display: block; margin: auto; }
.ms-item-out { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; opacity: .6; display: grid; place-items: center; flex-shrink: 0; }
.ms-item-out svg { width: 15px; height: 15px; }
.ms-item-out:hover { opacity: 1; color: #3a3a3c; }

/* ---------- Brand Hub ---------- */
.bh-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.bh-side { position: sticky; top: 12px; display: grid; gap: 14px; }
.bh-pick { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 6px; background: #fff; }
.bh-pick select { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2313213c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 16px; }
.bh-pick select:focus { outline: none; }
.bh-ava { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--fill); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); }
.bh-ava img { width: 80%; height: 80%; object-fit: contain; }
.bh-ava b { font-size: 12px; color: var(--accent); }
.bh-ava.lg { width: 46px; height: 46px; }
.bh-nav { display: grid; gap: 2px; }
.bh-nav button { display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer; }
.bh-nav button:hover { background: var(--fill); }
.bh-nav button.on { background: #e9edf5; color: var(--accent); font-weight: 600; }
.bh-nav small { font-size: 12px; color: var(--muted); font-weight: 500; }
.bh-newbrand { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--line); background: transparent; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.bh-newbrand svg { width: 16px; height: 16px; }
.bh-newbrand:hover { background: var(--fill); }
.bh-main { min-width: 0; display: grid; gap: 34px; }
.bh-title { display: flex; align-items: center; gap: 12px; }
.bh-title h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.bh-busy { font-size: 13px; color: var(--muted); }
.bh-menuwrap { position: relative; margin-left: auto; }
.bh-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(19,32,60,.16); padding: 6px; min-width: 180px; display: grid; }
.bh-menu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; color: var(--text); }
.bh-menu button:hover { background: var(--fill); }
.bh-menu .danger { color: var(--red); }
.bh-namebox { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.bh-namebox input { flex: 1 1 260px; min-height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 16px; }
.bh-sechead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bh-sechead h3 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.bh-add { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--text); }
.bh-add svg { width: 18px; height: 18px; }
.bh-add:hover { background: var(--fill); }
.bh-add.sm { width: 30px; height: 30px; }
.bh-add.sm svg { width: 15px; height: 15px; }
.bh-ib { width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--muted); text-decoration: none; font-size: 15px; }
.bh-ib svg { width: 18px; height: 18px; }
.bh-ib:hover { background: var(--fill); color: var(--text); }
.bh-ib.on { color: #d4a017; }
.bh-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.bh-logo { display: grid; gap: 8px; min-width: 0; }
.bh-lprev { aspect-ratio: 4 / 3; border-radius: 14px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line);
  background-color: #fff; background-image: linear-gradient(45deg, #f1f2f5 25%, transparent 25%), linear-gradient(-45deg, #f1f2f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f2f5 75%), linear-gradient(-45deg, transparent 75%, #f1f2f5 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.bh-lprev.dark { background-color: #2b3445; background-image: linear-gradient(45deg, #343e50 25%, transparent 25%), linear-gradient(-45deg, #343e50 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #343e50 75%), linear-gradient(-45deg, transparent 75%, #343e50 75%); }
.bh-lprev img { max-width: 78%; max-height: 70%; object-fit: contain; }
.bh-ext { min-width: 64px; height: 44px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; padding: 0 10px; letter-spacing: .04em; }
.bh-ext.sm { min-width: 42px; height: 30px; font-size: 10.5px; border-radius: 7px; }
.bh-lmeta { display: grid; min-width: 0; }
.bh-lmeta b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-lmeta small { font-size: 12.5px; color: var(--muted); }
.bh-lacts { display: flex; gap: 2px; }
.bh-drop { display: grid; gap: 4px; place-items: center; text-align: center; border: 1.5px dashed var(--line); border-radius: 16px; padding: 34px 16px; cursor: pointer; background: #fafbfc; }
.bh-drop b { font-size: 15px; }
.bh-drop span { font-size: 13px; color: var(--muted); max-width: 440px; }
.bh-drop:hover { border-color: var(--accent); }
.bh-colors { display: flex; flex-wrap: wrap; gap: 22px; border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: #fff; }
.bh-color { border: 0; background: none; display: grid; justify-items: center; gap: 3px; cursor: pointer; font: inherit; min-width: 84px; color: var(--text); }
.bh-sw { width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); display: grid; place-items: center; margin-bottom: 6px; transition: transform .15s; }
.bh-color:hover .bh-sw { transform: scale(1.05); }
.bh-sw.add { background: conic-gradient(#ff4d4d, #ffcf33, #4dd36b, #33b5ff, #8a5cff, #ff4d9e, #ff4d4d); position: relative; }
.bh-sw.add svg { width: 26px; height: 26px; background: #fff; border-radius: 50%; padding: 4px; color: var(--text); }
.bh-color b { font-size: 13px; font-weight: 600; }
.bh-color small { font-size: 12px; color: var(--muted); }
.bh-cform, .bh-fform { margin-top: 14px; display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fafbfc; }
.bh-fform { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.4fr); }
.bh-cform label, .bh-fform label { display: grid; gap: 4px; min-width: 0; }
.bh-cform span, .bh-fform span { font-size: 12px; color: var(--muted); }
.bh-cform input, .bh-fform input, .bh-fform select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; min-width: 0; }
.bh-cpick input { width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.bh-cacts { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.bh-cacts .muted { margin-right: auto; }
.btn.danger-t { color: var(--red); margin-right: auto; }
.bh-fonts { display: grid; gap: 10px; }
.bh-font { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: #fff; }
.bh-ftxt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bh-ftxt small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.bh-ftxt b { font-size: 21px; font-weight: 600; }
.bh-ftxt span { font-size: 13.5px; color: var(--muted); }
.bh-ffiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bh-ffiles a { font-size: 12.5px; color: var(--accent); background: var(--fill); border-radius: 8px; padding: 3px 8px; text-decoration: none; }
.bh-ffiles button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; margin-left: -4px; }
.bh-empty { width: 100%; border: 1.5px dashed var(--line); border-radius: 16px; padding: 22px; background: #fafbfc; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; text-align: center; }
.bh-empty:hover { border-color: var(--accent); color: var(--text); }
.bh-docgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bh-docs { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff; display: grid; gap: 8px; align-content: start; }
.bh-dhead { display: flex; align-items: center; justify-content: space-between; }
.bh-dhead b { font-size: 15px; }
.bh-doc { display: flex; align-items: center; gap: 4px; }
.bh-doc > a:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 4px; border-radius: 10px; }
.bh-doc > a:first-child:hover { background: var(--fill); }
.bh-doc > a:first-child > span:last-child { display: grid; min-width: 0; }
.bh-doc b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-doc small { font-size: 12px; color: var(--muted); }
.bh-voice { display: grid; gap: 10px; }
.bh-voice textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 15px; resize: vertical; min-height: 120px; }
.bh-first { border: 1.5px dashed var(--line); border-radius: 18px; padding: 40px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; margin-top: 10px; }
.bh-first .bh-namebox { width: min(520px, 100%); }
@media (max-width: 860px) {
  .bh-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bh-side { position: static; }
  .bh-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .bh-nav button { flex-shrink: 0; padding: 8px 12px; background: var(--fill); gap: 6px; font-size: 14px; }
  .bh-newbrand { justify-self: start; }
  .bh-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bh-cform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-cform .bh-cpick { grid-column: 1 / -1; }
  .bh-fform, .bh-docgrid { grid-template-columns: minmax(0, 1fr); }
  .bh-colors { gap: 14px; padding: 16px; }
  .bh-sw { width: 58px; height: 58px; }
}
.bh-view { max-width: 1240px; }
/* ODC: cabeza de la tabla más amplia; bajo cada proveedor, su total y luego el número de ODC */
.odc-t thead tr.odc-headrow th { padding: 16px 10px 14px; vertical-align: bottom; }
.odc-t thead tr.odc-headrow th.odc-c0 { font-size: 12.5px; }
.odc-ph button { gap: 4px; }
.odc-ph button b { font-size: 13px; }
.odc-phtot { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.odc-ph button small { font-size: 10.5px; }
.odc-box .odc-t thead tr.odc-tot td { top: auto; }
/* ODC: sin barra horizontal; flechas en las orillas. Presupuesto fijo con su línea divisoria; montos en azul. */
.odc-swrap { position: relative; }
.odc-box .odc-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.odc-box .odc-scroll::-webkit-scrollbar { display: none; }
.odc-arr { position: absolute; z-index: 6; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #031F3F; display: none; place-items: center; cursor: pointer; box-shadow: 0 3px 10px rgba(3, 31, 63, .18); padding: 0; }
.odc-arr svg { width: 16px; height: 16px; }
.odc-arr:hover { background: #031F3F; color: #fff; border-color: #031F3F; }
.odc-arr.l { left: 459px; }
.odc-arr.r { right: 125px; }
.odc-arr.odc-at { top: 32px; }
.odc-arr.odc-ab { bottom: 42px; }
.odc-swrap.can-l .odc-arr.l, .odc-swrap.can-r .odc-arr.r { display: grid; }
.odc-box.closed .odc-arr { display: none !important; }
.odc-box .odc-t tr > :nth-child(3) { box-shadow: 1px 0 0 #c9ced8; }
@media (min-width: 900px) {
  .odc-box .odc-t tr > :nth-child(2):not([colspan]) { position: sticky; left: 300px; z-index: 2; }
  .odc-box .odc-t tr > :nth-child(3) { position: sticky; left: 364px; z-index: 2; box-shadow: 1px 0 0 #c9ced8, 4px 0 6px -2px rgba(3, 31, 63, .08); }
  .odc-box .odc-t thead tr > :nth-child(2), .odc-box .odc-t thead tr > :nth-child(3) { z-index: 3; }
  .odc-box .odc-t thead tr.odc-tot > td:nth-child(2) { position: sticky; left: 300px; z-index: 3; background: #eef1f6; }
  .odc-box .odc-t thead tr.odc-tot > td:nth-child(3) { position: sticky; left: 364px; z-index: 3; background: #eef1f6; }
}
@media (max-width: 899px) { .odc-arr.l { left: 285px; } }
.odc-box .odc-t tr.odc-sub > td, .odc-box .odc-t tr.odc-tot > td { background-clip: padding-box; }
.odc-cell input { color: #031F3F; font-weight: 500; }
.bh-fonts > .bh-fform { margin-top: 0; }
/* Brand Hub: lista desplegable propia, logo principal, filtro por propiedad y etiquetas */
.bh-dd { position: relative; }
.bh-ddbtn { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 6px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.bh-ddbtn > span:not(.bh-ava) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-ddbtn:hover { border-color: #c9ced8; }
.bh-ddchev { width: 16px; height: 16px; flex-shrink: 0; transition: transform .15s; }
.bh-dd.open .bh-ddchev { transform: rotate(180deg); }
.bh-ddpop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); min-width: 240px; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(19, 32, 60, .16); padding: 6px; display: grid; gap: 2px; }
.bh-ddpop button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.bh-ddpop button > span:not(.bh-ava) { flex: 1; min-width: 0; }
.bh-ddpop button:hover { background: var(--fill); }
.bh-ddpop button.on { font-weight: 600; }
.bh-ddpop button i { font-style: normal; color: var(--accent); font-weight: 700; }
.bh-ddpop .bh-ddnew { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 10px; color: var(--accent); font-weight: 600; }
.bh-ava.sm { width: 26px; height: 26px; }
.bh-ava.sm b { font-size: 10px; }
.bh-ava.add { background: var(--fill); border-style: dashed; }
.bh-ava.add svg { width: 14px; height: 14px; }
.bh-lfilter .bh-ddbtn, .bh-lfield .bh-ddbtn { border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; min-height: 38px; }
.bh-lfilter { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.bh-lfilter .bh-dd { flex: 1; }
.bh-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.bh-subhead > b { font-size: 15px; }
.bh-main-logo { display: flex; gap: 18px; align-items: center; }
.bh-lprev.big { width: 260px; flex-shrink: 0; }
.bh-mlinfo { display: grid; gap: 4px; min-width: 0; }
.bh-mlinfo small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bh-mlinfo b { font-size: 18px; }
.bh-mlacts { display: flex; gap: 8px; margin-top: 6px; }
.bh-mlacts .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.bh-mlacts .btn svg { width: 15px; height: 15px; }
.bh-drop.main { width: 100%; padding: 26px 16px; }
.bh-drop.slim { margin-top: 16px; padding: 16px; }
.bh-lrow { display: flex; align-items: flex-start; gap: 4px; }
.bh-lrow .bh-lmeta { flex: 1; }
.bh-logo .bh-menu a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--text); text-decoration: none; }
.bh-logo .bh-menu a:hover { background: var(--fill); }
.bh-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.bh-tags span { font-size: 11.5px; background: var(--fill); color: var(--text); border-radius: 6px; padding: 2px 7px; }
.bh-lform { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fafbfc; }
.bh-lform label, .bh-lfield { display: grid; gap: 5px; min-width: 0; }
.bh-lform label > span, .bh-lfield > span { font-size: 12px; color: var(--muted); }
.bh-lform input { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; }
.bh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.bh-chips button.on { background: #031F3F; border-color: #031F3F; color: #fff; }
@media (max-width: 860px) { .bh-main-logo { flex-direction: column; align-items: stretch; } .bh-lprev.big { width: 100%; } .bh-lform { grid-template-columns: minmax(0, 1fr); } }
.bh-lfilter .bh-ddpop { left: auto; right: 0; }
/* ODC: cabezal con el total por proveedor de todas las secciones */
.odc-totbox .odc-t thead tr.odc-headrow th { background: #eef1f6; }
.odc-totbox .odc-t thead th.odc-c0 { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.odc-totbox th.odc-tb, .odc-totbox th.odc-left { vertical-align: bottom; }
.odc-totbox th.odc-tb small, .odc-totbox th.odc-left small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.odc-totbox th.odc-tb b { font-size: 15px; color: var(--text); }
.odc-totbox th.odc-left b { font-size: 15px; }
.odc-totbox .odc-phtot { font-size: 16px; }
.odc-totbox .odc-arr.odc-at { top: 50%; transform: translateY(-50%); }
/* ODC: Presupuesto y Restante centrados a media altura (Restante también a lo ancho) */
.odc-totbox th.odc-tb, .odc-totbox th.odc-left { vertical-align: middle; }
.odc-totbox th.odc-left { text-align: center; }
.odc-t thead tr.odc-headrow th.odc-c0, .odc-t thead tr.odc-headrow > th:nth-child(2), .odc-t thead tr.odc-headrow > th:nth-child(3), .odc-t thead tr.odc-headrow th.odc-left { vertical-align: middle; }
.odc-t thead tr.odc-headrow th.odc-left { text-align: center; }
/* ODC: el cabezal de totales se queda arriba al bajar (escritorio); columnas de proveedores que se arrastran */
.odc-totbox { position: relative; z-index: 12; will-change: transform; }
.odc-totbox.pinned { box-shadow: 0 10px 24px rgba(19, 32, 60, .14); }
#odcView th.odc-ph { cursor: grab; }
body.odc-colmoving, body.odc-colmoving * { cursor: grabbing !important; user-select: none; }
.odc-colghost { position: fixed; z-index: 100; pointer-events: none; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(3, 31, 63, .25); padding: 16px 10px 14px; display: grid; align-content: center; transform: rotate(-1.5deg); opacity: .95; }
.odc-colghost button { border: 0; background: none; font: inherit; display: grid; justify-items: end; gap: 4px; width: 100%; }
#odcView th.odc-coldrag { opacity: .35; }
#odcView th.odc-drop-l { box-shadow: inset 3px 0 0 #031F3F !important; }
#odcView th.odc-drop-r { box-shadow: inset -3px 0 0 #031F3F !important; }
/* ---------- Configuración: una columna centrada (como en el celular) ---------- */
.cf-wrap { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.cf-top h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.cf-top p { margin: 4px 0 6px; }
.cf-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cf-head { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 18px 20px; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cf-head > span { flex: 1; display: grid; gap: 2px; }
.cf-head b { font-size: 17px; }
.cf-head small { font-size: 13px; color: var(--muted); }
.cf-chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.cf-box.open .cf-chev { transform: rotate(180deg); }
.cf-body { padding: 4px 20px 20px; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.cf-add { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--line); border-radius: 14px; background: #fafbfc; padding: 14px; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); cursor: pointer; }
.cf-add span { font-size: 20px; line-height: 1; }
.cf-add:hover { border-color: var(--accent); }
.cf-gl { margin: 8px 2px 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cf-list { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cf-user { display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 12px 14px; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.cf-user:last-child { border-bottom: 0; }
.cf-user:hover { background: var(--fill); }
.cf-ava { width: 38px; height: 38px; border-radius: 50%; background: #031F3F; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.cf-ava.lg { width: 56px; height: 56px; font-size: 18px; }
.cf-ut { flex: 1; min-width: 0; display: grid; }
.cf-ut b { font-size: 15px; }
.cf-ut small, .cf-us small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-go { width: 16px; height: 16px; color: var(--muted); }
.cf-empty { text-align: center; padding: 8px 10px; }
.cf-form { display: grid; gap: 12px; }
.cf-form h4, .cf-h4 { margin: 4px 0 0; font-size: 16px; }
.cf-form label, .cf-field { display: grid; gap: 5px; }
.cf-form label > span, .cf-field > span { font-size: 12.5px; color: var(--muted); }
.cf-form input { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px; }
.cf-seg { display: flex; background: var(--fill); border-radius: 12px; padding: 3px; gap: 3px; }
.cf-seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 9px 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cf-seg button.on { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(19, 32, 60, .12); }
.cf-seg.wide { margin: 4px 0 6px; }
.cf-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cf-row:last-child { border-bottom: 0; }
.cf-row > span { display: grid; gap: 2px; min-width: 0; }
.cf-row b { font-size: 15px; font-weight: 600; }
.cf-row small { font-size: 12.5px; color: var(--muted); }
.cf-tg { position: relative; flex-shrink: 0; width: 40px; height: 24px; cursor: pointer; }
.cf-tg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cf-tg i { position: absolute; inset: 0; border-radius: 999px; background: #e3e5ea; transition: background .2s; pointer-events: none; }
.cf-tg i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.cf-tg input:checked + i { background: #34c759; }
.cf-tg input:checked + i::after { transform: translateX(16px); }
.cf-tg input:focus-visible + i { box-shadow: 0 0 0 3px rgba(52, 199, 89, .3); }
.cf-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cf-code { text-align: center; display: grid; gap: 8px; justify-items: center; }
.cf-code p { margin: 0; }
.cf-codev { font-size: 34px; letter-spacing: .18em; font-variant-numeric: tabular-nums; background: var(--fill); border-radius: 14px; padding: 12px 18px; color: #031F3F; }
.cf-back { justify-self: start; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent); cursor: pointer; padding: 0; }
.cf-prof { display: grid; gap: 14px; }
.cf-ptop { display: flex; align-items: center; gap: 14px; }
.cf-ptop > div { flex: 1; display: grid; }
.cf-ptop b { font-size: 19px; }
.cf-ptop small { font-size: 13px; color: var(--muted); }
.cf-chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.cf-chip.ok { background: #e8f8ec; color: #1e7b34; }
.cf-chip.off { background: #fdecec; color: #c0392b; }
.cf-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; background: #fafbfc; border-radius: 14px; padding: 14px; }
.cf-dl dt { font-size: 12px; color: var(--muted); }
.cf-dl dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.cf-act { display: grid; gap: 8px; }
.cf-act > div { display: grid; gap: 2px; border-left: 2px solid var(--line); padding-left: 10px; }
.cf-act small { font-size: 12px; color: var(--muted); }
.cf-act span { font-size: 13.5px; }
.cf-bot { display: grid; gap: 4px; }
.cf-bot + .cf-bot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.cf-bhead { display: grid; gap: 2px; }
.cf-bhead b { font-size: 16px; }
.cf-bhead small { font-size: 13px; color: var(--muted); }
@media (min-width: 701px) { .filter-row > #btnSettings { display: grid; } .filter-row > #btnSettings[hidden] { display: none; } }
@media (max-width: 700px) { .filter-row > #btnSettings { display: none; } }
.hist .what.auto { color: var(--text); font-size: 13.5px; }
/* ODC: cabezal de totales (el KPI principal) en azul marino; Restante con su color de estado */
.odc-totbox { border-color: #031F3F; }
.odc-totbox .odc-t thead tr.odc-headrow th { background: #031F3F; color: #d5dce6; border-bottom-color: #031F3F; }
.odc-totbox .odc-t thead th.odc-c0 { color: #fff; box-shadow: 1px 0 0 rgba(255, 255, 255, .14); }
.odc-totbox .odc-t thead tr > :nth-child(3) { box-shadow: 1px 0 0 rgba(255, 255, 255, .22) !important; }
.odc-totbox th.odc-tb small, .odc-totbox th.odc-left small, .odc-totbox .odc-ph button small { color: #c3ccd8; }
.odc-totbox th.odc-tb b, .odc-totbox .odc-ph button b, .odc-totbox .odc-phtot { color: #fff; }
.odc-totbox .odc-ph button { color: #fff; }
.odc-totbox .odc-t thead th.odc-left { box-shadow: -1px 0 0 rgba(255, 255, 255, .14); }
.odc-totbox .odc-t thead th.odc-left.ok { background: #e3f5e8; color: #1e7b34; }
.odc-totbox .odc-t thead th.odc-left.over { background: #fff4c7; color: #1c1c1e; }
.odc-totbox .odc-t thead th.odc-left.neg { background: #fde3e1; color: #c62828; }
.odc-totbox .odc-t thead th.odc-left small { color: inherit; opacity: .75; }
.odc-totbox .odc-t thead tr.odc-headrow th.odc-c0 { color: #fff; }
/* ODC: el cabezal sin contorno azul; el Restante solo con un contorno fino de su color */
.odc-totbox { border: 0; }
.odc-totbox .odc-t thead th.odc-left.ok { box-shadow: inset 0 0 0 1px #b9e4c4 !important; }
.odc-totbox .odc-t thead th.odc-left.over { box-shadow: inset 0 0 0 1px #f0dc8a !important; }
.odc-totbox .odc-t thead th.odc-left.neg { box-shadow: inset 0 0 0 1px #f5b9b4 !important; }
.odc-totbox .odc-t thead th.odc-left { border-radius: 0 12px 12px 0; }
/* Escritorio: Filtros junto a los estados del tablero, con fondo gris; solo en el tablero */
.show-row > #btnFilters { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 12px; align-self: center; background: var(--fill); color: var(--accent); display: grid; place-items: center; position: relative; border: 0; }
.show-row > #btnFilters:hover { background: #e6e8ee; }
#app:not([data-view="board"]) .show-row > #btnFilters { display: none; }
/* Escritorio: el botón de lista / mosaico del mismo tamaño que Filtros (44 px, fondo gris) */
@media (min-width: 701px) {
  .show-row > #viewToggle { align-self: center; height: 44px; padding: 0; background: none; box-shadow: none; }
  .show-row > #viewToggle button.on { width: 44px; height: 44px; border-radius: 12px; background: var(--fill); display: grid; place-items: center; }
  .show-row > #viewToggle button.on:hover { background: #e6e8ee; }
  .show-row > #viewToggle svg { width: 20px; height: 20px; }
}

/* Agregar proveedor: botón redondo con + junto a la columna Restante. */
.odc-t thead th.odc-gap { padding: 4px 0; }
.odc-addprov { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #031F3F; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(3, 31, 63, .25); transition: transform .12s ease, background .12s ease; }
.odc-addprov:hover { background: #0a3566; transform: scale(1.08); }
.odc-addprov:active { transform: scale(.94); }
.odc-addprov:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }

/* Órdenes de compra en solo lectura (permiso de ver): sin botones para cambiar nada. */
.odc-ro .odc-imp, .odc-ro [data-addprov], .odc-ro .odc-add, .odc-ro [data-addsec], .odc-ro [data-boxrm], .odc-ro [data-rrm], .odc-ro .odc-dz,
.odc-ro [data-odcdel], .odc-ro [data-odcdeli], .odc-ro [data-odcblank], .odc-ro [data-odccopy] { display: none !important; }
.odc-ro .odc-t input, .odc-ro .odc-t select { cursor: default; }
.odc-ro .odc-t select { opacity: 1; color: inherit; -webkit-text-fill-color: currentColor; }
.odc-ro th.odc-ph button { cursor: default; }
.ro-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); background: #f1f2f5; border-radius: 999px; padding: 3px 10px; vertical-align: middle; }

/* Configuración → Usuarios: contenedores por tipo, empresas y permisos por persona. */
.cf-types { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cf-type { display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 14px; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.cf-type:last-child { border-bottom: 0; }
.cf-type:hover { background: var(--fill); }
.cf-tico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: #031F3F; }
.cf-tico svg { width: 22px; height: 22px; }
.cf-tico.t-agencia { background: #1877F2; }
.cf-tico.t-proveedor { background: #b8741a; }
.cf-tico.t-productora { background: #7B4DFF; }
.cf-ghead { display: grid; gap: 2px; }
.cf-ghead b { font-size: 20px; letter-spacing: -.01em; }
.cf-ghead small { font-size: 13px; color: var(--muted); }
.cf-org { display: grid; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.cf-ohead { display: flex; align-items: center; gap: 10px; }
.cf-ohead > span { flex: 1; display: grid; gap: 1px; }
.cf-ohead b { font-size: 16px; }
.cf-ohead small { font-size: 12.5px; color: var(--muted); }
.cf-oedit { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fill); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.cf-oedit:hover { color: var(--text); }
.cf-addp { justify-self: start; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 2px 0; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cf-chips button.on { background: #031F3F; border-color: #031F3F; color: #fff; }
.cf-form select { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px; background: #fff; }
.cf-perms { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 6px; display: grid; }
.cf-phead { display: grid; gap: 2px; margin-bottom: 6px; }
.cf-phead b { font-size: 16px; }
.cf-phead small { font-size: 12.5px; color: var(--muted); }
.cf-pcols, .cf-prow { display: grid; grid-template-columns: 1fr 48px 48px; align-items: center; column-gap: 12px; }
.cf-pcols small { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.cf-prow { padding: 11px 0; border-top: 1px solid var(--line); }
.cf-prow > span:first-child { display: grid; gap: 1px; min-width: 0; }
.cf-prow b { font-size: 14.5px; font-weight: 600; }
.cf-prow small { font-size: 12px; color: var(--muted); }
.cf-prow.off > span:first-child b { color: var(--muted); }
.cf-prow.sub { border-top: 0; padding-top: 0; padding-left: 14px; }
.cf-prow.sub b { font-size: 13.5px; }
.cf-prow.dis { opacity: .45; }
.cf-prow .cf-tg input:disabled { cursor: default; }

/* Pautas: enviar a la agencia. */
.pa-send { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pa-sent { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--green-text); }
.pa-sent svg { width: 13px; height: 13px; }
.pa-send-dlg { max-width: 460px; }
.pa-send-dlg .dialog-actions { flex-wrap: wrap; }
.pa-send-dlg .dialog-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pa-rcps { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 6px 0 4px; }
.pa-rcp { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pa-rcp:last-child { border-bottom: 0; }
.pa-rcp input { width: 18px; height: 18px; accent-color: #031F3F; flex-shrink: 0; }
.pa-rcp span { display: grid; min-width: 0; }
.pa-rcp b { font-size: 14.5px; }
.pa-rcp small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-send-dlg .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pa-send-dlg .dialog-actions .btn { flex: 0 0 auto; width: auto; }
@media (max-width: 520px) { .pa-send-dlg .dialog-actions .btn { flex: 1 1 auto; } }

/* Celular: en lugar del logotipo completo, solo la M (así el buscador respira). */
.logo-m { display: none; }
@media (max-width: 700px) {
  .logo-link .logo { display: none; }
  .logo-link .logo-m { display: block; width: 34px; height: 34px; color: #14223f; }
}
/* Mismo globito rojo en Briefs y en la campana. */
.nav-dot { box-shadow: 0 0 0 2px #fff; font-weight: 800; }
/* Globitos de Briefs y de la campana: idénticos (tamaño, letra, posición y contorno). */
.nav-dot, .bell-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; line-height: 20px; text-align: center;
  display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.nav-dot[hidden], .bell-badge[hidden] { display: none; }

/* Ver proyectos: número a la izquierda y el nombre pegado a la derecha (la palomita al final). */
.pick-show .pick-opt { grid-template-columns: auto minmax(0, 1fr) 22px; }
.pick-show .pick-opt em { order: 0; min-width: 26px; text-align: left; }
.pick-show .pick-opt span { order: 1; flex: 1; text-align: right; }
.pick-show .pick-opt svg, .pick-show .pick-opt i { order: 2; }

/* ---------- Video Studio ---------- */
.rp-view.vs-view { max-width: 1280px; }
.vs-banner { background: #fff8e6; border: 1px solid #f3dfa6; color: #6b5300; border-radius: 14px; padding: 12px 14px; font-size: 14px; margin: 0 0 14px; }
.vs-banner.red { background: #fff1f0; border-color: #f5c2bd; color: #a3221a; }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vs-card { display: grid; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 18px; overflow: hidden; padding: 0; font: inherit; color: var(--text); cursor: pointer; box-shadow: 0 1px 3px rgba(19, 32, 60, .05); transition: transform .15s, box-shadow .15s; }
.vs-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(19, 32, 60, .1); }
.vs-th { aspect-ratio: 16 / 9; background: #0b1730; display: grid; place-items: center; overflow: hidden; }
.vs-th img { width: 100%; height: 100%; object-fit: cover; }
.vs-noth { color: #8a97ad; display: grid; place-items: center; width: 100%; height: 100%; }
.vs-ci { display: grid; gap: 3px; padding: 12px 14px 14px; }
.vs-ci b { font-size: 15.5px; }
.vs-ci small { color: var(--muted); font-size: 12.5px; }
.vs-cm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vs-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.vs-chip.gray { background: #f1f2f5; color: #6b7280; } .vs-chip.blue { background: #e8f0fe; color: #1a56c4; } .vs-chip.purple { background: #f1ebff; color: #6d3fd6; }
.vs-chip.teal { background: #e3f6f5; color: #0f766e; } .vs-chip.amber { background: #fff4d6; color: #8a5a00; } .vs-chip.green { background: #e6f6ea; color: #1e7b34; } .vs-chip.red { background: #fdecea; color: #b42318; }
.vs-back { border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent); cursor: pointer; padding: 0; margin: 6px 0 4px; }
.vs-phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.vs-phead h2 { margin: 0; }
.vs-phead p { margin: 3px 0 0; }
.vs-pacts { display: flex; align-items: center; gap: 8px; }
.vs-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 4px 0 14px; flex-wrap: wrap; }
.vs-steps li { display: flex; font-size: 13px; font-weight: 600; color: var(--muted); background: #f5f6f8; border-radius: 999px; }
.vs-steps li button { display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: inherit; padding: 5px 12px 5px 6px; border-radius: 999px; cursor: pointer; }
.vs-steps li button:hover { background: rgba(3, 31, 63, .06); }
.vs-steps i { width: 20px; height: 20px; border-radius: 50%; background: #e3e5ea; color: #6b7280; display: grid; place-items: center; font-style: normal; font-size: 11px; }
.vs-steps li.ok { color: #1e7b34; background: #eaf7ed; }
.vs-steps li.ok i { background: #34c759; color: #fff; }
.vs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.vs-tabs button { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 2.5px solid transparent; cursor: pointer; white-space: nowrap; }
.vs-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.vs-empty { padding: 18px 2px; }
.vs-mat { display: grid; gap: 14px; }
.vs-drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1.5px dashed #c9cfda; border-radius: 18px; padding: 16px 18px; background: #fafbfc; transition: border-color .15s, background .15s; }
.vs-drop.over { border-color: var(--accent); background: #eef2f8; }
.vs-drop > span { width: 42px; height: 42px; border-radius: 12px; background: #031F3F; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.vs-drop > div { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.vs-drop small { color: var(--muted); font-size: 12.5px; }
.vs-drop .btn { cursor: pointer; }
.vs-ups { display: grid; gap: 8px; }
.vs-up { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; }
.vs-up > span { flex: 1; display: grid; gap: 3px; min-width: 0; }
.vs-up b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-up small { color: var(--muted); font-size: 12px; }
.vs-prog { height: 6px; border-radius: 999px; background: #eceef2; overflow: hidden; }
.vs-prog span { display: block; height: 100%; background: linear-gradient(90deg, #031F3F, #2f5aa8); border-radius: 999px; transition: width .4s; }
.vs-proglbl { display: block; color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.vs-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.vs-file { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 8px; background: #fff; }
.vs-file.dup { opacity: .6; }
.vs-fth { position: relative; width: 96px; height: 58px; border-radius: 10px; overflow: hidden; border: 0; padding: 0; background: #0b1730; cursor: pointer; flex-shrink: 0; }
.vs-fth:disabled { cursor: default; }
.vs-fth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-fth i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .15s; }
.vs-fth:hover i { opacity: 1; }
.vs-fi { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vs-fi b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-fi small { color: var(--muted); font-size: 12px; }
.vs-fst { font-size: 12px; font-weight: 600; color: #6b7280; }
.vs-fst.ok { color: var(--green-text); } .vs-fst.red { color: #b42318; }
.vs-an { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: #fff; display: grid; gap: 10px; }
.vs-anh { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vs-anh > span { display: grid; gap: 3px; flex: 1; min-width: 240px; }
.vs-anh small { color: var(--muted); font-size: 13px; }
.vs-anh .btn, .vs-start .btn { display: inline-flex; align-items: center; gap: 6px; }
.vs-err { color: #b42318; font-size: 13.5px; margin: 0; }
.vs-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-cats span { font-size: 12.5px; background: #f1f2f5; border-radius: 999px; padding: 4px 10px; color: #3a4252; }
.vs-det summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.vs-scenes { display: grid; gap: 6px; max-height: 360px; overflow: auto; margin-top: 6px; }
.vs-scenes > div { display: grid; gap: 1px; border-left: 2px solid var(--line); padding-left: 10px; }
.vs-scenes small { color: var(--muted); font-size: 12px; }
.vs-scenes span { font-size: 13.5px; }
.vs-scenes em { color: #b45309; font-style: normal; }
.vs-tr { margin-top: 8px; }
.vs-tr p { margin: 4px 0; font-size: 13.5px; }
.vs-tr small { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.vs-start { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 34px 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: #6d3fd6; }
.vs-start h3 { margin: 4px 0 0; color: var(--text); }
.vs-start p { max-width: 520px; margin: 0; }
.vs-vers { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.vs-vers button { display: grid; text-align: left; gap: 1px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 7px 12px; font: inherit; cursor: pointer; white-space: nowrap; color: var(--text); }
.vs-vers button b { font-size: 13.5px; } .vs-vers button small { font-size: 11.5px; color: var(--muted); }
.vs-vers button.on { border-color: #031F3F; box-shadow: inset 0 0 0 1px #031F3F; }
.vs-vers .vs-addv { border-style: dashed; color: var(--accent); font-weight: 600; font-size: 13.5px; align-content: center; }
.vs-edit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.vs-main { display: grid; gap: 10px; min-width: 0; }
.vs-main > * { min-width: 0; }
.vs-player { background: #0b1730; border-radius: 16px; overflow: hidden; display: grid; place-items: center; width: 100%; }
.vs-player.r16x9 { aspect-ratio: 16 / 9; } .vs-player.r9x16 { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; width: 100%; } .vs-player.r1x1 { aspect-ratio: 1; max-width: 520px; margin: 0 auto; width: 100%; }
.vs-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vs-ph { display: grid; justify-items: center; gap: 6px; color: #8a97ad; }
.vs-pjob { min-height: 6px; }
.vs-strip { display: flex; gap: 3px; overflow-x: auto; padding: 4px 2px 8px; }
.vs-clip { flex: 0 0 auto; height: 64px; border-radius: 10px; border: 2px solid transparent; background: #24324d center / cover no-repeat; position: relative; cursor: pointer; padding: 0; font: inherit; color: #fff; overflow: hidden; }
.vs-clip.on { border-color: #ffb800; box-shadow: 0 0 0 2px rgba(255, 184, 0, .3); }
.vs-clip small { position: absolute; left: 4px; bottom: 3px; font-size: 10.5px; font-weight: 700; background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 1px 5px; }
.vs-clip em { position: absolute; inset: 4px 4px 18px; font-style: normal; font-size: 10.5px; line-height: 1.2; overflow: hidden; text-align: left; }
.vs-clip.image::after { content: 'FOTO'; position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: 800; background: rgba(0, 0, 0, .5); border-radius: 4px; padding: 1px 4px; }
.vs-tl-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--muted); }
.vs-insp { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: #fff; display: grid; gap: 10px; }
.vs-ih { display: grid; gap: 1px; } .vs-ih small { color: var(--muted); font-size: 12.5px; }
.vs-ig { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vs-ig label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.vs-ig label.wide { grid-column: 1 / -1; }
.vs-ig input[type=number], .vs-ig input[type=text], .vs-ig select { min-height: 40px; border: 0; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--text); background-color: var(--fill); }
.vs-ig input[type=color] { height: 40px; border: 0; border-radius: 10px; padding: 3px; background-color: var(--fill); }
.vs-ig select, .vs-text select { padding-right: 30px; background-position: right 11px center; cursor: pointer; }
.vs-ck { display: flex !important; align-items: center; gap: 6px; color: var(--text) !important; font-size: 14px !important; }
.vs-iacts { display: flex; gap: 6px; flex-wrap: wrap; }
.vs-texts { display: grid; gap: 6px; margin-top: 10px; }
.vs-text { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 112px 36px; gap: 6px; align-items: center; }
.vs-text input, .vs-text select { min-height: 38px; border: 0; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13.5px; min-width: 0; background-color: var(--fill); }
.vs-savebar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.vs-savebar span { margin-right: auto; font-size: 13.5px; color: #8a5a00; font-weight: 600; }
.vs-chat { position: sticky; top: 90px; border: 1px solid var(--line); border-radius: 18px; background: #fff; display: grid; grid-template-rows: auto minmax(160px, 46vh) auto auto; overflow: hidden; }
.vs-chath { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 1px; }
.vs-chath small { color: var(--muted); font-size: 12.5px; }
.vs-log { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vs-msg { max-width: 92%; border-radius: 14px; padding: 8px 11px; font-size: 13.5px; line-height: 1.45; background: #f2f3f6; align-self: flex-start; }
.vs-msg.me { background: #031F3F; color: #fff; align-self: flex-end; }
.vs-msg.err { background: #fdecea; color: #a3221a; }
.vs-msg small { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }
.vs-msg.typing { display: flex; align-items: center; gap: 4px; }
.vs-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa3b2; animation: vsdot 1.2s infinite; }
.vs-msg.typing i:nth-child(2) { animation-delay: .2s; } .vs-msg.typing i:nth-child(3) { animation-delay: .4s; }
.vs-msg.typing small { margin: 0 0 0 6px; }
@keyframes vsdot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.vs-sugs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; }
.vs-sugs button { flex: 0 0 auto; border: 1px solid var(--line); background: #fafbfc; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); }
.vs-ask { display: flex; gap: 8px; padding: 10px 12px 12px; align-items: flex-end; }
.vs-ask textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; font: inherit; font-size: 14px; min-height: 42px; }
.vs-ask .btn { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.vs-exps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 12px; align-items: start; }
.vs-exp { border: 1px solid var(--line); border-radius: 18px; background: #fff; display: grid; overflow: visible; }
.vs-ep { position: relative; height: 260px; background: #0b1424; border-radius: 17px 17px 0 0; display: grid; place-items: center; overflow: hidden; }
.vs-ep video { max-width: 100%; max-height: 100%; display: block; background: #000; }
.vs-ep video.r16x9 { width: 100%; aspect-ratio: 16 / 9; } .vs-ep video.r9x16 { height: 100%; aspect-ratio: 9 / 16; } .vs-ep video.r1x1 { height: 100%; aspect-ratio: 1; }
.vs-fmt { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); color: #031F3F; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; pointer-events: none; }
.vs-shape { display: inline-block; border: 1.8px solid currentColor; border-radius: 2.5px; }
.vs-shape.r16x9 { width: 16px; height: 9px; } .vs-shape.r9x16 { width: 8px; height: 14px; } .vs-shape.r1x1 { width: 11px; height: 11px; }
.vs-eb { display: grid; gap: 6px; padding: 12px 14px 14px; }
.vs-eb > small { color: var(--muted); font-size: 12.5px; } .vs-eb .ok { color: var(--green-text); font-weight: 600; }
.vs-et { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vs-et b { font-size: 15.5px; }
.vs-eacts { display: flex; gap: 8px; margin-top: 4px; } .vs-eacts .btn { flex: 1; justify-content: center; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.vs-eacts .btn small { font-weight: 500; opacity: .75; font-size: 12px; }
.vs-more { position: relative; }
.vs-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(3,31,63,.16); padding: 6px; display: grid; }
.vs-menu[hidden] { display: none; }
.vs-menu a, .vs-menu button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); padding: 9px 10px; border-radius: 9px; text-decoration: none; cursor: pointer; }
.vs-menu a:hover, .vs-menu button:hover { background: var(--fill); }
.vs-menu button { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; } .vs-menu button + button { border-radius: 9px; border-top: 0; }
.vs-eh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vs-eh > span { display: grid; gap: 2px; } .vs-eh small { color: var(--muted); font-size: 12.5px; }
.vs-dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.vs-dl { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; text-decoration: none; color: var(--text); }
.vs-dl:hover { background: var(--fill); }
.vs-dl span { display: grid; min-width: 0; } .vs-dl b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-dl small { color: var(--muted); font-size: 11.5px; }
.vs-deliver { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.vs-deliver .ok { color: var(--green-text); font-weight: 600; margin-right: auto; }
.vs-logl { display: grid; gap: 8px; }
.vs-logl > div { display: grid; gap: 1px; border-left: 2px solid var(--line); padding-left: 10px; }
.vs-logl small { color: var(--muted); font-size: 12px; } .vs-logl span { font-size: 14px; }
.vs-form { max-width: 620px; width: calc(100vw - 32px); max-height: 88vh; overflow-y: auto; }
.vs-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-form select, .vs-form textarea { width: 100%; }
.vs-fmts, .vs-tgl { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.vs-fmts label, .vs-tgl label { display: flex; align-items: center; gap: 6px; }
.vs-tgl { margin: 6px 0 4px; }
.vs-pv { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.vs-picks { display: grid; gap: 6px; max-height: 56vh; overflow-y: auto; margin-top: 8px; }
.vs-pick { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; background: #fff; font: inherit; cursor: pointer; color: var(--text); }
.vs-pick:hover { background: var(--fill); }
.vs-pick span { display: grid; gap: 1px; flex: 1; min-width: 0; } .vs-pick small { color: var(--muted); font-size: 12px; } .vs-pick em { font-style: normal; font-size: 12.5px; color: #4b5563; }
.vs-pick > em { color: var(--accent); font-weight: 600; }
.vs-pcat { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; width: 100%; }
@media (max-width: 900px) {
  .vs-edit { grid-template-columns: 1fr; }
  .vs-chat { position: static; grid-template-rows: auto minmax(140px, 40vh) auto auto; }
}
@media (max-width: 560px) {
  .vs-form .grid2 { grid-template-columns: 1fr; }
  .vs-text { grid-template-columns: 1fr 1fr 1fr; }
  .vs-text > input[data-vt="text"] { grid-column: 1 / -1; }
  .vs-text select, .vs-text .icon-btn { grid-column: span 1; }
  .vs-thead { display: none; }
  .vs-ep { height: 220px; }
  .vs-files { grid-template-columns: 1fr; }
}

#app[data-view="video"] .fab, #app[data-view="video"] #fabMenu { display: none; }

/* ODC por concepto escritas a mano (diálogo del proveedor) con semáforo como la tabla. */
.odc-dlg .odc-mhint { display: block; margin-top: 6px; line-height: 1.4; }
.odc-plan:empty { display: none; }
.odc-plan { display: grid; gap: 10px; margin: 4px 0 6px; }
.odc-psem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; background: #f5f6f8; color: #3a4252; border: 1px solid var(--line); }
.odc-psem b { color: #031F3F; }
.odc-psem .odc-pleft { margin-left: auto; font-weight: 700; }
.odc-psem.ok { background: #f3fbf5; border-color: #b9e4c4; } .odc-psem.ok .odc-pleft { color: #1e7b34; }
.odc-psem.over { background: #fff8ec; border-color: #f0dc8a; } .odc-psem.over .odc-pleft { color: #8a5a00; }
.odc-psem.neg { background: #fff1f0; border-color: #f5b9b4; } .odc-psem.neg .odc-pleft { color: #c62828; }
.odc-plines { display: grid; gap: 8px; }
.odc-pline { display: grid; grid-template-columns: auto minmax(0, 1fr) 130px auto; gap: 8px; align-items: center; }
.odc-pline input { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; min-width: 0; }
.odc-pline input[data-pk="amt"] { text-align: right; font-variant-numeric: tabular-nums; }
.odc-pn { font-size: 11.5px; font-weight: 800; color: #fff; background: #031F3F; border-radius: 7px; padding: 4px 7px; white-space: nowrap; }
.odc-pacts { display: flex; gap: 8px; flex-wrap: wrap; }
.odc-plannote { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.odc-sem { display: inline-block; margin-top: 4px; font-weight: 700; }
.odc-sem.over { color: #8a5a00; } .odc-sem.neg { color: #c62828; }
@media (max-width: 520px) { .odc-pline { grid-template-columns: minmax(0, 1fr) 110px auto; } .odc-pn { display: none; } }

/* Video Studio: formulario en dos pasos (mismo look que el resto: campos grises redondeados, chips y switches). */
.vs-pform { display: flex; flex-direction: column; max-width: 640px; width: calc(100vw - 32px); max-height: 88vh; padding: 0; overflow: hidden; }
.vs-fhead { padding: 22px 24px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.vs-fhead h3 { margin: 0; }
.vs-fsteps { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.vs-fsteps span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.vs-fsteps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--fill); color: var(--muted); }
.vs-fsteps .on { color: var(--accent); } .vs-fsteps .on i { background: #031F3F; color: #fff; }
.vs-fsteps .done { color: #1e7b34; } .vs-fsteps .done i { background: #34c759; color: #fff; }
.vs-fsteps b { flex: 1; height: 2px; background: var(--line); border-radius: 2px; max-width: 80px; }
.vs-fbody { padding: 18px 24px 6px; overflow-y: auto; display: grid; gap: 16px; }
.vs-pform .dialog-actions { padding: 12px 24px 20px; margin: 0; border-top: 1px solid var(--line); }
.vs-pform .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs-fld { display: grid; gap: 8px; margin: 0; }
.vs-fld > span, .vs-lbl { font-size: 13px; color: var(--muted); margin: 0 0 0 4px; }
.vs-fld > span small, .vs-lbl small { display: block; font-size: 12px; margin-top: 2px; color: #a1a1a6; }
.vs-pform textarea { min-height: 150px; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-chips button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; color: #3a4252; cursor: pointer; transition: background .15s, border-color .15s; }
.vs-chips button:hover { border-color: #c3c8d2; }
.vs-chips button.on { background: #031F3F; border-color: #031F3F; color: #fff; }
.vs-chips em { font-style: normal; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.vs-dur { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.vs-dur input[type=number] { color: var(--text); width: 110px; min-height: 44px; border: 0; border-radius: 12px; background: var(--fill); padding: 0 14px; font: inherit; font-size: 16px; outline: none; -moz-appearance: textfield; }
.vs-dur input[type=number]:focus { box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.vs-sws { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.vs-pform .cf-seg button { font-size: 14px; }
@media (max-width: 560px) {
  .vs-pform .grid2 { grid-template-columns: 1fr; }
  .vs-fhead, .vs-fbody { padding-left: 18px; padding-right: 18px; }
  .vs-pform .dialog-actions { padding: 12px 18px 18px; }
}

/* ODC por concepto: todo alineado al ancho del semáforo; si no cuadra (falta o sobra) va en rojo. */
.odc-psem.over, .odc-psem.neg { background: #fff1f0; border-color: #f5b9b4; }
.odc-psem.over .odc-pleft, .odc-psem.neg .odc-pleft { color: #c62828; }
.odc-pline { grid-template-columns: auto minmax(0, 1fr) 150px; }
.odc-pline input { border: 0; background-color: var(--fill); min-height: 44px; border-radius: 12px; padding: 0 14px; font-size: 15px; }
.odc-pcon { position: relative; min-width: 0; display: block; }
.odc-pcon input { width: 100%; padding-right: 40px; }
.odc-prm { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.odc-prm:hover { background: #e3e5ea; color: #c62828; }
@media (max-width: 520px) { .odc-pline { grid-template-columns: minmax(0, 1fr) 120px; } }

/* Video Studio: escoger proyecto con buscador */
.vs-tlist { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; margin: 8px 0 4px; padding: 2px; }
.vs-tlist button { display: grid; gap: 1px; text-align: left; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--fill); cursor: pointer; min-width: 0; }
.vs-tlist button b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-tlist button small { font-size: 12.5px; color: var(--muted); }
.vs-tlist button.on { background: #031F3F; color: #fff; }
.vs-tlist button.on small { color: rgba(255,255,255,.75); }
.vs-tlist button[hidden] { display: none; }

/* Video Studio: biblioteca, ajustes del montaje */
.vs-home { margin-top: -4px; }
.vs-dropb { display: flex; gap: 8px; flex-wrap: wrap; }
.vs-dropb .btn { display: inline-flex; align-items: center; gap: 6px; }
.vs-lib { display: grid; gap: 18px; }
.vs-lsec { display: grid; gap: 10px; }
.vs-lh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-lh span { display: grid; gap: 1px; } .vs-lh b { font-size: 16px; } .vs-lh small { color: var(--muted); font-size: 12.5px; }
.vs-lh .btn { cursor: pointer; }
.vs-lempty { background: var(--fill); border-radius: 12px; padding: 12px 14px; margin: 0; }
.vs-aa { font-size: 22px; color: #fff; font-family: Georgia, serif; }
.vs-dh { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 0; }
.vs-hint { margin: 0; }
.vs-gset { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; display: grid; gap: 10px; margin-top: 10px; }
.vs-gset h4 { margin: 0; font-size: 15px; }
.vs-gset .vs-texts { margin-top: 0; }
.vs-thead { font-size: 12px; color: var(--muted); font-weight: 600; }
.vs-thead span { padding-left: 2px; }
.vs-color { display: flex; align-items: center; gap: 8px; background: var(--fill); border-radius: 10px; padding: 0 10px 0 4px; min-height: 40px; color: var(--text); font-size: 13.5px; }
.vs-color input[type=color] { width: 34px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.vs-vers .vs-hist { margin-left: auto; border: 0; background: var(--fill); color: var(--text); font-weight: 600; font-size: 13px; align-content: center; }

/* ---------- Newsletters ---------- */
.nl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.nl-card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.nl-cmain { display: grid; width: 100%; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.nl-cth { height: 150px; background: #13213C; display: grid; place-items: center; overflow: hidden; }
.nl-cth img { width: 100%; height: 100%; object-fit: cover; }
.nl-cico { color: #8CCBF0; font-size: 42px; }
.nl-ci { display: grid; gap: 3px; padding: 12px 14px 14px; } .nl-ci b { font-size: 15.5px; } .nl-ci small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-cacts { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.nl-cacts .icon-btn { background: rgba(255,255,255,.92); }
.nl-view { max-width: none; }
.nl-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.nl-top .vs-back { margin: 0; }
.nl-name { flex: 1; min-width: 180px; max-width: 420px; font-size: 20px !important; font-weight: 700; background: transparent !important; padding: 6px 10px !important; min-height: 40px !important; }
.nl-name:focus { background: var(--fill) !important; }
.nl-st { font-size: 12.5px; color: var(--muted); min-width: 110px; }
.nl-acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.nl-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.nl-dlw { position: relative; }
.nl-dlm { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 270px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(3,31,63,.16); padding: 6px; display: grid; }
.nl-dlm[hidden] { display: none; }
.nl-dlm button { display: grid; gap: 1px; text-align: left; border: 0; background: none; font: inherit; padding: 9px 11px; border-radius: 10px; cursor: pointer; color: var(--text); }
.nl-dlm button:hover { background: var(--fill); } .nl-dlm small { color: var(--muted); font-size: 12px; }
.nl-ed { display: grid; grid-template-columns: 190px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.nl-pal { position: sticky; top: 90px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 18px; padding: 12px; background: #fff; }
.nl-pal > b { font-size: 15px; } .nl-pal > small { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.nl-pi { display: flex; align-items: center; gap: 10px; border: 0; background: var(--fill); border-radius: 11px; padding: 9px 10px; font: inherit; font-size: 14px; color: var(--text); cursor: grab; text-align: left; }
.nl-pi:hover { background: #e7e9ef; } .nl-pi:active { cursor: grabbing; }
.nl-pi i { width: 22px; height: 22px; border-radius: 6px; background: #031F3F; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.nl-canvas { background: #EEF0F3; border-radius: 20px; padding: 24px 16px 60px; min-height: 70vh; overflow-x: auto; }
.nl-mail { width: 600px; max-width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 6px 24px rgba(3,31,63,.08); min-height: 200px; }
.nl-b { position: relative; outline: 2px solid transparent; outline-offset: -2px; cursor: pointer; transition: outline-color .12s; }
.nl-b:hover { outline-color: rgba(18,74,124,.35); }
.nl-b.on { outline-color: #124A7C; z-index: 2; }
.nl-b.dragging { opacity: .35; }
.nl-bin > table { margin: 0 !important; }
.nl-bin img { max-width: 100%; }
.nl-tools { position: absolute; top: 6px; right: 6px; display: none; align-items: center; gap: 2px; background: #031F3F; color: #fff; border-radius: 10px; padding: 3px 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 3; }
.nl-b:hover .nl-tools, .nl-b.on .nl-tools { display: flex; }
.nl-tools em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 0 6px 0 2px; opacity: .85; }
.nl-tools button, .nl-grip { border: 0; background: none; color: #fff; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.nl-tools button:hover, .nl-grip:hover { background: rgba(255,255,255,.16); }
.nl-grip { cursor: grab; }
.nl-empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; margin: 8px 24px; border: 2px dashed #c9cfda; border-radius: 12px; color: #6b7280; font-size: 14px; background: #fafbfc; }
.nl-empty.big { min-height: 300px; }
.nl-line { height: 4px; background: #124A7C; border-radius: 2px; margin: -2px 0; position: relative; z-index: 5; }
.nl-insp { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #fff; display: grid; gap: 12px; }
.nl-ih { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nl-ih b { font-size: 16px; } .nl-ih small { color: var(--muted); font-size: 12.5px; display: block; }
.nl-ih:has(small) { display: grid; }
.nl-f { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0; }
.nl-f input, .nl-f select { font-size: 15px; min-height: 42px; padding: 9px 12px; }
.nl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nl-color { display: flex; align-items: center; gap: 8px; background: var(--fill); border-radius: 12px; padding: 0 10px 0 5px; min-height: 42px; }
.nl-color input[type=color] { width: 34px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; min-height: 0; }
.nl-color code { font-size: 13px; color: var(--text); font-weight: 500; }
.nl-ai { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-ai .btn { cursor: pointer; }
.nl-rich { border-radius: 12px; background: var(--fill); overflow: hidden; }
.nl-rtool { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid #e3e5ea; }
.nl-rtool button { border: 0; background: #fff; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.nl-rtool button:hover { background: #e9ecf1; }
.nl-rta { min-height: 130px; max-height: 340px; overflow-y: auto; padding: 10px 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 15.5px; line-height: 1.5; outline: none; color: var(--text); }
.nl-rta p { margin: 0 0 10px; } .nl-rta ul, .nl-rta ol { margin: 0 0 10px; padding-left: 22px; }
.nl-rta:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.nl-slots { display: grid; gap: 8px; }
.nl-slot { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 92px; border: 2px dashed #c9cfda; border-radius: 12px; background: #fafbfc; color: #6b7280; font-size: 13px; cursor: pointer; overflow: hidden; text-align: center; padding: 8px; }
.nl-slot.over { border-color: #124A7C; background: #eef2f8; }
.nl-slot.has { border-style: solid; border-color: var(--line); padding: 0; background: #f1f2f5; }
.nl-slot img { width: 100%; max-height: 180px; object-fit: contain; display: block; }
.nl-slotx { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(3,31,63,.8); color: #fff; cursor: pointer; }
.nl-dialog { max-width: 560px; }
.nl-dialog textarea { width: 100%; }
.nl-cpfiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .nl-cpfiles span { background: var(--fill); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.nl-shot { position: fixed; left: -10000px; top: 0; width: 600px; background: #fff; }
@media (max-width: 1100px) {
  .nl-ed { grid-template-columns: 160px minmax(0, 1fr); }
  .nl-insp { grid-column: 1 / -1; position: static; max-height: none; order: 3; }
}
@media (max-width: 700px) {
  .nl-ed { grid-template-columns: 1fr; }
  .nl-pal { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 10px; gap: 6px; } .nl-pal > b, .nl-pal > small { display: none; }
  .nl-pi { flex: 0 0 auto; white-space: nowrap; }
  .nl-name { max-width: none; width: 100%; flex-basis: 100%; }
  .nl-canvas { padding: 12px 6px 30px; }
  .nl-acts { margin-left: 0; width: 100%; } .nl-acts .btn { flex: 1; justify-content: center; }
  .nl-b:hover .nl-tools { display: none; } .nl-b.on .nl-tools { display: flex; }
}

/* El texto de referencia (placeholder) desaparece al tocar el campo. */
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }
[contenteditable]:focus:empty::before { content: none; }
.nl-cpdrop { display: flex; align-items: center; gap: 12px; border: 2px dashed #c9cfda; border-radius: 14px; padding: 14px 16px; margin: 10px 0 6px; background: #fafbfc; cursor: pointer; font-size: 22px; transition: border-color .15s, background .15s; }
.nl-cpdrop span { display: grid; gap: 1px; font-size: 14px; } .nl-cpdrop small { color: var(--muted); font-size: 12.5px; }
.nl-cpdrop.over { border-color: #124A7C; background: #eef2f8; }
.nl-cpfiles button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 0 0 4px; }

/* ---------- Landing pages (editor) ---------- */
.lp-cv { padding: 20px 14px 60px; }
.lp-canvas { width: 100%; max-width: 1000px; }
.lp-canvas .lp-hero.l { min-height: 520px; }
.lp-live { color: #1e8e4e; font-weight: 700; font-size: 12.5px; }
.lp-pub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eaf7ef; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.lp-pub a { color: #124A7C; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; word-break: break-all; }
.lp-slug { display: flex; align-items: center; background: var(--fill); border-radius: 12px; overflow: hidden; }
.lp-slug span { padding: 0 2px 0 14px; color: var(--muted); font-size: 15px; white-space: nowrap; }
.lp-slug input { background: transparent !important; padding-left: 2px !important; font-weight: 600; }
.lp-see { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.lp-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; } .lp-or::before, .lp-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.lp-vup { cursor: pointer; justify-content: center; } .lp-vfile { display: flex; align-items: center; justify-content: space-between; background: var(--fill); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.nl-warn { margin: 0; font-size: 12.5px; color: #a3460f; background: #fff3e6; border-radius: 10px; padding: 8px 10px; }
.nl-f em { font-style: normal; color: var(--text); }
.nl-f input[type=range] { min-height: 0; padding: 0; }
.nl-brand { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.nl-brand small { font-size: 12px; }
.nl-sw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.nl-sw button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.nl-sw button:hover { transform: scale(1.12); }
.nl-f input[type=url], .nl-f input[type=number] { width: 100%; border: 0; border-radius: 12px; background-color: var(--fill); outline: none; -webkit-appearance: none; appearance: none; }
.nl-f input[type=url]:focus, .nl-f input[type=number]:focus { background-color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
/* Categorías del menú de arriba: solo el ícono (el nombre sale al pasar el cursor y en la cajita). */
.cal-btn.ng-btn { gap: 0; padding: 0; width: 44px; justify-content: center; }
.cal-btn.ng-btn .ng-lbl, .cal-btn.ng-btn .ng-chev { display: none; }
/* Interruptor 🔥 de alertas (junto al buscador) */
.hot-toggle { position: relative; flex-shrink: 0; width: 46px; height: 12px; margin: 0 8px; border: 0; border-radius: 999px; background: var(--red, #ff3b30); cursor: pointer; padding: 0; transition: background .2s; align-self: center; overflow: visible; }
/* La perilla sobresale de la barrita y tapa su orilla del lado donde topa. */
.hot-toggle .hot-knob { position: absolute; top: 50%; right: -3px; left: auto; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.28); display: grid; place-items: center; font-size: 13px; line-height: 1; transition: right .2s; }
.hot-toggle[aria-checked="false"] { background: #c7c7cc; }
.hot-toggle[aria-checked="false"] .hot-knob { right: calc(100% - 21px); }
@media (max-width: 700px) { .hot-toggle { display: none; } }
/* Alertas apagadas: sin colores de antigüedad ni contornos de fecha */
body.calm .card.age-old, body.calm .card.age-mold, body.calm .card.age-rot { background: #fff; border-color: var(--line); box-shadow: none; }
body.calm .card.age-old::after, body.calm .card.age-mold::after, body.calm .card.age-rot::after { display: none; }
body.calm .card.due-1, body.calm .card.due-2, body.calm .card.due-3 { outline: none; }

/* Enfoque 🔥: lo que no vence pronto queda difuminado (al pasar el cursor se ve normal). */
.card.dimmed { opacity: .38; filter: blur(1.2px) saturate(.6); transition: opacity .2s, filter .2s; }
.card.dimmed:hover, .card.dimmed.open { opacity: 1; filter: none; }
.hot-toggle[hidden] { display: none; }
.bh-fnofile { color: #a3460f; font-size: 12.5px; }
.bh-fup { color: var(--navy, #13213C); }
.bh-fup.on { background: var(--fill); color: var(--navy, #13213C); }
.bh-font[draggable="true"] { cursor: grab; }
.bh-font.dragging { opacity: .45; }
.bh-font.dropto { box-shadow: 0 -3px 0 #13213C; }
.bh-grip { color: #c3c8d0; display: grid; place-items: center; margin-left: -6px; }
.bh-grip svg { width: 16px; height: 16px; }
.bh-font:hover .bh-grip { color: var(--muted); }
.bh-fdrop { padding: 22px 16px; margin-top: -2px; }
.bh-fdrop.over { border-color: #13213C; background: #eef2f8; }
.nl-insp { min-width: 0; overflow-x: hidden; grid-template-columns: minmax(0, 1fr); }
.nl-insp .nl-f, .nl-insp .nl-f select, .nl-insp .nl-f input { min-width: 0; max-width: 100%; }
.nl-insp .nl-f select { width: 100%; text-overflow: ellipsis; padding-right: 36px; }
.nl-insp > .btn { white-space: normal; max-width: 100%; }
.bh-fchip { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.bh-fchip button { margin-left: 0; }
.nl-tplbar { display: flex; justify-content: center; padding: 18px 0 6px; }
.nl-brand { display: grid; gap: 10px; }
.nl-color .nl-hex { border: 0; background: none; font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: #111; width: 100%; min-width: 0; min-height: 0; padding: 0; outline: none; text-transform: uppercase; }
.nl-sw .nl-eye { display: grid; place-items: center; background: #fff !important; border: 1px solid var(--line) !important; color: #13213C; cursor: pointer; padding: 0; }
.nl-sw .nl-eye svg { width: 60%; height: 60%; }
.nl-sw .nl-eye:hover { background: var(--fill) !important; }
.nl-insp .nl-f select, .nl-insp .nl-f input, .nl-insp .nl-rta { color: #111; }
.nl-color .nl-hex:focus { box-shadow: none; background: none; }
.nl-ideas { display: grid; gap: 6px; }
.nl-idea { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; color: #111; cursor: pointer; }
.nl-idea:hover { border-color: #13213C; background: var(--fill); }
.nl-idea-x { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; justify-self: start; padding: 2px 0; }
.nl-view[data-mode="list"] { max-width: 1280px; padding: 18px 40px 140px; }
@media (max-width: 700px) { .nl-view[data-mode="list"] { padding: 10px 16px 140px; } }
.nl-tools2 { display: flex; gap: 10px; align-items: center; margin: 4px 0 16px; }
.nl-search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--fill); border-radius: 12px; padding: 0 12px; min-height: 42px; color: var(--muted); }
.nl-search svg { width: 18px; height: 18px; flex: none; }
.nl-search input { border: 0; background: none; outline: none; font: inherit; font-size: 15px; color: #111; width: 100%; min-height: 40px; padding: 0; }
.nl-lay { display: flex; background: var(--fill); border-radius: 12px; padding: 3px; gap: 2px; }
.nl-lay button { width: 38px; height: 36px; border: 0; border-radius: 9px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.nl-lay button svg { width: 18px; height: 18px; }
.nl-lay button.on { background: #fff; color: #13213C; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.nl-none { padding: 20px 4px; }
.nl-grid.nl-rows { grid-template-columns: 1fr; gap: 8px; }
.nl-rows .nl-card { display: flex; align-items: center; }
.nl-rows .nl-cmain { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.nl-rows .nl-cth { width: 96px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; margin: 8px 0 8px 8px; aspect-ratio: auto; }
.nl-rows .nl-cth img { width: 100%; height: 100%; object-fit: cover; }
.nl-rows .nl-ci { padding: 8px 0; }
.nl-rows .nl-cacts { position: static; padding-right: 12px; display: flex; gap: 6px; opacity: 1; }
.nl-search input:focus { box-shadow: none !important; background: none !important; border: 0 !important; }
.nl-search:focus-within { background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
/* ---------- Banners ---------- */
.bn-view[data-mode="ed"] { max-width: none; padding: 4px 16px 140px; }
.bn-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.bn-tabs button { flex: none; border: 0; background: var(--fill); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.bn-tabs button.on { background: #13213C; color: #fff; }
.bn-ed { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.bn-stage { background: #eef0f4; border-radius: 22px; padding: 18px; min-height: 60vh; }
.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.bn-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bn-card.wide { grid-column: span 2; }
.bn-cv { display: block; width: 100%; border: 0; padding: 0; background: #dfe3ea; cursor: pointer; }
.bn-cv canvas { display: block; width: 100%; height: auto; }
.bn-cardf { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.bn-cardf span { flex: 1; min-width: 0; display: grid; } .bn-cardf b { font-size: 13px; } .bn-cardf small { color: var(--muted); font-size: 12px; }
.bn-ib { width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.bn-ib:hover { background: var(--fill); color: #13213C; } .bn-ib svg { width: 17px; height: 17px; }
.bn-badge { font-style: normal; font-size: 11px; font-weight: 700; color: #9a6b00; background: #fff4d6; border-radius: 6px; padding: 1px 6px; }
.bn-single { display: grid; gap: 12px; justify-items: center; }
.bn-cvwrap { width: 100%; background: #dfe3ea; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.bn-cvwrap canvas { display: block; width: 100%; height: 100%; cursor: move; touch-action: none; }
.bn-cvwrap canvas.photo { cursor: grab; outline: 3px solid #8CCBF0; }
.bn-singlef { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.bn-insp { gap: 4px; }
.bn-sec { display: grid; gap: 10px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.bn-sec:last-child { border-bottom: 0; }
.bn-sec h4 { margin: 0; font-size: 14.5px; }
.bn-seg { display: flex; background: var(--fill); border-radius: 12px; padding: 3px; gap: 2px; }
.bn-seg button { flex: 1; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 9px; padding: 8px 4px; cursor: pointer; }
.bn-seg button.on { background: #fff; color: #13213C; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bn-photos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; align-items: start; }
.bn-photo { position: relative; aspect-ratio: 16/10; border: 1.5px dashed var(--line); border-radius: 12px; background: #fafbfc; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 12.5px; cursor: pointer; overflow: hidden; }
.bn-photo.v { aspect-ratio: 4/5; }
.bn-photo.over { border-color: #13213C; background: #eef2f8; }
.bn-photo svg { width: 26px; height: 26px; }
.bn-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: crosshair; }
.bn-focus { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; }
.bn-photo .nl-slotx { position: absolute; top: 6px; right: 6px; }
.bn-txt { display: grid; gap: 8px; padding: 10px; background: #fafbfc; border-radius: 14px; }
.bn-txth { display: flex; align-items: center; gap: 8px; } .bn-txth b { font-size: 13.5px; flex: none; }
.bn-txt input[type=text], .bn-txt textarea { width: 100%; border: 0; border-radius: 12px; background: var(--fill); font: inherit; font-size: 15px; color: #111; padding: 10px 12px; outline: none; resize: vertical; }
.bn-font { flex: 1; min-width: 0; border: 0; border-radius: 10px; background: var(--fill); font: inherit; font-size: 12.5px; color: #111; padding: 6px 8px; }
.bn-fmts { display: grid; gap: 6px; } .bn-fmts label { display: flex; gap: 8px; align-items: center; font-size: 14px; } .bn-fmts small { color: var(--muted); margin-left: auto; }
.bn-adacts { display: flex; gap: 8px; flex-wrap: wrap; }
.bn-el { border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px 6px 12px; display: grid; gap: 8px; cursor: pointer; }
.bn-el.on { border-color: #3B82F6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.bn-elh { display: flex; align-items: center; gap: 6px; } .bn-elh b { flex: 1; font-size: 14px; }
@media (max-width: 1000px) { .bn-ed { grid-template-columns: 1fr; } .bn-card.wide { grid-column: auto; } }
.bn-photos { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.bn-insp .btn { white-space: normal; max-width: 100%; }
.bn-card.tall .bn-cv { display: flex; justify-content: center; }
.bn-card.tall .bn-cv canvas { width: auto; max-width: 100%; max-height: 460px; }
.cf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-notes { background: var(--fill); border-radius: 12px; padding: 12px 14px; font-size: 14px; white-space: pre-wrap; margin: 4px 0 10px; }
.cf-oname { cursor: pointer; display: grid; } .cf-oname:hover b { text-decoration: underline; }
.cf-ava.org { border-radius: 14px; background: #13213C; color: #fff; }
.acct-ov .dialog { max-width: 420px; }
.acct-ov label { display: grid; gap: 6px; margin: 10px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.acct-ov input { border: 0; border-radius: 12px; background: var(--fill); font: inherit; font-size: 15px; color: #111; padding: 11px 12px; outline: none; }
.cf-form textarea { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; }
.bn-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.bn-steps button { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 12px 14px; font: inherit; font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer; }
.bn-steps button i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.bn-steps button small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.bn-steps button.on { border-color: #13213C; color: #13213C; box-shadow: 0 0 0 3px rgba(19,33,60,.08); }
.bn-steps button.on i { background: #13213C; color: #fff; }
.bn-masters { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bn-mcol { display: grid; gap: 8px; justify-items: center; }
.bn-mhead { justify-self: stretch; display: grid; } .bn-mhead b { font-size: 14px; } .bn-mhead small { color: var(--muted); font-size: 12.5px; }
.bn-cvwrap { outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.bn-cvwrap.on { outline-color: rgba(59,130,246,.55); }
.bn-tip { text-align: center; margin: 14px 0 0; }
.bn-next { width: 100%; margin-top: 8px; }
.bn-fmtq { display: flex; gap: 8px; }
@media (max-width: 700px) { .bn-masters { grid-template-columns: 1fr; } .bn-steps button small { display: none; } }
.bn-insp .btn svg, .bn-singlef .btn svg { width: 16px; height: 16px; flex: none; } .bn-insp .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Botón que se llena mientras la IA trabaja */
.btn.filling { position: relative; overflow: hidden; isolation: isolate; }
.btn.filling::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: linear-gradient(90deg, #bfe9d6, #a6dfc6); z-index: -1; transition: width var(--fillT, 30s) cubic-bezier(.15, .75, .3, 1); }
.btn.filling::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 220% 100%; animation: fillShine 1.6s linear infinite; }
@keyframes fillShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.bn-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: crosshair; }
.bn-upl { display: grid; place-items: center; height: 100%; font-size: 13px; color: #0f6b4f; background: #e3f6ee; width: 100%; }
.bn-audio { margin: 2px 0; }
.bh-mains { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.bh-mains .bh-main-logo { flex-direction: column; align-items: stretch; }
.bh-mains .bh-lprev.big { width: 100%; }
@media (max-width: 700px) { .bh-mains { grid-template-columns: 1fr; } }
.bh-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bh-folder { display: grid; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.bh-folder:hover { border-color: #13213C; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.bh-fthumb { height: 110px; display: grid; place-items: center; background: repeating-conic-gradient(#f3f4f6 0 25%, #fff 0 50%) 0 0/16px 16px; color: var(--muted); }
.bh-fthumb.dark { background: #1d2433; }
.bh-fthumb img { max-width: 70%; max-height: 70%; object-fit: contain; }
.bh-fthumb svg { width: 42px; height: 42px; }
.bh-fname { display: grid; padding: 10px 12px; } .bh-fname b { font-size: 14px; } .bh-fname small { color: var(--muted); font-size: 12.5px; }
.bh-fback { border: 0; background: var(--fill); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-right: 8px; }

.bh-fdlg { width: min(420px, calc(100vw - 32px)); }
.bh-fopts { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; background: var(--fill); border-radius: 14px; padding: 6px; margin-top: -2px; }
.bh-fopt { border: 0; background: transparent; text-align: left; font: inherit; font-size: 15px; color: var(--text, #1d1d1f); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.bh-fopt:hover { background: rgba(0,0,0,.05); }
.bh-fopt.on { background: var(--accent); color: #fff; font-weight: 600; }
.bh-fempty { padding: 10px 12px; font-size: 14px; color: var(--muted); }

/* Selector de logos del Brand Hub (Newsletters, Landing, Banners) */
.bk-lbtn { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: var(--fill); border-radius: 14px; padding: 8px 12px 8px 8px; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.bk-lprev { width: 64px; height: 44px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: repeating-conic-gradient(#eceef1 0 25%, #fff 0 50%) 0 0/12px 12px; overflow: hidden; }
.bk-lprev.dark { background: #1d2433; }
.bk-lprev img { max-width: 86%; max-height: 80%; object-fit: contain; }
.bk-ltxt { flex: 1; min-width: 0; display: grid; }
.bk-ltxt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ltxt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lgo { font-size: 13px; font-weight: 600; color: var(--accent); }
.dialog.bk-pick { max-width: none; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 12px; }
.bk-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-pbody { overflow-y: auto; display: grid; gap: 12px; min-height: 0; }
.bk-pfoot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bk-grp > span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip { border: 0; background: var(--fill); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.bk-chip.on { background: #13213C; color: #fff; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bk-cell { border: 2px solid transparent; background: #fff; border-radius: 14px; padding: 0 0 8px; cursor: pointer; text-align: left; font: inherit; color: var(--text); box-shadow: 0 0 0 1px #e5e7eb; overflow: hidden; display: grid; gap: 2px; }
.bk-cell.on { border-color: #13213C; box-shadow: none; }
.bk-cell b { font-size: 13px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cell small { font-size: 11px; color: var(--muted); padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cimg { height: 96px; display: grid; place-items: center; background: repeating-conic-gradient(#f3f4f6 0 25%, #fff 0 50%) 0 0/16px 16px; margin-bottom: 6px; }
.bk-cimg.dark { background: #1d2433; }
.bk-cimg img { max-width: 78%; max-height: 72%; object-fit: contain; }
.bk-lnone { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Menú para cambiar el estado del proyecto */
.st-pop { position: fixed; right: auto; z-index: 400; min-width: 220px; }
.st-pop[hidden] { display: none; }
.st-pop-h { font-size: 12px; color: var(--muted); padding: 6px 12px 4px; font-weight: 600; }
.st-pop .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; }
.st-pop .menu-item.on { font-weight: 700; }
.st-ck { margin-left: auto; color: var(--accent); }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: #c7c7cc; flex-shrink: 0; }
.st-dot.st-proveedor, .st-dot.st-agendada { background: #8CCBF0; }
.st-dot.st-avanzando { background: #f5a623; }
.st-dot.st-revision { background: #af52de; }
.st-dot.st-distribuido { background: #34c759; }

.brf-row { position: relative; }
.brf-del { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: #fff; opacity: 0; transition: opacity .15s, color .15s; }
.brf-row:hover .brf-del, .brf-del:focus { opacity: 1; }
.brf-del:hover { color: var(--red); }
@media (hover: none) { .brf-del { opacity: 1; } }
.brf-row .brf-side { padding-right: 36px; }
@media (max-width: 700px) { .brf-row .brf-side { padding-right: 0; } .brf-row .brf-main { padding-right: 36px; } }

/* Adjuntos con mini vista previa */
.bot-att { gap: 8px; padding: 4px 4px 4px 4px; }
.bot-att-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.att-th { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #fff; display: grid; place-items: center; }
.att-doc { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; color: #fff; background: #8e8e93; }
.att-doc.pdf { background: #e5484d; } .att-doc.doc { background: #2b6cde; } .att-doc.xls { background: #1f9d55; } .att-doc.ppt { background: #e8702a; } .att-doc.eml { background: #13213C; }

.att-th-b { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 8px; flex-shrink: 0; display: block; }
.att-ov { z-index: 500; }
.att-pv { background: #fff; border-radius: 18px; width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.att-pvh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.att-pvh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.att-pvb { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; background: #f5f5f7; }
.att-pvb img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; display: block; }
.att-pvb iframe { width: 100%; height: calc(100vh - 110px); border: 0; background: #fff; }
.att-pvb pre { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Menlo, monospace; margin: 0; padding: 16px; width: 100%; align-self: start; background: #fff; }
.att-pvb p { padding: 30px 20px; }
.att-pvb { min-height: 260px; }
.att-pvh a.btn { text-decoration: none; }

.h-mail { margin-top: 4px; }
.h-mail summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.history .h-mail pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text); text-align: left; background: var(--fill); border-radius: 10px; padding: 10px 12px; margin: 6px 0 0; max-height: 260px; overflow: auto; }

/* ---------- Sherlock ---------- */
.sh-ov { padding: 16px; }
.sh-win { background: #fff; border-radius: 20px; width: min(1180px, 100%); height: min(860px, calc(100vh - 32px)); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: sheetIn .3s ease both; }
.sh-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sh-head h3 { margin: 0; font-size: 18px; }
.sh-head > div { flex: 1; display: grid; }
.sh-logo { width: 38px; height: 38px; border-radius: 12px; background: #13213C; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.sh-logo svg { width: 22px; height: 22px; }
.sh-logo.big { width: 64px; height: 64px; border-radius: 18px; }
.sh-logo.big svg { width: 34px; height: 34px; }
.sh-logo.spin svg { animation: shSpin 1.4s ease-in-out infinite; }
@keyframes shSpin { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(0, 3px); } 75% { transform: translate(-3px, -1px); } }
.sh-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 380px; }
.sh-in { overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line); }
.sh-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-drop { display: grid; gap: 4px; text-align: center; padding: 22px 12px; border: 1.5px dashed #c7c7cc; border-radius: 14px; background: var(--fill); cursor: pointer; }
.sh-drop.over { border-color: #13213C; background: #eef2f8; }
.sh-drop small { color: var(--muted); }
.sh-imp-btn { align-self: flex-start; }
.sh-files { padding: 0; }
.sh-go { width: 100%; min-height: 46px; }
.sh-go svg { width: 18px; height: 18px; }
.sh-out { overflow-y: auto; padding: 18px 22px; background: #fafafb; }
.sh-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; max-width: 440px; margin: 0 auto; }
.sh-res { display: grid; gap: 16px; }
.sh-top { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-badge { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.sh-badge.ok { background: #e3f5e8; color: #1f7a3a; } .sh-badge.warn { background: #fff3dc; color: #a15c00; } .sh-badge.bad { background: #ffe5e3; color: #c4271c; }
.sh-sum { font-size: 15px; margin: 0; }
.sh-res section { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 0 0 1px #ececf0; }
.sh-res h4 { margin: 0 0 8px; font-size: 14px; }
.sh-res section p { margin: 0; font-size: 14px; }
.sh-res ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sh-ort li { font-size: 14px; } .sh-ort s { color: #c4271c; } .sh-ort b { color: #1f7a3a; } .sh-ort small, .sh-est span, .sh-chk small, .sh-hall span { display: block; color: var(--muted); font-size: 13px; }
.sh-est li, .sh-hall li { font-size: 14px; }
.sh-chk li { display: flex; gap: 10px; font-size: 14px; }
.sh-chk i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; font-weight: 800; }
.sh-chk .ok i { background: #e3f5e8; color: #1f7a3a; } .sh-chk .no i { background: #ffe5e3; color: #c4271c; }
.sh-hall li { padding-left: 10px; border-left: 3px solid #c7c7cc; } .sh-hall .alta { border-color: #e5484d; } .sh-hall .media { border-color: #f5a623; } .sh-hall .baja { border-color: #8CCBF0; }
.sh-miss { margin-top: 10px; font-size: 14px; } .sh-miss ul { list-style: disc; padding-left: 18px; gap: 2px; margin-top: 4px; }
.sh-box { margin-top: 10px; background: var(--fill); border-radius: 12px; padding: 12px 14px; }
.sh-box p { white-space: pre-wrap; }
.sh-boxh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sh-new { margin-top: 0; background: #eef2f8; }
.sh-vt { font-weight: 800; font-size: 16px !important; } .sh-vs { font-weight: 600; } .sh-vc { font-weight: 700; color: #13213C; margin-top: 6px !important; }
.sh-det summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.sh-det pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; background: #fff; border-radius: 10px; padding: 10px; margin-top: 6px; }
.sh-imp { max-width: none; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.sh-imp .bk-grid { overflow-y: auto; }
.sh-tlist { display: grid; gap: 6px; overflow-y: auto; }
.sh-trow { border: 0; background: var(--fill); border-radius: 12px; padding: 10px 14px; text-align: left; font: inherit; cursor: pointer; display: grid; gap: 2px; color: var(--text); }
.sh-trow small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 800px) {
  .sh-ov { padding: 0; }
  .sh-win { height: 100vh; border-radius: 0; }
  .sh-body { grid-template-columns: 1fr; overflow-y: auto; }
  .sh-in { border-left: 0; overflow: visible; order: -1; }
  .sh-out { overflow: visible; }
}
.sh-in > * { flex-shrink: 0; }
.bot-att .att-th-b { width: 36px; height: 36px; border-radius: 8px; padding: 0; background: none; }

.sh-head .btn { min-height: 36px; padding: 8px 14px; font-size: 14px; }
.sh-head .btn:disabled { opacity: .4; }
.sh-okbtn { background: #1f9d55 !important; color: #fff !important; }
.sh-send { max-width: 460px; width: min(460px, calc(100vw - 32px)); }
.sh-send textarea { min-height: 90px; }

/* Fecha de entrega de los ítems */
.ms-item .it-date, .ms-item-add .it-date { flex-shrink: 0; transform: scale(.88); transform-origin: right center; margin-left: auto; }
.ms-item .it-date:not(.has) span { color: var(--muted); }
.ms-item .it-date.late { background: #ffe5e3; color: #c4271c; }

/* Íconos de tareas, pendientes e ítems: se asoman al dejar el cursor sobre el renglón o con ⋯ */
.ms-tools { display: inline-flex; align-items: center; gap: inherit; }
.ms-tools > * { max-width: 0; opacity: 0; overflow: hidden; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; pointer-events: none; transition: max-width .18s ease, opacity .15s ease, padding .18s ease; transition-delay: 0s; }
.ms-tools > .has, .ms-tools > .on { max-width: 44px; opacity: 1; overflow: visible; padding-left: revert !important; padding-right: revert !important; pointer-events: auto; }
/* Sin efecto hover: los íconos se ven en las tareas, en el pendiente en el que trabajas (y sus ítems) o con ⋯. */
.ms-active .ms-tools > *, .ms-tools.open > * { max-width: 44px; opacity: 1; overflow: visible; padding-left: revert !important; padding-right: revert !important; pointer-events: auto; transition-delay: 0s; }
.ms-active .ms-more { display: none; }
.ms-tools.open > * { transition-delay: 0s; }
.ms-tools.always > * { max-width: 44px; opacity: 1; overflow: visible; padding-left: revert !important; padding-right: revert !important; pointer-events: auto; transition: none; }
.ms-more { font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.ms-more.on { color: var(--accent); }
.ms-item .ms-tools { gap: 2px; }
.ms-item .ms-tools .ms-btn { width: 26px; height: 26px; }
.ms-item .ms-tools .ms-btn svg { width: 15px; height: 15px; }
/* Ítems: la fecha y los íconos van pegados al texto, del lado izquierdo (como en tareas y pendientes) */
.ms-item .ms-item-txt { flex: 0 1 auto; }
.ms-item .it-date { margin-left: 4px; transform-origin: left center; }

/* Ítems: fecha e íconos en su propio renglón, debajo del texto */
.ms-item { flex-wrap: wrap; row-gap: 2px; }
.ms-item .ms-item-txt { flex: 1 1 0; }
.ms-item-acts { flex-basis: 100%; display: flex; align-items: center; gap: 4px; padding-left: 24px; }
.ms-item .ms-item-acts .it-date { margin-left: 0; transform-origin: left center; }

/* ---------- Voice Over ---------- */
.vo-wrap { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
.vo-out { min-width: 0; }
.vo-in { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 0 0 1px #ececf0; position: sticky; top: 12px; max-height: calc(100vh - 140px); overflow-y: auto; }
.vo-in > * { flex-shrink: 0; }
.vo-in .field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
.vo-lang { max-width: 260px; }
.vo-ai { align-self: flex-start; }
.vo-voices { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.vo-voice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--fill); cursor: pointer; border: 2px solid transparent; }
.vo-voice.on { border-color: #13213C; background: #eef2f8; }
.vo-voice > span { flex: 1; min-width: 0; display: grid; }
.vo-voice b { font-size: 14px; } .vo-voice small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-play { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #13213C; color: #fff; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.vo-list { display: grid; gap: 12px; }
.vo-item { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 0 0 1px #ececf0; display: grid; gap: 10px; }
.vo-item.fresh { box-shadow: 0 0 0 2px #1f9d55; }
.vo-ih { display: grid; } .vo-ih b { font-size: 15px; } .vo-ih small { color: var(--muted); font-size: 12.5px; }
.vo-item audio { width: 100%; }
.vo-txt summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; } .vo-txt p { white-space: pre-wrap; font-size: 14px; margin: 6px 0 0; }
.vo-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vo-acts a.btn { text-decoration: none; }
@media (max-width: 900px) { .vo-wrap { grid-template-columns: 1fr; } .vo-in { position: static; max-height: none; order: -1; } }

.ng-item.locked { opacity: .55; cursor: not-allowed; }
.ng-lock { margin-left: auto; display: grid; place-items: center; color: var(--muted); }
.ng-lock svg { width: 15px; height: 15px; }

/* Newsletter: panel derecho en secciones plegables */
.nl-sec { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ececf0; margin-bottom: 10px; }
.nl-sec > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; }
.nl-sec > summary::-webkit-details-marker { display: none; }
.nl-sec > summary > span { flex: 1; min-width: 0; display: grid; }
.nl-sec > summary b { font-size: 15px; }
.nl-sec > summary small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-sec-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.nl-sec[open] .nl-sec-chev { transform: rotate(180deg); }
.nl-secb { padding: 0 14px 14px; display: grid; gap: 10px; }
.nl-sec .nl-brand { margin: 0; padding: 0; border: 0; }
.nl-ih-in { justify-content: flex-end; margin: -4px 0 0; }

/* Newsletters: vista previa del correo */
.nl-pv { width: min(860px, calc(100vw - 32px)); height: min(92vh, 1000px); background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(19, 32, 60, .25); }
.nl-pv-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.nl-pv-head b { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-pv-seg { display: inline-flex; background: var(--fill); border-radius: 10px; padding: 3px; gap: 2px; }
.nl-pv-seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.nl-pv-seg button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.nl-pv-body { flex: 1; min-height: 0; background: #eef0f4; display: flex; justify-content: center; overflow: auto; padding: 16px; }
.nl-pv-frame { width: 100%; max-width: 760px; height: 100%; border: 0; border-radius: 10px; background: #fff; transition: max-width .25s ease; }
.nl-pv-frame.mob { max-width: 390px; }
@media (max-width: 700px) { .nl-pv-seg { display: none; } .nl-pv-body { padding: 0; } .nl-pv-frame { border-radius: 0; } }
.nl-pv-out { background: var(--fill); border-radius: 50%; }
.nt-daily { display: block; width: calc(100% - 32px); margin: 8px 16px 14px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; padding: 11px 14px; cursor: pointer; }
.nt-daily:hover { background: #e6e9f0; }
.cf-pdet > summary { list-style: none; cursor: pointer; position: relative; padding-right: 28px; margin-bottom: 8px; }
.cf-pdet > summary::-webkit-details-marker { display: none; }
.cf-pdet > summary::after { content: ''; position: absolute; right: 4px; top: 6px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.cf-pdet[open] > summary::after { transform: rotate(-135deg); top: 10px; }
.cf-pdet:not([open]) { padding-bottom: 10px; }

/* Reservas: seguimiento, booking number y upsell */
.bk-todo { border: 1px solid #f3d9a4; background: #fff8ea; border-radius: 16px; padding: 12px 16px; margin: 0 0 16px; }
.bk-todo b { font-size: 14px; }
.bk-todo ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.bk-todo li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.bk-todo li em { font-style: normal; font-weight: 700; color: #b45309; white-space: nowrap; }
.bk-attn { display: block; font-size: 11px; font-weight: 700; color: #b45309; margin-top: 3px; }
.bk-table input.bk-num { width: 120px; text-align: left; }
.bk-contract .bk-c-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .bk-contract .bk-c-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk-table [data-bupsell], .bk-table [data-equoted], .bk-table [data-eupsell] { width: 100px; }
.bk-st.st-devengada, .bk-st.st-realizada { color: #1f8a4c; font-weight: 700; }
.bk-st.st-confirmada { color: #2563c9; font-weight: 700; }
.bk-up-nums { margin-bottom: 6px; }
.bk-up-h { margin: 12px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#loginEmail { letter-spacing: 0; font-size: 17px; margin-bottom: 8px; }
.ms-items textarea.ms-item-in, .ms-items textarea.ms-item-in:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; padding: 4px 2px; min-height: 28px; resize: none; overflow: hidden; line-height: 1.35; display: block; width: 100%; }
.mw-q { font-weight: 700; margin: 6px 0 8px; }
.mw-who { display: grid; gap: 8px; margin-bottom: 4px; }
.mw-opt { display: grid; gap: 2px; text-align: left; border: 0; border-radius: 12px; background: var(--fill); padding: 12px 14px; font: inherit; cursor: pointer; color: var(--text); }
.mw-opt:hover { background: #e6e9f0; }
.mw-opt small { color: var(--muted); font-size: 12.5px; }
.mw-tools { display: flex; gap: 8px; margin-top: 8px; }
.mw-tools .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* Ítems: casilla redonda, fecha en blanco y, en el renglón nuevo, fecha y palomita solo al escribir. */
.ms-item input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border: 1.6px solid #c7c7cc; border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center; }
.ms-item input[type=checkbox]:checked { background: #24893D; border-color: #24893D; }
.ms-item input[type=checkbox]:checked::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ms-item-bullet { width: 18px; height: 18px; border-radius: 50%; }
.ms-item .it-date, .ms-item-add .it-date { background: #fff; }
.ms-item .it-date.late { background: #ffe5e3; }
.ms-item-add:has(textarea:placeholder-shown) .it-date, .ms-item-add:has(textarea:placeholder-shown) .ms-item-ok { display: none; }
/* Personas del equipo: píldora con su color (Jorge azul, Dylan verde, Eli morado). */
.mention.p-blue { background: #d4e4fb; color: #1d4ed8; }
.mention.p-green { background: #e1f5e8; color: #15803d; }
.mention.p-purple { background: #efe7fb; color: #7c3aed; }
.own-wrap { position: relative; display: inline-flex; margin-left: auto; flex: 0 0 auto; }
.own-tag { font-size: inherit; font-weight: 700; padding: 3px 12px; }
.own-tag::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.meta-status .own-wrap select.own-over { position: absolute; inset: 0; width: 100%; max-width: none; opacity: 0; cursor: pointer; padding: 0; }
/* Avatar de la cuenta y filtro "lo mío" */
.me-ava { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: #13213C; color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; align-self: center; }
.me-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-menu { min-width: 200px; }
.mine-toggle { --mine-fill: none; flex-shrink: 0; width: 34px; height: 34px; border: 0; background: none; padding: 4px; color: #13213C; cursor: pointer; align-self: center; margin-right: 4px; }
.mine-toggle svg { width: 22px; height: 22px; display: block; margin: auto; }
.mine-toggle[aria-pressed="true"] { --mine-fill: #13213C; color: #13213C; }
@media (max-width: 700px) { .mine-toggle { display: none; } }
/* Estudio IA */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); gap: 14px; }
.ai-card { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #ececf0; overflow: hidden; display: flex; flex-direction: column; }
.ai-card.fresh { box-shadow: 0 0 0 2px #1f9d55; }
.ai-img { display: block; background: var(--fill); }
.ai-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-img.square, .ai-ph.square { aspect-ratio: 1; } .ai-img.portrait, .ai-ph.portrait { aspect-ratio: 2 / 3; } .ai-img.landscape, .ai-ph.landscape { aspect-ratio: 3 / 2; }
.ai-meta { padding: 10px 12px 4px; display: grid; gap: 4px; }
.ai-meta p { margin: 0; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ai-meta small { color: var(--muted); font-size: 12px; }
.ai-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px 12px; }
.ai-acts .spacer { flex: 1; }
.ai-ph { display: grid; place-content: center; justify-items: center; gap: 10px; background: linear-gradient(110deg, #f0f2f6 30%, #e4e8ef 50%, #f0f2f6 70%); background-size: 200% 100%; animation: aishim 1.4s linear infinite; color: var(--muted); }
@keyframes aishim { to { background-position: -200% 0; } }
.ai-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #cfd5df; border-top-color: #13213C; animation: aispin .8s linear infinite; }
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-ref { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--fill); }
.ai-ref img { width: 100%; height: 100%; object-fit: cover; }
.ai-ref button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; cursor: pointer; }
.ai-ref.add { border: 1.5px dashed #c7c7cc; display: grid; place-items: center; font-size: 22px; color: var(--muted); cursor: pointer; background: #fff; }
@media (max-width: 900px) { .ai-view .vo-wrap { grid-template-columns: 1fr; } .ai-view .vo-in { position: static; max-height: none; } }
.ai-wrap { grid-template-columns: 400px 1fr; }
.mw-tools + .recwave, .recwave + .mw-tools { margin-top: 8px; }
.recwave:has(+ .mw-tools) { margin-top: 8px; }
.ai-acts .btn { font-size: 12.5px; padding: 6px 10px; min-height: 0; text-decoration: none; }
[data-airest] { display: flex; flex-direction: column; gap: 12px; }
/* Mis vacaciones */
.vc-view { max-width: 1100px; }
.vc-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
.vc-num { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px #ececf0; padding: 14px 16px; display: grid; gap: 2px; }
.vc-num span { font-size: 12.5px; color: var(--muted); }
.vc-num b { font-size: 30px; line-height: 1.1; color: #13213C; }
.vc-num small { font-size: 12px; color: var(--muted); }
.vc-num.ok b { color: #1f8a4c; } .vc-num.neg b { color: #d70015; } .vc-num.pend b { color: #c25e00; }
.vc-tabs { margin-bottom: 14px; }
.vc-body { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px #ececf0; padding: 18px; display: grid; gap: 14px; }
.vc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vc-col { display: grid; gap: 12px; align-content: start; }
.vc-body .field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
.vc-types { display: grid; gap: 6px; }
.vc-type { display: flex; align-items: center; gap: 10px; background: var(--fill); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.vc-type input { accent-color: #13213C; }
.vc-cal { background: var(--fill); border-radius: 14px; padding: 10px; }
.vc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.vc-grid i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.vc-day { border: 0; background: #fff; border-radius: 9px; height: 34px; font: inherit; font-size: 13.5px; cursor: pointer; }
.vc-day.we { color: #a1a1aa; }
.vc-day.today { box-shadow: inset 0 0 0 1.5px #13213C; }
.vc-day.used { background: #e1f5e8; color: #15803d; } .vc-day.pend { background: #fff4e5; color: #c25e00; }
.vc-day.on { background: #13213C; color: #fff; }
.vc-leg { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.vc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .vc-dot.used { background: #bfe8cf; } .vc-dot.pend { background: #ffd9a8; }
.vc-warn { margin: 0; background: #fff4e5; color: #8a4b00; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.vc-reqs { display: grid; gap: 8px; }
.vc-req { display: flex; align-items: center; gap: 10px; background: var(--fill); border-radius: 12px; padding: 10px 12px; }
.vc-req > .vc-info { flex: 1; min-width: 0; display: grid; gap: 2px; } .vc-req small { color: var(--muted); font-size: 12.5px; }
.vc-st { width: auto !important; min-height: 32px; padding: 4px 28px 4px 10px; font-size: 13px; background-color: #fff; }
.vc-st.st-aprobada { color: #15803d; font-weight: 700; } .vc-st.st-rechazada { color: #d70015; font-weight: 700; } .vc-st.st-solicitada { color: #c25e00; font-weight: 700; }
.vc-sig { display: flex; align-items: center; gap: 12px; background: var(--fill); border-radius: 12px; padding: 10px 12px; }
.vc-sig img { max-height: 46px; max-width: 220px; background: #fff; border-radius: 8px; padding: 4px; }
.vc-addrow { display: flex; gap: 8px; margin-top: 8px; } .vc-addrow input { flex: 1; }
.vc-taken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vc-chip { display: inline-flex; align-items: center; gap: 6px; background: #e1f5e8; color: #15803d; border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px; font-weight: 600; }
.vc-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 11px; }
.vc-firm summary { cursor: pointer; font-size: 13px; color: var(--muted); margin: 4px; }
@media (max-width: 800px) { .vc-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vc-2 { grid-template-columns: 1fr; } }

.vc-hist { display: flex; flex-direction: column; gap: 6px; }
.vc-hrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: #f4f6f9; border-radius: 12px; padding: 8px 12px; }
.vc-hrow small { display: block; color: #6b7280; font-size: 12px; }
.vc-hits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; order: 3; }
.vc-hits span { background: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: #13213C; }
.vc-htot { color: #b45309; } .vc-htot.full { color: #15803d; }

.vc-ok { display: inline-flex; align-items: center; gap: 6px; background: #fff4e5; color: #c25e00; border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vc-ok.on { background: #e1f5e8; color: #15803d; }
.vc-ok input { width: 18px; height: 18px; margin: 0; accent-color: #15803d; cursor: pointer; }
.vc-adv { color: #c25e00; }
.vc-day:disabled { cursor: not-allowed; opacity: .75; }
.vc-edit { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #edf4fd; color: #13213C; border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 13.5px; font-weight: 600; }

.nav-subhead { display: flex; align-items: center; gap: 6px; margin: 0 0 10px -6px; } .nav-subhead h3 { margin: 0; }
.nav-subhead .icon-btn svg { width: 22px; height: 22px; }
.nav-row em { display: inline-flex; align-items: center; gap: 8px; }
.nav-row em small { color: var(--muted); font-size: 13px; font-weight: 600; font-style: normal; }
.nav-cnt { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--red); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; display: inline-grid; place-items: center; }
#btnNav { position: relative; }

.vc-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 700px) {
  .vc-req { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .vc-acts { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; }
  .vc-acts .vc-ok { grid-column: 1 / -1; justify-content: center; padding: 10px 12px; font-size: 14px; }
  .vc-acts .btn { width: 100%; justify-content: center; background: #fff; border-radius: 10px; min-height: 40px; }
  .vc-acts .icon-btn { width: 40px; height: 40px; background: #fff; border-radius: 10px; }
  .vc-tabs button { font-size: 13px; }
}

.me-menu .me-out .nav-lbl, .me-menu .me-out .nav-lbl svg { color: #d70015; }

.st-chip { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 14px 12px; border: 0; border-radius: var(--radius); font-weight: 600; background: var(--fill); font: inherit; font-size: 15px; color: var(--text, #1c1c1e); cursor: pointer; text-align: left; }
.st-chip > span:nth-child(2) { color: var(--muted); }
.st-chip b { margin-left: auto; font-weight: 700; }
.st-chip svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

/* Reportes: elegir socios o BUAM */
.rp-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rp-kind { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 22px; border: 1px solid #e5e7eb; border-radius: 20px; background: #fff; cursor: pointer; font: inherit; color: #13213C; transition: box-shadow .15s ease, border-color .15s ease; }
.rp-kind:hover { border-color: #13213C; box-shadow: 0 8px 24px rgba(19, 33, 60, .08); }
.rp-kind b { font-size: 18px; }
.rp-kind em { margin-top: 6px; font-style: normal; font-weight: 700; font-size: 14px; color: #13213C; }
.rp-kic { width: 44px; height: 44px; border-radius: 12px; background: #edf4fd; display: grid; place-items: center; color: #13213C; }
.rp-kic svg { width: 24px; height: 24px; }
.rp-kseg { display: inline-flex; margin: 6px 0 4px; }
.rp-kseg button { padding: 6px 16px; }
.rp-fmtchip { display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--fill); font-weight: 600; }
@media (max-width: 700px) { .rp-kinds { grid-template-columns: 1fr; } }
/* Lámina de redes sociales */
.mn-soc { grid-template-rows: 22% 1fr 18%; }
.mn-soc .kp, .mn-soc .pn { display: grid; gap: 4%; }
.mn-soc .kp { grid-template-columns: repeat(4, 1fr); }
.mn-soc .pn { grid-template-columns: 1fr 1fr 1fr; }
.mn-soc i { background: #e4eaf3; border-radius: 3px; }
.mn-soc em { background: #e4eaf3; border-radius: 3px; width: 100%; }
.sc-head { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-logo { grid-template-columns: 1fr; }
.sc-logo .tp-slot.logo { width: 100%; height: 110px; aspect-ratio: auto; }
.rp-grid2.sc-hf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-trow.sc-kpi { grid-template-columns: 1.1fr 110px 1.6fr 100px; }
.rp-trow.sc-fmt { grid-template-columns: 1fr 140px 140px; }
.rp-trow.sc-ctry { grid-template-columns: 1fr 120px; }
.rp-trow.sc-hl { grid-template-columns: 1fr 110px 1.2fr 130px; }
.rp-trow.sc-top { grid-template-columns: 64px 1fr auto 34px; }
.sc-topf { display: grid; grid-template-columns: 110px 1fr; gap: 6px; }
.sc-topf input[data-k="stats"] { grid-column: 1 / -1; }
.tp-slot.sc-thumb { aspect-ratio: 1; width: 64px; border-radius: 10px; }
.tp-slot.sc-thumb b { font-size: 12px; }
@media (max-width: 700px) {
  .sc-head { grid-template-columns: 1fr; }
  .rp-trow.sc-kpi, .rp-trow.sc-hl { grid-template-columns: 1fr 1fr; }
}

.sc-logobox { display: grid; gap: 8px; min-width: 0; width: 230px; }
.sc-logo { display: block !important; }
.sc-logoacts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-logoacts .btn { justify-content: center; }
.sc-bh { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--fill); }
.sc-bhgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 240px; overflow: auto; }
.sc-bhgrid button { display: grid; gap: 4px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; font-size: 11px; color: var(--muted); }
.sc-bhgrid button:hover { border-color: #13213C; }
.sc-bhgrid button.loading { opacity: .5; }
.sc-bhgrid img { width: 100%; height: 48px; object-fit: contain; background: repeating-conic-gradient(#f2f4f7 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; }
.sc-bhgrid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avisar del proyecto por correo / WhatsApp */
.fu-share { display: inline-flex; gap: 6px; margin-right: auto; }
.nt-who { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.nt-chip { border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer; color: #13213C; }
.nt-chip small { color: var(--muted); }
.nt-chip.on { background: #13213C; border-color: #13213C; color: #fff; }
.nt-chip.on small { color: #c7d2e5; }
.nt-out { display: grid; gap: 8px; margin-top: 10px; }
.nt-dlg .btn svg { width: 18px; height: 18px; vertical-align: -4px; }
.full-bar .full-due { margin-right: 0; }
.full-bar .fu-share { margin-right: auto; }
.nt-dlg .dialog-actions { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; } .nt-dlg .dialog-actions [hidden] { display: none; }
/* ODC: flechas solo en el total fijo (a media altura) y deshacer / rehacer junto al título */
.odc-arr.odc-mid { top: 50%; transform: translateY(-50%); }
.odc-totbox .odc-c0 { white-space: nowrap; }
.odc-tottl { vertical-align: middle; }
.odc-hist { display: inline-flex; gap: 6px; margin-left: 14px; vertical-align: middle; }
.odc-hist button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.odc-hist button svg { width: 16px; height: 16px; }
.odc-hist button:hover:not(:disabled) { background: #fff; color: #031F3F; }
.odc-hist button:disabled { opacity: .3; cursor: default; }
/* ODC: «Presupuesto» del total al centro (las flechas quedan a su orilla) y «Restante» orillado a la derecha */
.odc-totbox th.odc-tb { text-align: center !important; }
.odc-totbox th.odc-left, .odc-t thead tr.odc-headrow th.odc-left { text-align: right !important; padding-right: 14px !important; }
.odc-totbox th.odc-tb > * { position: relative; left: -32px; }   /* centrado en el espacio de moneda + presupuesto */
.odc-c0in { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 14px; }
.odc-c0in .odc-hist { margin-left: 0; }
/* Reportes: 2 fotos + texto y tablas */
.mn-p2 { grid-template-rows: 9% 1fr 5% 5%; }
.mn-p2 .ph { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.mn-p2 .mp { background: #8fb0e6; border-radius: 2px; }
.mn-tbl { grid-template-rows: 9% 1fr; }
.mn-tbl .tg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; align-content: start; }
.mn-tbl .tg i { height: 9px; border-radius: 1px; background: #fde9b7; }
.mn-tbl .tg i.h { background: #13213c; }
.mn-tbl .tg.mix i:nth-child(n+9):nth-child(-n+12) { background: #c00000; }
.tb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; background: var(--fill); margin-bottom: 8px; }
.tb-tools > select, .tb-tools input[type=number] { width: auto !important; min-height: 32px; padding: 4px 8px; font-size: 13px; background-color: #fff; }
.tb-tools button { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; min-height: 32px; padding: 0 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: #13213C; }
.tb-tools button:hover { border-color: #13213C; }
.tb-num { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tb-num input { width: 64px !important; }
.tb-col { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.tb-col input[type=color] { width: 32px; height: 28px; padding: 0; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; }
.tb-sep { width: 1px; height: 22px; background: #d5dae3; margin: 0 2px; }
.tb-pastebox { outline: none; border-radius: 12px; }
.tb-pastebox:focus-within, .tb-pastebox:focus { box-shadow: 0 0 0 2px #edf4fd; }
.tb-empty { padding: 26px; text-align: center; border: 2px dashed #d5dae3; border-radius: 12px; }
.tb-wrap { overflow: auto; max-height: 460px; border-radius: 10px; border: 1px solid #e5e7eb; }
.tb-grid { border-collapse: collapse; min-width: 100%; }
.tb-grid td { border: 1px solid #c9d1dd; padding: 4px 8px; min-width: 52px; white-space: pre-wrap; outline: none; cursor: text; }
.tb-grid td.sel { box-shadow: inset 0 0 0 2px #2f80ed; }
.tb-sheets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tb-mix { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #edf4fd; margin: 10px 0; }
.tb-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tb-opt { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid #d5dae3; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: #13213C; }
.tb-opt span { font-size: 12.5px; color: var(--muted); }
.tb-opt:hover { border-color: #13213C; }
.tp-ed { min-width: 0; }
.tp-ed .tb-pastebox, .tp-ed .tb-wrap, .tp-ed .tp-readbox { min-width: 0; max-width: 100%; }
.tb-tools button.tb-h { font-size: 16px; min-width: 30px; }
.tb-tools button:disabled { opacity: .35; cursor: default; }
.tp-ovc { position: relative; }
.tp-ovdel { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #b42318; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s; box-shadow: 0 2px 8px rgba(19, 32, 60, .12); }
.tp-ovc:hover .tp-ovdel, .tp-ovc:focus-within .tp-ovdel { opacity: 1; transform: none; }
.tp-ovdel:hover { background: #fef3f2; border-color: #fda29b; }
@media (hover: none) { .tp-ovdel { opacity: 1; transform: none; } }