/* ═══════════════════════════════════════════════════════════
   REGULA — Sistema de diseño
   Verde corporativo + blanco, tipografía nativa de Windows
   ═══════════════════════════════════════════════════════════ */

:root {
  --verde-950: #0A241C;
  --verde-900: #0E3227;
  --verde-850: #113B2E;
  --verde-800: #134634;
  --verde-700: #176B52;
  --verde-600: #1F8A67;
  --verde-500: #2FA985;
  --verde-200: #BFE0D1;
  --verde-100: #E4F2EC;
  --verde-50:  #F2F9F5;
  --lima:      #A6D13C;
  --teal:      #2FAE9B;
  --navy:      #101C52;

  --tinta:   #16211D;
  --tinta-2: #4A5B55;
  --tinta-3: #82918B;

  --fondo:  #F3F6F4;
  --panel:  #FFFFFF;
  --panel-2:#FAFCFB;
  --borde:  #E4EAE7;
  --borde-2:#D2DDD8;

  --ok:      #1F9166;
  --ok-bg:   #E7F4EE;
  --aviso:   #B26D14;
  --aviso-bg:#FCF1DF;
  --peligro: #C0392B;
  --peligro-bg:#FBE9E7;
  --info:    #2B5FB3;
  --info-bg: #E9EFFA;
  --neutro-bg:#EEF2F0;

  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 18px;
  --sombra-1: 0 1px 2px rgba(16,32,26,.06), 0 1px 3px rgba(16,32,26,.04);
  --sombra-2: 0 2px 6px rgba(16,32,26,.07), 0 8px 24px rgba(16,32,26,.06);
  --sombra-3: 0 12px 40px rgba(10,36,28,.18);
  --sidebar: 248px;
  --panel-der: 330px;
  --fuente: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--fuente); font-size: 13.5px; color: var(--tinta);
  background: var(--fondo); -webkit-font-smoothing: antialiased; overflow: hidden;
  cursor: default; user-select: none;
}
input, textarea, select, .seleccionable { user-select: text; }
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: #E7EDEA; border-left: 1px solid var(--borde); }
::-webkit-scrollbar-thumb { background: #9FB3AB; border-radius: 8px; border: 3px solid #E7EDEA; min-height: 44px; }
::-webkit-scrollbar-thumb:hover { background: #7A9188; }
::-webkit-scrollbar-thumb:active { background: var(--verde-700); }
::-webkit-scrollbar-corner { background: #E7EDEA; }

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--verde-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Estructura ─────────────────────────────────────────── */
#app {
  display: grid; grid-template-columns: var(--sidebar) 1fr;
  grid-template-rows: minmax(0, 1fr);   /* la fila nunca crece más que la ventana */
  height: 100vh; overflow: hidden;
}
body.con-panel #app { grid-template-columns: var(--sidebar) 1fr var(--panel-der); }

/* ── Barra lateral ──────────────────────────────────────── */
#lateral {
  background: linear-gradient(178deg, var(--verde-900) 0%, var(--verde-850) 45%, #0C2C22 100%);
  display: flex; flex-direction: column; color: #DDEAE4; position: relative; min-height: 0;
}
#lateral::after { content:''; position:absolute; inset:0 0 0 auto; width:1px; background:rgba(255,255,255,.07); }
.marca { padding: 18px 16px 14px; display: flex; align-items: center; gap: 11px; }
.marca .escudo {
  width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.22); flex: none;
}
.marca .escudo img { width: 30px; height: 30px; object-fit: contain; }
.marca .txt strong { display: block; font-size: 16px; letter-spacing: .16em; color: #fff; font-weight: 600; }
.marca .txt span { display: block; font-size: 9.5px; letter-spacing: .1em; color: #8FB6A6; text-transform: uppercase; margin-top: 2px; }

.nav { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-color: transparent; }
.nav-grupo { margin: 14px 0 6px; padding: 0 8px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6E9686; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: #C7DCD3; font-size: 13px; cursor: pointer; position: relative; margin-bottom: 1px;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.activo { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.nav-item.activo::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px;
  background: var(--lima); border-radius: 0 3px 3px 0;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .92; }
.nav-item .cuenta {
  margin-left: auto; font-size: 10.5px; background: rgba(255,255,255,.14); color: #E7F3EE;
  padding: 1px 7px; border-radius: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nav-item .cuenta.alerta { background: #C0392B; color: #fff; }

.pie-lateral { padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #7FA595; }
.pie-lateral .fila { display: flex; align-items: center; gap: 7px; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.pie-lateral .fila:hover { background: rgba(255,255,255,.07); color: #DDEAE4; }
.pie-lateral svg { width: 14px; height: 14px; }
.estado-guardado { display: flex; align-items: center; gap: 6px; padding: 4px; font-size: 10.5px; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); flex: none; }
.punto.gris { background: #6E9686; }

/* ── Zona principal ─────────────────────────────────────── */
#principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fondo); }
#barra {
  height: 58px; flex: none; background: var(--panel); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
}
#barra h1 { font-size: 17px; font-weight: 650; }
#barra .sub { font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }
.buscador { position: relative; margin-left: auto; }
#barra .buscador input {
  width: 260px; height: 34px; padding: 0 12px 0 34px; border: 1px solid var(--borde-2);
  border-radius: 8px; font-family: inherit; font-size: 12.5px; background: var(--panel-2); color: var(--tinta);
  transition: border-color .15s, box-shadow .15s, width .18s;
}
#barra .buscador input:focus { outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); width: 320px; background: #fff; }
.buscador svg { position: absolute; left: 11px; top: 9px; width: 15px; height: 15px; color: var(--tinta-3); }

#contenido { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 22px 44px; }
.contenedor { max-width: 1500px; margin: 0 auto; }

/* ── Botones ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px;
  border-radius: 8px; border: 1px solid transparent; font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .13s, border-color .13s, box-shadow .13s, transform .05s;
}
.btn:active { transform: translateY(.5px); }
.btn svg { width: 15px; height: 15px; }
.btn-primario { background: var(--verde-700); color: #fff; box-shadow: var(--sombra-1); }
.btn-primario:hover { background: var(--verde-800); }
.btn-secundario { background: var(--panel); color: var(--tinta); border-color: var(--borde-2); }
.btn-secundario:hover { background: var(--verde-50); border-color: var(--verde-200); color: var(--verde-800); }
.btn-fantasma { background: transparent; color: var(--tinta-2); }
.btn-fantasma:hover { background: var(--neutro-bg); color: var(--tinta); }
.btn-peligro { background: var(--panel); color: var(--peligro); border-color: #EBCFCB; }
.btn-peligro:hover { background: var(--peligro-bg); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: 7px; }
.btn-icono { width: 30px; height: 30px; padding: 0; border-radius: 7px; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* ── Tarjetas ───────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-1); }
.card-cab { padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 10px; }
.card-cab h3 { font-size: 13.5px; font-weight: 650; }
.card-cab .der { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.card-cuerpo { padding: 16px; }
.card-cuerpo.sin { padding: 0; }

.rejilla { display: grid; gap: 14px; }
.rejilla > * { min-width: 0; }
.card { min-width: 0; }
.r-2 { grid-template-columns: repeat(2, 1fr); }
.r-3 { grid-template-columns: repeat(3, 1fr); }
.r-4 { grid-template-columns: repeat(4, 1fr); }
.r-5 { grid-template-columns: repeat(5, 1fr); }
.r-2-1 { grid-template-columns: 2fr 1fr; }
.r-1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1280px) { .r-4, .r-5 { grid-template-columns: repeat(2, 1fr); } .r-2-1, .r-1-2 { grid-template-columns: 1fr; } }

/* ── KPI ────────────────────────────────────────────────── */
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.kpi .rotulo { font-size: 11px; color: var(--tinta-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.kpi .valor { font-size: 26px; font-weight: 680; margin-top: 7px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: 11.5px; color: var(--tinta-3); margin-top: 4px; }
.kpi .nota b { color: var(--tinta-2); font-weight: 600; }
.kpi.destacado { background: linear-gradient(140deg, var(--verde-800), var(--verde-700) 70%, var(--verde-600)); border-color: transparent; color: #fff; }
.kpi.destacado .rotulo { color: #A9CFBF; }
.kpi.destacado .nota { color: #B9DACC; }
.kpi.destacado .nota b { color: #E9F5EF; }
.kpi .icono-fondo { position: absolute; right: -8px; bottom: -10px; opacity: .06; }
.kpi .icono-fondo svg { width: 76px; height: 76px; }

/* ── Tablas ─────────────────────────────────────────────── */
.tabla-envoltura { overflow: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tabla th {
  text-align: left; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); padding: 9px 12px; background: var(--panel-2); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 2; white-space: nowrap; cursor: pointer;
}
table.tabla th.no-orden { cursor: default; }
table.tabla th .flecha { opacity: .45; margin-left: 3px; font-size: 9px; }
table.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla tbody tr { transition: background .1s; }
table.tabla tbody tr:hover { background: var(--verde-50); }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.principal-celda { font-weight: 600; color: var(--tinta); }
.tenue { color: var(--tinta-3); }
.mini { font-size: 11px; }
.acciones-celda { white-space: nowrap; text-align: right; opacity: 0; transition: opacity .12s; }
tr:hover .acciones-celda { opacity: 1; }

/* ── Insignias ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 19px;
}
.badge .pt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok { background: var(--ok-bg); color: #14664A; }
.badge.aviso { background: var(--aviso-bg); color: #8A5310; }
.badge.peligro { background: var(--peligro-bg); color: #A02D21; }
.badge.info { background: var(--info-bg); color: #234E93; }
.badge.neutro { background: var(--neutro-bg); color: var(--tinta-2); }
.badge.contorno { background: transparent; border: 1px solid var(--borde-2); color: var(--tinta-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 20px;
  border: 1px solid var(--borde-2); background: var(--panel); font-size: 12px; cursor: pointer; color: var(--tinta-2);
  font-weight: 500; transition: all .12s;
}
.chip:hover { border-color: var(--verde-500); color: var(--verde-700); }
.chip.activo { background: var(--verde-700); border-color: var(--verde-700); color: #fff; font-weight: 600; }
.chip .n { font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.filtros { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; }

/* ── Formularios ────────────────────────────────────────── */
.campo { margin-bottom: 13px; }
.campo > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: 5px; }
.campo > label .req { color: var(--peligro); }
.campo .ayuda { font-size: 11px; color: var(--tinta-3); margin-top: 4px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], select, textarea {
  width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid var(--borde-2); border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--tinta); background: #fff; transition: border-color .13s, box-shadow .13s;
}
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); }
input:disabled, select:disabled { background: var(--panel-2); color: var(--tinta-3); }
select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2382918B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 30px; }
.fila-campos { display: grid; gap: 12px; }
.fc-2 { grid-template-columns: 1fr 1fr; }
.fc-3 { grid-template-columns: repeat(3, 1fr); }
.fc-2-1 { grid-template-columns: 2fr 1fr; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--verde-700); cursor: pointer; }

/* ── Modal ──────────────────────────────────────────────── */
.velo {
  position: fixed; inset: 0; background: rgba(11,36,28,.42); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 46px 20px; z-index: 100;
  animation: aparecer .13s ease-out;
}
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }
.modal {
  background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--sombra-3); width: 100%; max-width: 680px;
  max-height: calc(100vh - 92px); display: flex; flex-direction: column; animation: subir .18s cubic-bezier(.2,.7,.3,1);
}
.modal.ancho { max-width: 1000px; }
.modal.angosto { max-width: 460px; }
.modal-cab { padding: 16px 20px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; }
.modal-cab h2 { font-size: 16px; font-weight: 650; }
.modal-cab .sub { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.modal-cab .cerrar { margin-left: auto; }
.modal-cuerpo { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-pie { padding: 13px 20px; border-top: 1px solid var(--borde); display: flex; gap: 9px; justify-content: flex-end; background: var(--panel-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal-pie .izq { margin-right: auto; }

/* ── Avisos flotantes ───────────────────────────────────── */
#tostadas { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.tostada {
  background: var(--verde-900); color: #fff; padding: 11px 15px; border-radius: 10px; font-size: 12.5px;
  box-shadow: var(--sombra-3); display: flex; align-items: center; gap: 9px; max-width: 380px;
  animation: subir .2s cubic-bezier(.2,.7,.3,1);
}
.tostada svg { width: 16px; height: 16px; flex: none; }
.tostada.err { background: #8E241A; }
.tostada.avi { background: #8A5310; }

/* ── Kanban ─────────────────────────────────────────────── */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.columna { background: #EAEFEC; border-radius: var(--r-lg); width: 252px; flex: none; display: flex; flex-direction: column; max-height: calc(100vh - 220px); }
.columna.sobre { background: var(--verde-100); box-shadow: inset 0 0 0 2px var(--verde-500); }
.columna-cab { padding: 10px 12px 8px; display: flex; align-items: center; gap: 7px; }
.columna-cab .titulo { font-size: 11.5px; font-weight: 700; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .03em; }
.columna-cab .n { margin-left: auto; font-size: 11px; background: rgba(0,0,0,.07); padding: 1px 7px; border-radius: 20px; font-weight: 600; color: var(--tinta-2); }
.columna-cab .marca-etapa { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.columna-lista { padding: 0 8px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; min-height: 40px; }
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 11px; cursor: grab;
  box-shadow: var(--sombra-1); transition: box-shadow .13s, transform .08s, border-color .13s;
}
.tarjeta:hover { box-shadow: var(--sombra-2); border-color: var(--verde-200); }
.tarjeta:active { cursor: grabbing; }
.tarjeta.arrastrando { opacity: .4; }
.tarjeta .cliente { font-size: 10.5px; color: var(--tinta-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .detalle { font-size: 12.5px; font-weight: 600; margin: 4px 0 7px; line-height: 1.35; }
.tarjeta .pie { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tinta-3); }
.tarjeta .pie .saldo { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-mini { height: 4px; background: var(--neutro-bg); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.barra-mini > i { display: block; height: 100%; background: var(--verde-500); border-radius: 3px; }

/* ── Vacío ──────────────────────────────────────────────── */
.vacio { padding: 46px 20px; text-align: center; color: var(--tinta-3); }
.vacio svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 10px; }
.vacio h4 { font-size: 14px; color: var(--tinta-2); margin-bottom: 5px; }
.vacio p { font-size: 12.5px; margin: 0 0 14px; }

/* ── Detalle (ficha) ────────────────────────────────────── */
.ficha-cab { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; }
.avatar {
  width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--verde-600), var(--teal));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none;
}
.datos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; }
.dato .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; }
.dato .v { font-size: 13px; margin-top: 3px; word-break: break-word; }
.dato .v.grande { font-size: 17px; font-weight: 680; font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.tab { padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--tinta); }
.tab.activo { color: var(--verde-700); border-bottom-color: var(--verde-700); }

.linea-tiempo { position: relative; padding-left: 22px; }
.linea-tiempo::before { content:''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--borde); }
.evento { position: relative; padding-bottom: 15px; }
.evento::before { content:''; position: absolute; left: -19px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--verde-500); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--verde-200); }
.evento .cuando { font-size: 11px; color: var(--tinta-3); }
.evento .que { font-size: 12.5px; margin-top: 2px; line-height: 1.5; }

.lista-check { display: flex; flex-direction: column; gap: 2px; }
.item-check { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; }
.item-check:hover { background: var(--panel-2); }
.item-check.hecho .txt { text-decoration: line-through; color: var(--tinta-3); }
.item-check .txt { flex: 1; font-size: 12.5px; }

.archivo {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 9px; margin-bottom: 7px; background: var(--panel); cursor: pointer; transition: border-color .12s, background .12s;
}
.archivo:hover { border-color: var(--verde-500); background: var(--verde-50); }
.archivo .ext {
  width: 32px; height: 32px; border-radius: 7px; background: var(--verde-100); color: var(--verde-800);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex: none;
}
.archivo .n { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo .m { font-size: 11px; color: var(--tinta-3); }

/* ── Gráficos ───────────────────────────────────────────── */
.gr-tooltip {
  position: fixed; background: var(--verde-950); color: #fff; padding: 7px 10px; border-radius: 8px;
  font-size: 11.5px; pointer-events: none; z-index: 300; box-shadow: var(--sombra-3); white-space: nowrap;
  opacity: 0; transition: opacity .1s;
}
.gr-tooltip b { font-variant-numeric: tabular-nums; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11.5px; color: var(--tinta-2); }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }
svg .eje { font-size: 10.5px; fill: var(--tinta-3); }
svg .malla { stroke: var(--borde); stroke-width: 1; }
svg .etiqueta-valor { font-size: 10.5px; fill: var(--tinta-2); font-weight: 600; }

/* ── Utilidades ─────────────────────────────────────────── */
.fila { display: flex; align-items: center; gap: 9px; }
.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.der { margin-left: auto; }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: 8px } .mt-2 { margin-top: 14px } .mt-3 { margin-top: 20px }
.mb-1 { margin-bottom: 8px } .mb-2 { margin-bottom: 14px } .mb-3 { margin-bottom: 20px }
.t-ok { color: var(--ok) } .t-avi { color: var(--aviso) } .t-mal { color: var(--peligro) } .t-suave { color: var(--tinta-3) }
.b { font-weight: 650 }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seccion-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 22px 0 10px; }
.nada { padding: 22px; text-align: center; color: var(--tinta-3); font-size: 12.5px; }
.separador { height: 1px; background: var(--borde); margin: 16px 0; }
.copiable { cursor: pointer; }
.copiable:hover { color: var(--verde-700); }
kbd { font-family: var(--mono); font-size: 10.5px; background: var(--neutro-bg); border: 1px solid var(--borde-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--tinta-2); }
.cinta-aviso {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r);
  background: var(--aviso-bg); color: #7A4A0F; font-size: 12.5px; margin-bottom: 14px; border: 1px solid #F0DCBB;
}
.cinta-aviso svg { width: 17px; height: 17px; flex: none; }
.cinta-aviso .der { margin-left: auto; }
.cinta-aviso.peligro {
  background: var(--peligro-bg); color: #8E2B1F; border-color: #F1CFC9;
}

/* ── Pantallas angostas ─────────────────────────────────── */
@media (max-width: 900px) {
  #app { grid-template-columns: 60px 1fr; }
  .marca { padding: 14px 8px; justify-content: center; }
  .marca .txt { display: none; }
  .nav { padding: 4px 6px; }
  .nav-grupo { display: none; }
  .nav-item { justify-content: center; padding: 9px 6px; }
  .nav-item > span:not(.cuenta) { display: none; }
  .nav-item .cuenta { position: absolute; top: 2px; right: 2px; font-size: 9px; padding: 0 4px; }
  .pie-lateral .fila span, .estado-guardado span { display: none; }
  .pie-lateral { text-align: center; }
  #barra { padding: 0 12px; gap: 8px; }
  #barra h1 { font-size: 15px; }
  #barra .sub { display: none; }
  #barra .buscador input { width: 140px; }
  #barra .buscador input:focus { width: 200px; }
  .rejilla.r-2, .rejilla.r-3, .rejilla.r-4, .rejilla.r-5, .rejilla.r-2-1, .rejilla.r-1-2 { grid-template-columns: 1fr; }
  .fila-campos.fc-2, .fila-campos.fc-3, .fila-campos.fc-2-1 { grid-template-columns: 1fr; }
  #contenido { padding: 14px 12px 40px; }
  .velo { padding: 16px 10px; }
  .modal-cuerpo { padding: 14px; }
}

@media (max-width: 700px) {
  #barra { overflow: hidden; }
  #boton-nuevo { width: 34px; padding: 0; gap: 0; flex: none; }
  #boton-nuevo .etiqueta-boton { display: none; }
  #barra .buscador input { width: 118px; }
  #barra .buscador input:focus { width: 150px; }
  .tabs { overflow-x: auto; }
  .filtros { gap: 6px; }
  .kpi .valor { font-size: 22px; }
}

/* ── Marketing: tarjetas de contenido ───────────────────── */
.tarjeta-contenido { display: flex; flex-direction: column; cursor: pointer; overflow: hidden; transition: box-shadow .14s, border-color .14s, transform .08s; }
.tarjeta-contenido:hover { box-shadow: var(--sombra-2); border-color: var(--verde-200); }
.miniatura { height: 148px; }
.miniatura.vacia { height: 74px; background: var(--neutro-bg); position: relative; overflow: hidden; flex: none; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-video, .mini-vacia {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--verde-700); background: linear-gradient(135deg, var(--verde-100), #DCEDE4);
}
.mini-vacia { color: var(--tinta-3); background: var(--neutro-bg); }
.mini-video span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.recorte {
  font-size: 12px; color: var(--tinta-2); line-height: 1.5; max-height: 72px; overflow: hidden;
  white-space: pre-wrap; mask-image: linear-gradient(180deg, #000 58%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
}
.pie-tarjeta { padding: 9px 12px; border-top: 1px solid var(--borde); display: flex; gap: 6px; align-items: center; }

/* ── Galería de material ────────────────────────────────── */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.galeria-item { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.galeria-item img, .galeria-item .mini-video { width: 100%; height: 124px; object-fit: cover; display: block; cursor: zoom-in; }
.galeria-pie { display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 9px; font-size: 11px; color: var(--tinta-2); }
.galeria-pie .truncar { flex: 1; min-width: 0; }

/* ── Calendario de publicaciones ────────────────────────── */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-cab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); text-align: center; padding: 4px 0 6px; }
.cal-dia { min-height: 92px; border: 1px solid var(--borde); border-radius: 9px; padding: 5px 6px; background: var(--panel); display: flex; flex-direction: column; gap: 3px; }
.cal-dia.vacio { background: transparent; border-color: transparent; }
.cal-dia.hoy { border-color: var(--verde-500); box-shadow: 0 0 0 2px var(--verde-100); }
.cal-num { font-size: 11px; color: var(--tinta-3); font-weight: 600; }
.cal-dia.hoy .cal-num { color: var(--verde-700); }
.cal-evento {
  font-size: 10.5px; line-height: 1.3; padding: 3px 5px; border-radius: 5px; cursor: pointer;
  background: var(--neutro-bg); color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  /* Dos líneas y ni un pixel más: sin esto el texto se sale del recuadro
     en los navegadores que no recortan por su cuenta. */
  max-height: calc(2 * 1.3em + 6px);
}
.cal-evento:hover { filter: brightness(.96); }
.cal-evento.aprobado { background: var(--verde-100); color: var(--verde-800); }
.cal-evento.publicado { background: var(--verde-700); color: #fff; }
.cal-evento.rechazado { background: var(--peligro-bg); color: var(--peligro); }
.cal-evento[draggable="true"] { cursor: grab; }
.cal-evento.arrastrando { opacity: .45; cursor: grabbing; }
.cal-dia.sobre { border-color: var(--verde-500); background: var(--verde-50); box-shadow: inset 0 0 0 1px var(--verde-500); }
.cal-dia.no-habil { background: var(--panel-2); }
.cal-dia.feriado { background: var(--aviso-bg); border-color: #F0DCBB; }
.cal-num { display: flex; align-items: center; gap: 4px; }
.cal-marca { font-size: 11px; line-height: 1; margin-left: auto; }
.cal-sector, .cal-feriado {
  font-size: 9.5px; line-height: 1.25; padding: 2px 4px; border-radius: 4px; font-weight: 600;
}
.cal-sector { background: var(--verde-50); color: var(--verde-800); }
.cal-feriado { background: #F6E4C8; color: #7A4A0F; }
.cal-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--tinta-3); }
.cal-leyenda-item { display: flex; align-items: center; gap: 5px; }
.cal-leyenda-item i.cal-evento { width: 16px; height: 10px; padding: 0; display: block; flex: none; }

.actividad-dia {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3); padding: 11px 16px 6px; background: var(--panel-2);
  border-bottom: 1px solid var(--borde); position: sticky; top: 0;
}
.actividad-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid var(--borde);
}
.actividad-fila:last-child { border-bottom: none; }

/* ── Vista previa estilo Instagram ── */
.ig-post {
  max-width: 340px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); overflow: hidden; box-shadow: var(--sombra-1, 0 1px 3px rgba(20,60,45,.07));
}
.ig-cab { display: flex; align-items: center; gap: 9px; padding: 9px 11px; }
.ig-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--verde-600, #1F7C58), var(--verde-800));
  color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.ig-cuenta { font-size: 12.5px; font-weight: 650; }
.ig-lugar { font-size: 10.5px; color: var(--tinta-3); }
.ig-puntos { color: var(--tinta-3); letter-spacing: 1px; }
.ig-foto { aspect-ratio: 1 / 1; background: var(--panel-2); overflow: hidden; }
.ig-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-foto.sin-foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--tinta-3); font-size: 11.5px;
}
.ig-acciones { display: flex; align-items: center; gap: 12px; padding: 9px 11px 5px; font-size: 16px; color: var(--tinta-2); }
.ig-acciones svg { width: 17px; height: 17px; }
.ig-texto { padding: 0 11px 12px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; }
.ig-mas { color: var(--tinta-3); }

.revision { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 12.5px; color: var(--tinta-2); }
.revision-marca { width: 16px; flex: none; color: var(--tinta-3); font-weight: 700; }
.revision.ok { color: var(--tinta); }
.revision.ok .revision-marca { color: var(--ok); }
.revision-marcable { padding: 5px 0; align-items: flex-start; font-size: 12.5px; }
.revision-marcable.ok { color: var(--verde-800); }

/* ── Parrilla del perfil ── */
.parrilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 420px; }
.parrilla-celda {
  aspect-ratio: 1 / 1; background: var(--panel-2); position: relative; overflow: hidden;
  cursor: pointer; display: grid; place-items: center;
}
.parrilla-celda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parrilla-celda .sin { font-size: 10px; color: var(--tinta-3); padding: 6px; text-align: center; line-height: 1.3; }
.parrilla-celda .rot {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px;
  font-size: 9px; font-weight: 600; color: #fff; background: rgba(11,36,28,.72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.parrilla-celda.programada { outline: 2px dashed var(--verde-500); outline-offset: -2px; }
.parrilla-celda:hover { filter: brightness(1.06); }

/* ── La meta del mes ── */
.meta-mes {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 12px;
}
.meta-mes.cumplida { border-color: var(--verde-200); background: var(--verde-50); }
.meta-cab { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.meta-rotulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.meta-cifra { font-size: 15px; margin-top: 2px; }
.meta-cifra b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meta-barra { height: 9px; border-radius: 5px; background: var(--neutro-bg); overflow: hidden; margin: 10px 0 6px; }
.meta-barra i { display: block; height: 100%; background: var(--verde-600, var(--verde-700)); border-radius: 5px; transition: width .4s cubic-bezier(.2,.7,.3,1); }
.meta-mes.cumplida .meta-barra i { background: var(--ok); }
@media (max-width: 900px) {
  .calendario { grid-template-columns: repeat(7, minmax(64px, 1fr)); overflow-x: auto; }
  .cal-dia { min-height: 64px; }
}

/* ── Zona para adjuntar fotos y videos en el formulario ─── */
.zona-material {
  border: 1.5px dashed var(--borde-2); border-radius: 10px; padding: 12px 14px;
  background: var(--panel-2); transition: border-color .13s, background .13s;
}
.zona-material:hover { border-color: var(--verde-500); background: var(--verde-50); }
.zona-material.con-material { border-style: solid; border-color: var(--borde); background: var(--panel); }
.zona-material .galeria { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.zona-material .galeria-item img, .zona-material .galeria-item .mini-video { height: 96px; }


/* ── Botón para volver arriba ───────────────────────────── */
#subir {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--verde-700); color: #fff; border: none; cursor: pointer; z-index: 90;
  box-shadow: 0 4px 16px rgba(10,36,28,.28); display: none; place-items: center;
  transition: background .13s, transform .1s, opacity .15s;
}
#subir.visible { display: grid; }
#subir:hover { background: var(--verde-800); transform: translateY(-2px); }
#subir svg { width: 20px; height: 20px; }
#tostadas { bottom: 76px; }

/* ── Pantalla de acceso ─────────────────────────────────── */
#acceso {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(155deg, var(--verde-900) 0%, var(--verde-850) 45%, #0A241C 100%);
  overflow-y: auto;
}
.acceso-caja {
  width: 100%; max-width: 396px; background: var(--panel); border-radius: 18px; padding: 30px 30px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); text-align: left;
}
.acceso-logo { display: block; width: 108px; margin: 0 auto 18px; }
.acceso-titulo { font-size: 19px; text-align: center; margin-bottom: 4px; }
.acceso-sub { font-size: 12.5px; color: var(--tinta-3); text-align: center; margin: 0 0 20px; line-height: 1.5; }
.acceso-boton { width: 100%; height: 40px; margin-top: 6px; font-size: 13.5px; }
.acceso-error { color: var(--peligro); font-size: 12.5px; min-height: 18px; margin-bottom: 2px; }
.acceso-pie { font-size: 11.5px; color: var(--tinta-3); text-align: center; margin-top: 16px; line-height: 1.5; }
.acceso-caja .campo { margin-bottom: 14px; }
.acceso-caja input, .acceso-caja select { height: 38px; font-size: 13.5px; }

/* Identidad de la sesión en el menú lateral */
.sesion-actual { display: flex; align-items: center; gap: 8px; padding: 7px 4px; }
.sesion-actual .avatar { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; }
.sesion-actual .txt { min-width: 0; flex: 1; }
.sesion-actual .txt b { display: block; font-size: 11.5px; color: #DDEAE4; font-weight: 600; }
.sesion-actual .txt span { display: block; font-size: 10px; color: #7FA595; }
.sesion-actual .salir { color: #7FA595; background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.sesion-actual .salir:hover { background: rgba(255,255,255,.1); color: #fff; }
.sesion-actual .salir svg { width: 15px; height: 15px; }

/* Aviso de acción restringida */
.solo-socios {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r);
  background: var(--neutro-bg); color: var(--tinta-2); font-size: 12.5px; border: 1px solid var(--borde);
}
.solo-socios svg { width: 17px; height: 17px; flex: none; color: var(--tinta-3); }

/* ── Modo solo lectura y matriz de permisos ─────────────── */
#contenido.solo-ver .btn-primario,
#contenido.solo-ver .btn-peligro,
#contenido.solo-ver .acciones-celda { display: none !important; }
.tabla-permisos td, .tabla-permisos th { padding: 7px 10px; }
.tabla-permisos input[type=radio] { width: 16px; height: 16px; accent-color: var(--verde-700); cursor: pointer; }
.tabla-permisos tbody tr:hover { background: var(--verde-50); }
.check > div { line-height: 1.4; }
.tabla-permisos th:first-child, .tabla-permisos td:first-child { text-align: left; }
.tabla-permisos th:not(:first-child), .tabla-permisos td:not(:first-child) { text-align: center; width: 132px; }

/* ── Tablero de permisos: sección + lo que puede hacer dentro ── */
.perm-bloque {
  border: 1px solid var(--borde); border-radius: 11px; margin-bottom: 8px;
  background: var(--panel); overflow: hidden;
}
.perm-cab {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 13px;
}
.perm-nombre { font-size: 13px; font-weight: 650; }
.perm-niveles { margin-left: auto; display: flex; gap: 4px; flex: none; }
.perm-nivel {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11.5px; color: var(--tinta-2); white-space: nowrap;
  padding: 5px 10px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); transition: background .12s, border-color .12s, color .12s;
}
.perm-nivel:hover { background: var(--verde-50); }
.perm-nivel.activo { background: var(--verde-50); border-color: var(--verde-200); color: var(--verde-800); font-weight: 600; }
.perm-nivel input[type=radio] { width: 14px; height: 14px; min-height: 0; accent-color: var(--verde-700); cursor: pointer; }
.perm-acciones:not(:empty) { border-top: 1px solid var(--borde); background: var(--panel-2); padding: 9px 13px 11px; }
.perm-acciones-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.perm-apagado { font-size: 11.5px; color: var(--tinta-3); font-style: italic; }
.perm-accion { padding: 4px 0; align-items: flex-start; }
.perm-accion input[type=checkbox] { margin-top: 2px; }
@media (max-width: 700px) {
  .perm-niveles { margin-left: 0; width: 100%; }
  .perm-nivel { flex: 1; justify-content: center; }
}

/* ── Campana de notificaciones ──────────────────────────── */
.campana-envoltura { position: relative; margin-left: 2px; flex: none; }
/* Botón "Actualizar" de la barra superior */
.btn-actualizar {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--tinta-2); cursor: pointer; display: grid; place-items: center; flex: none;
  transition: background .13s, color .13s;
}
.btn-actualizar:hover { background: var(--neutro-bg); color: var(--verde-700); }
.btn-actualizar svg { width: 18px; height: 18px; }
.btn-actualizar.girando svg { animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.campana {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--tinta-2); cursor: pointer; display: grid; place-items: center; position: relative;
  transition: background .13s, color .13s;
}
.campana:hover { background: var(--neutro-bg); color: var(--tinta); }
.campana.con-pendientes { color: var(--verde-700); }
.campana svg { width: 19px; height: 19px; }
.campana-badge {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 10px; background: var(--peligro); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--panel); font-variant-numeric: tabular-nums;
}
/* ── Columna de avisos (derecha) ───────────────────────── */
#panel-avisos {
  display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  background: var(--panel); border-left: 1px solid var(--borde); min-height: 0;
}
body.con-panel #panel-avisos { display: flex; }
body.con-panel .campana { background: var(--verde-50); color: var(--verde-800); }

.avisos-cab {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 15px 15px 12px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.avisos-hoy { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); }
.avisos-fecha { font-size: 13.5px; font-weight: 650; margin-top: 2px; }

.avisos-temporada {
  display: flex; align-items: center; gap: 8px; padding: 9px 15px;
  font-size: 12px; font-weight: 600; color: var(--verde-800);
  background: var(--verde-50); border-bottom: 1px solid var(--verde-200);
}
.avisos-temporada .emoji, .avisos-fecha-marcada .emoji, .avisos-proxima .emoji { font-size: 15px; line-height: 1; flex: none; }

.avisos-fecha-marcada {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 15px;
  border-bottom: 1px solid var(--borde);
}
.avisos-fecha-marcada .n { font-size: 12.5px; font-weight: 640; line-height: 1.3; }
.avisos-fecha-marcada .m { font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
.avisos-fecha-marcada.feriado { background: var(--aviso-bg); }
.avisos-fecha-marcada.feriado .m { color: #7A4A0F; }
.avisos-fecha-marcada.sector { background: var(--verde-50); }

.avisos-proxima { padding: 9px 15px; border-bottom: 1px solid var(--borde); display: grid; gap: 6px; }
.avisos-proxima .fila { gap: 8px; font-size: 11.5px; color: var(--tinta-2); }

.avisos-titulo {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 15px 9px; font-size: 13px;
}
.avisos-grupo {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3);
}
.avisos-grupo .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); flex: none; }
.avisos-grupo.urgente .punto { background: var(--peligro); }
.avisos-grupo.pronto .punto { background: var(--aviso); }
.avisos-grupo.listo .punto { background: var(--ok); }
.avisos-grupo .n {
  margin-left: auto; font-size: 10.5px; color: var(--tinta-3);
  background: var(--neutro-bg); border-radius: 9px; padding: 1px 7px; letter-spacing: 0;
}
.avisos-vacio { padding: 34px 20px; text-align: center; color: var(--tinta-3); }
.avisos-vacio .n { font-size: 13px; font-weight: 640; color: var(--tinta-2); margin-top: 8px; }
.avisos-vacio .m { font-size: 11.5px; margin-top: 3px; }

/* Marcar como visto: el botón aparece al pasar por encima del aviso */
.campana-item { position: relative; }
.campana-item .aviso-visto {
  flex: none; opacity: 0; transition: opacity .12s;
  color: var(--tinta-3); align-self: center;
}
.campana-item:hover .aviso-visto, .campana-item:focus-within .aviso-visto { opacity: 1; }
.campana-item .aviso-visto:hover { color: var(--verde-700); background: var(--verde-100, var(--verde-50)); }
.campana-item.visto { opacity: .55; }
.campana-item.visto .campana-titulo { font-weight: 550; }

.avisos-vistos-barra {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 15px; font-size: 11.5px; color: var(--tinta-3);
  border-top: 1px solid var(--borde); background: var(--panel-2);
}
.avisos-vistos-barra:hover { color: var(--tinta-2); }
.avisos-vistos-barra svg { transform: rotate(180deg); transition: transform .15s; }
.avisos-vistos-barra.abierta svg { transform: rotate(0deg); }

/* La versión, en el pie del menú lateral */
.version-app {
  padding: 7px 16px 11px; font-size: 10.5px; letter-spacing: .04em;
  color: rgba(255,255,255,.34); cursor: pointer; transition: color .13s;
  font-variant-numeric: tabular-nums;
}
.version-app:hover { color: rgba(255,255,255,.72); }

/* Los requisitos por tipo de trámite, en Configuración */
.req-fila { padding: 4px 0; gap: 8px; }
.req-n {
  width: 20px; flex: none; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* El índice del manual de uso */
.manual-cabecera {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: 10px; margin-bottom: 16px;
  background: var(--verde-50); border: 1px solid var(--borde);
}
.manual-icono {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde-800); color: #fff;
}
.manual-icono svg { width: 22px; height: 22px; }
.manual-cabecera strong { display: block; margin-bottom: 3px; }
.manual-lista { border-top: 1px solid var(--borde); }
.manual-cap {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px; border-bottom: 1px solid var(--borde);
  cursor: pointer; border-radius: 7px; transition: background .12s;
}
.manual-cap:hover { background: var(--verde-50); }
.manual-n {
  flex: 0 0 auto; width: 26px; font-family: var(--mono); font-size: 12px;
  color: var(--verde-600); font-variant-numeric: tabular-nums;
}
.manual-txt { flex: 1 1 auto; min-width: 0; }
.manual-txt b { display: block; font-size: 13.5px; }
.manual-txt span { display: block; }
.manual-quien {
  flex: 0 0 auto; font-size: 10.5px; letter-spacing: .03em;
  color: var(--tinta-3); text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 620px) { .manual-quien { display: none; } }

/* Lista de novedades */
.novedad { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.novedad:last-child { border-bottom: none; }
.novedad:not(.actual) { opacity: .74; }
.novedad-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.novedad-version {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 700;
  color: var(--verde-700); background: var(--verde-50); border-radius: 5px; padding: 2px 7px;
}
.novedad-titulo { font-size: 14px; font-weight: 650; }
.novedad-lista { margin: 8px 0 0; padding-left: 20px; }
.novedad-lista li { font-size: 12.8px; color: var(--tinta-2); line-height: 1.55; padding: 1px 0; }

.aviso-fecha { display: none; margin-top: 5px; color: var(--aviso); align-items: center; gap: 4px; }
.aviso-fecha.visible { display: flex; flex-wrap: wrap; }
.aviso-fecha svg { vertical-align: -2px; }
.aviso-fecha a { color: var(--verde-700); font-weight: 600; }

/* El aire de la época: un hilo de color arriba del panel, nada más */
body[data-temporada] .avisos-cab { border-bottom-color: var(--verde-200); }
body[data-temporada="navidad"] .avisos-temporada { background: #FBECEC; color: #8C2F2F; border-bottom-color: #F0D2D2; }
body[data-temporada="anionuevo"] .avisos-temporada { background: #F4EFE2; color: #7A5A12; border-bottom-color: #E8DCC0; }
body[data-temporada="carnaval"] .avisos-temporada { background: #F0EAFA; color: #57399C; border-bottom-color: #DED2F4; }
body[data-temporada="semanasanta"] .avisos-temporada { background: #ECEFF3; color: #45566B; border-bottom-color: #D8DFE8; }
body[data-temporada="guayaquil"] .avisos-temporada { background: #E9F1FB; color: #1F4E87; border-bottom-color: #CFE0F4; }
.campana-item {
  display: flex; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--borde);
  cursor: pointer; transition: background .12s;
}
.campana-item:last-child { border-bottom: none; }
.campana-item:hover { background: var(--verde-50); }
.campana-icono { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.campana-icono.aviso { background: var(--aviso-bg); color: var(--aviso); }
.campana-icono.peligro, .campana-icono.error { background: var(--peligro-bg); color: var(--peligro); }
.campana-icono.ok { background: var(--ok-bg); color: var(--ok); }
.campana-titulo { font-size: 12.5px; font-weight: 650; }
.campana-texto { font-size: 12px; color: var(--tinta-2); }
.campana-detalle { font-size: 11px; color: var(--tinta-3); margin-top: 1px; }
/* En pantallas angostas el panel se echa encima en vez de robar ancho */
@media (max-width: 1180px) {
  body.con-panel #app { grid-template-columns: var(--sidebar) 1fr; }
  body.con-panel #panel-avisos {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
    z-index: 90; box-shadow: -14px 0 40px rgba(11, 36, 28, .16);
  }
}

/* ═══ Versión web: conexión en vivo y menú de teléfono ═══ */
#menu-movil { display: none; }

/* La flecha de atrás. En la computadora no hace falta —está el menú a la
   vista— así que solo sale en pantallas angostas y cuando hay a dónde volver. */
#volver { display: none; }
@media (max-width: 860px) {
  #volver.visible {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    background: transparent; border: 1px solid var(--borde-2); border-radius: 10px;
    color: var(--tinta-2); cursor: pointer;
  }
  #volver svg { width: 18px; height: 18px; }
  #volver:active { background: var(--verde-50); }
}

.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde-500); flex: none;
  box-shadow: 0 0 0 0 rgba(31,145,102,.55); animation: latir 2.4s infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(31,145,102,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(31,145,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,145,102,0); }
}
.badge .punto-vivo { margin-right: 5px; }

#estado-conexion { cursor: default; gap: 8px; }
#estado-conexion.sin-conexion .punto-vivo { background: #E06055; animation: none; }
#estado-conexion.sin-conexion span { color: #F0A9A2; }

/* Quién está conectado, dentro del menú (solo el Master) */
.equipo-conectado { margin-top: 2px; }
.companero {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px;
  color: #BCD4CA;
}
.companero:hover { background: rgba(255,255,255,.06); }
.companero .txt { min-width: 0; flex: 1; line-height: 1.25; }
.companero .txt b { display: block; font-size: 11.5px; color: #E4F0EA; font-weight: 600; }
.companero .txt span { display: block; font-size: 10px; color: #7FA595; }
.companero .punto-vivo { flex: none; }
.avatar-mini {
  width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #D6E8DF; font-size: 9px; font-weight: 700;
}

.estado-guardado.destello span { color: var(--verde-300, #8FD3B6); }
.estado-guardado.destello { transition: color .2s; }

/* ═══ Mi trabajo: notas, pendientes y plantillas ═══ */
.nota-card { transition: box-shadow .15s, border-color .15s; }
.nota-card:hover { box-shadow: var(--sombra-2); }
.nota-card.fijada { border-color: var(--verde-300, #9ACDB5); background: linear-gradient(180deg, var(--verde-50) 0%, var(--panel) 42%); }
.nota-card .pin { color: var(--verde-700); display: inline-flex; flex: none; }

.nota-texto {
  font-size: 13px; line-height: 1.6; color: var(--tinta-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 168px; overflow: hidden; position: relative;
}

.vinculo-nota {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  padding: 3px 8px; border-radius: 999px; cursor: pointer;
  background: var(--verde-50); border: 1px solid var(--verde-100);
  color: var(--verde-800, var(--verde-700)); font-size: 11.5px; max-width: 100%;
}
.vinculo-nota:hover { background: var(--verde-100); }
.vinculo-nota span { min-width: 0; }

.lista-tareas { display: flex; flex-direction: column; }
.tarea {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--borde);
}
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: var(--verde-50); }
.tarea input[type=checkbox] { margin-top: 2px; flex: none; width: 16px; height: 16px; cursor: pointer; }
.tarea-texto { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tarea.hecha .tarea-texto { text-decoration: line-through; color: var(--tinta-3); }
.tarea.hecha { opacity: .62; }

.seccion-titulo.t-mal { color: var(--peligro, #C0463B); }
.seccion-titulo.t-ok { color: var(--verde-700); }

/* ═══ Pregúntale a ARCSA ═══ */
.arcsa { display: flex; flex-direction: column; gap: 0; max-width: 920px; margin: 0 auto; }

.arcsa-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--borde); margin-bottom: 6px;
}
.arcsa-marca { display: flex; align-items: center; gap: 12px; }
.arcsa-icono {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--verde-800), var(--verde-600)); color: #fff;
}
.arcsa-marca h2 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.arcsa-marca p { font-size: 12px; color: var(--tinta-3); margin: 2px 0 0; }

.arcsa-chip {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--verde-50); color: var(--verde-800, var(--verde-700));
  border: 1px solid var(--verde-100); white-space: nowrap;
}
.arcsa-chip.vacio { background: var(--fondo); color: var(--tinta-3); border-color: var(--borde); }

/* ── Conversación ── */
.arcsa-hilo { display: flex; flex-direction: column; gap: 18px; padding: 18px 0 8px; }
.arcsa-fila { display: flex; }
.arcsa-fila.mia { justify-content: flex-end; }

.arcsa-pregunta {
  background: linear-gradient(140deg, var(--verde-800), var(--verde-700));
  color: #fff; padding: 11px 16px; border-radius: 16px 16px 4px 16px;
  max-width: 78%; font-size: 14px; line-height: 1.5; box-shadow: var(--sombra-1);
}
.arcsa-respuesta { max-width: 100%; width: 100%; }

.arcsa-encabezado-resp {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--verde-800, var(--verde-700)); font-weight: 600; margin-bottom: 10px;
}

.arcsa-pensando { display: flex; align-items: center; gap: 6px; color: var(--tinta-3); font-size: 13px; padding: 6px 0; }
.arcsa-pensando i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde-500);
  animation: puntear 1.2s infinite ease-in-out;
}
.arcsa-pensando i:nth-child(2) { animation-delay: .16s; }
.arcsa-pensando i:nth-child(3) { animation-delay: .32s; }
.arcsa-pensando span { margin-left: 6px; }
@keyframes puntear { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Citas ── */
.cita {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden; margin-bottom: 10px;
}
.cita.principal { border-color: var(--verde-300, #9ACDB5); box-shadow: 0 0 0 3px var(--verde-50); }
.cita-cab {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 14px; background: var(--verde-50); border-bottom: 1px solid var(--borde);
}
.cita-articulo { font-size: 13px; font-weight: 700; color: var(--verde-900, var(--verde-800)); }
.cita-fuente { font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }
.cita-texto {
  padding: 14px; font-size: 13.5px; line-height: 1.68; color: var(--tinta);
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto;
}
.cita-pie {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--borde); background: var(--panel-2, var(--fondo));
}

/* Lo que coincide con la consulta, señalado dentro del artículo */
.cita-texto mark {
  background: #FFF0BF; color: inherit; border-radius: 3px;
  padding: 0 2px; box-shadow: 0 0 0 1px rgba(178,109,20,.18);
}
.cita.principal .cita-texto mark { background: #FFE79A; }

/* Los demás artículos quedan plegados, para no volcar seis bloques */
.arcsa-desplegar {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: transparent; border: 1px dashed var(--borde-2); border-radius: 9px;
  padding: 7px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--tinta-2); cursor: pointer; transition: background .13s, border-color .13s, color .13s;
}
.arcsa-desplegar:hover { background: var(--verde-50); border-color: var(--verde-200); color: var(--verde-800); }
.arcsa-desplegar svg { width: 14px; height: 14px; }
.arcsa-otros { display: none; }
.arcsa-otros.abierto { display: block; animation: subir .2s ease-out; }
.arcsa-otros .cita { margin-top: 10px; }

.arcsa-cierre, .arcsa-aviso {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11.5px; color: var(--tinta-3); line-height: 1.5; margin-top: 8px;
}
.arcsa-aviso { margin-top: 10px; justify-content: center; text-align: center; }

.arcsa-nada {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px;
  padding: 14px 16px; font-size: 13.5px; line-height: 1.6;
}
.arcsa-acciones { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ── Bienvenida ── */
.arcsa-bienvenida { text-align: center; padding: 34px 20px 20px; }
.arcsa-icono-grande {
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 16px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--verde-800), var(--verde-600)); color: #fff;
  box-shadow: 0 8px 22px -12px var(--verde-700);
}
.arcsa-bienvenida h3 { font-size: 18px; font-weight: 650; margin: 0 0 8px; }
.arcsa-bienvenida p { font-size: 13.5px; color: var(--tinta-2); max-width: 56ch; margin: 0 auto; line-height: 1.65; }
.arcsa-ejemplos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.arcsa-ejemplo {
  background: var(--panel); border: 1px solid var(--borde-2); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; color: var(--tinta-2); cursor: pointer;
  font-family: inherit; transition: border-color .15s, color .15s, background .15s;
}
.arcsa-ejemplo:hover { border-color: var(--verde-500); color: var(--verde-800, var(--verde-700)); background: var(--verde-50); }

/* ── Caja de pregunta ── */
.arcsa-pie { position: sticky; bottom: 0; background: var(--fondo); padding: 12px 0 4px; }
.arcsa-caja {
  display: flex; align-items: flex-end; gap: 8px; background: var(--panel);
  border: 1px solid var(--borde-2); border-radius: 14px; padding: 8px 8px 8px 14px;
  box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s;
}
.arcsa-caja:focus-within { border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); }
.arcsa-entrada {
  flex: 1; border: 0; outline: 0; resize: none; font-family: inherit; font-size: 14px;
  line-height: 1.5; padding: 7px 0; background: transparent; color: var(--tinta); max-height: 150px;
}
.arcsa-entrada:focus { outline: none; box-shadow: none; }
.arcsa-enviar { width: 38px; height: 38px; padding: 0; flex: none; border-radius: 10px; justify-content: center; }

@media (max-width: 860px) {
  .arcsa-pregunta { max-width: 90%; }
  .arcsa-cab { gap: 10px; }
  .cita-texto { max-height: 260px; }
}

/* ═══ Bienvenida al entrar ═══════════════════════════════ */
#bienvenida {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(10, 36, 28, .52); backdrop-filter: blur(3px);
  animation: aparecer .22s ease-out;
}
#bienvenida.saliendo { opacity: 0; transition: opacity .3s; }
.bienvenida-caja {
  width: min(460px, calc(100vw - 32px)); background: var(--panel); border-radius: var(--r-xl);
  box-shadow: var(--sombra-3); padding: 30px 32px 26px; text-align: center;
  animation: subir .3s cubic-bezier(.2, .8, .3, 1);
}
.bienvenida-logo { width: 104px; margin-bottom: 14px; }
.bienvenida-saludo { font-size: 20px; font-weight: 650; letter-spacing: -.015em; color: var(--verde-900); }
.bienvenida-frase {
  font-size: 13.5px; color: var(--tinta-2); line-height: 1.65; margin: 12px 0 18px;
  font-style: italic; position: relative; padding: 0 6px;
}
.bienvenida-pendientes {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  background: var(--aviso-bg); color: var(--aviso); padding: 8px 14px; border-radius: 20px;
}
.bienvenida-pendientes.ok { background: var(--ok-bg); color: var(--ok); }
.bienvenida-pendientes svg { width: 14px; height: 14px; flex: none; }
.bienvenida-boton { width: 100%; margin-top: 20px; height: 38px; }
@media (max-width: 700px) {
  .bienvenida-caja { padding: 24px 20px 20px; }
  .bienvenida-saludo { font-size: 18px; }
}

/* ═══ Marketing pide ideas a los Q.F. ════════════════════ */
.cinta-solicitud {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(100deg, #FCF1DF 0%, #FDF7EC 100%);
  border: 1px solid #F0DCBB; border-left: 4px solid var(--aviso);
  border-radius: var(--r-lg); padding: 13px 16px; margin-bottom: 14px;
  color: #7A4B0C;
}
.cinta-solicitud.lista {
  background: linear-gradient(100deg, var(--ok-bg) 0%, #F2FAF6 100%);
  border-color: #BFE0D1; border-left-color: var(--ok); color: var(--verde-800);
}
.cinta-solicitud > svg { flex: none; }
.cinta-solicitud b { font-size: 13.5px; display: block; }
.cinta-solicitud .mini { font-size: 11.5px; opacity: .85; line-height: 1.45; }
.cinta-solicitud .btn { flex: none; }
@media (max-width: 700px) {
  .cinta-solicitud { flex-wrap: wrap; }
  .cinta-solicitud .crece { min-width: 100%; }
}

/* Una idea ya usada se nota a simple vista */
.card.idea-usada { background: var(--panel-2); border-style: dashed; }
.card.idea-usada h4 { color: var(--tinta-2); }

/* ═══ Bloqueo: marketing está esperando ideas ════════════ */
#bloqueo-ideas {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgba(10, 36, 28, .62); backdrop-filter: blur(4px);
  animation: aparecer .2s ease-out; padding: 20px;
}
.bloqueo-caja {
  width: min(520px, 100%); background: var(--panel); border-radius: var(--r-xl);
  box-shadow: var(--sombra-3); padding: 30px 32px 24px; text-align: center;
  animation: subir .28s cubic-bezier(.2, .8, .3, 1);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.bloqueo-icono {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px;
  background: var(--aviso-bg); color: var(--aviso); display: grid; place-items: center;
}
.bloqueo-caja h2 { font-size: 19px; line-height: 1.3; color: var(--verde-900); }
.bloqueo-texto { font-size: 13.5px; color: var(--tinta-2); line-height: 1.6; margin: 10px 0 16px; }
.bloqueo-datos {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 16px;
}
.bloqueo-datos > div {
  flex: 1; background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 11px; padding: 9px 6px;
}
.bloqueo-datos .r {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); font-weight: 600;
}
.bloqueo-datos .v { font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--verde-800); }
.bloqueo-nota { font-size: 12.5px; color: var(--tinta-3); line-height: 1.6; margin: 0 0 18px; }
.bloqueo-boton { width: 100%; height: 40px; font-size: 13.5px; }
.bloqueo-pie {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde);
}
.bloqueo-pie .btn { font-weight: 500; color: var(--tinta-3); }
@media (max-width: 700px) { .bloqueo-caja { padding: 24px 20px 18px; } }

/* ═══ Presupuesto de marketing ═══════════════════════════ */
.presupuesto-marco {
  background: linear-gradient(120deg, var(--verde-900) 0%, var(--verde-800) 52%, #0F4535 100%);
  border-radius: var(--r-xl); padding: 20px 22px; color: #DDEAE4;
  box-shadow: var(--sombra-2);
}
.presupuesto-marco.excedido {
  background: linear-gradient(120deg, #6E2A22 0%, #8B392C 55%, #7A2F25 100%);
}
.presupuesto-cifras { display: flex; gap: 14px; }
.presupuesto-cifra { flex: 1; min-width: 0; }
.presupuesto-cifra .r {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: #93B8A8; font-weight: 600;
}
.presupuesto-marco.excedido .presupuesto-cifra .r { color: #E0B5AE; }
.presupuesto-cifra .v {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em; color: #fff;
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.presupuesto-cifra .n { font-size: 11px; color: #8FB6A6; margin-top: 2px; }
.presupuesto-marco.excedido .presupuesto-cifra .n { color: #DCACA4; }
.presupuesto-cifra.bien .v { color: var(--lima); }
.presupuesto-cifra.mal .v { color: #FFC9C0; }
.presupuesto-cifra.gastado .v { color: #C7DCD3; }

.presupuesto-barra {
  position: relative; height: 9px; border-radius: 6px; margin-top: 18px;
  background: rgba(255,255,255,.14); overflow: hidden;
}
.presupuesto-relleno {
  height: 100%; background: var(--lima); border-radius: 6px;
  transition: width .35s cubic-bezier(.2,.8,.3,1);
}
.presupuesto-relleno.alto { background: #F0C04A; }
.presupuesto-relleno.excedido { background: #FF9C8C; }
.presupuesto-pct { text-align: right; font-size: 10.5px; color: #8FB6A6; margin-top: 6px; }
.presupuesto-marco.excedido .presupuesto-pct { color: #DCACA4; }

@media (max-width: 700px) {
  .presupuesto-cifras { flex-direction: column; gap: 14px; }
  .presupuesto-cifra .v { font-size: 23px; }
  .presupuesto-pct { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
   El chat del equipo

   Dos columnas: los canales a la izquierda y la conversación a la derecha.
   La conversación ocupa el alto que queda, con el hilo desplazándose por
   dentro y la caja de escribir siempre abajo, quieta.
   ═══════════════════════════════════════════════════════════ */

.chat {
  display: grid; grid-template-columns: 232px 1fr; gap: 14px;
  height: calc(100vh - 56px - 28px);
  height: calc(100dvh - 56px - 28px);
  min-height: 420px;
}

/* ── Columna de canales ── */
.chat-canales {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  display: flex; flex-direction: column; overflow-y: auto; padding: 8px;
}
.chat-canales-cab {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-3);
}
.chat-canales-cab span { flex: 1; }
.chat-canal {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 9px;
  cursor: pointer; transition: background .12s; min-width: 0;
}
.chat-canal:hover { background: var(--verde-50); }
.chat-canal.activo { background: var(--verde-100); }
.chat-canal-nombre { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.chat-almo { color: var(--tinta-3); font-weight: 700; }
.chat-canal svg { width: 12px; height: 12px; color: var(--tinta-3); flex: none; }
.chat-sin-leer {
  flex: none; background: var(--peligro); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 20px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.chat-pendientes { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 8px; }
.chat-nada { padding: 4px 9px 8px; }
.chat-encargo-mini {
  padding: 7px 9px; border-radius: 8px; cursor: pointer; border-left: 2px solid var(--verde-500);
  background: var(--verde-50); margin-bottom: 6px; font-size: 12px;
}
.chat-encargo-mini:hover { background: var(--verde-100); }
.chat-encargo-mini.tarde { border-left-color: var(--peligro); background: var(--peligro-bg); }

/* ── La conversación ── */
.chat-panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.chat-cab {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--borde); flex-wrap: wrap;
}
.chat-cab h3 { font-size: 15px; display: flex; align-items: center; gap: 4px; }
.chat-reservado {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--aviso); background: var(--aviso-bg); border-radius: 20px; padding: 2px 9px;
}
.chat-reservado svg { width: 11px; height: 11px; }
.chat-cab-acc { display: flex; align-items: center; gap: 7px; }
.chat-cab-acc input { width: 190px; }
.chat-cab-acc .btn.activo { background: var(--verde-100); border-color: var(--verde-200); }

.chat-hilo { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; scroll-behavior: smooth; }
.chat-dia { display: flex; align-items: center; margin: 14px 0 10px; }
.chat-dia::before, .chat-dia::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.chat-dia span {
  padding: 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
}

.chat-linea { display: flex; gap: 10px; padding: 3px 0; position: relative; border-radius: 8px; }
.chat-linea:hover { background: var(--panel-2); }
.chat-linea.seguido { padding-top: 0; }
.chat-linea.resaltado { background: var(--verde-100); transition: background .4s; }
.chat-avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; flex: none; margin-top: 2px; }
.chat-hueco { width: 32px; flex: none; }
.chat-caja { flex: 1; min-width: 0; position: relative; }
.chat-cab-linea, .chat-cab { min-width: 0; }
.chat-linea .chat-cab { padding: 0; border: none; gap: 7px; align-items: baseline; }
.chat-linea .chat-cab b { font-size: 13px; }
.chat-texto { font-size: 13.5px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.chat-mencion { color: var(--verde-700); background: var(--verde-50); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.chat-hora-suelta {
  position: absolute; left: -46px; top: 2px; font-size: 10px; color: var(--tinta-3);
  opacity: 0; transition: opacity .12s;
}
.chat-linea:hover .chat-hora-suelta { opacity: 1; }

.chat-citado {
  border-left: 2px solid var(--borde-2); padding: 2px 0 2px 8px; margin-bottom: 4px;
  font-size: 12px; color: var(--tinta-2); cursor: pointer; display: flex; gap: 6px; min-width: 0;
}
.chat-citado:hover { border-left-color: var(--verde-500); }
.chat-citado b { flex: none; white-space: nowrap; }
.chat-citado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.chat-foto { max-width: min(320px, 100%); border-radius: 10px; margin-top: 6px; cursor: pointer; display: block; }
.chat-archivo {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: 9px; cursor: pointer; background: var(--panel-2);
  font-size: 12.5px;
}
.chat-archivo:hover { border-color: var(--verde-500); }
.chat-expediente {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 9px;
  border-radius: 20px; background: var(--verde-50); color: var(--verde-700);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.chat-expediente:hover { background: var(--verde-100); }

.chat-encargo {
  display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 9px 12px;
  border: 1px solid var(--borde); border-left: 3px solid var(--verde-600);
  border-radius: 9px; background: var(--panel-2); font-size: 12.5px;
}
.chat-encargo.tarde { border-left-color: var(--peligro); background: var(--peligro-bg); }
.chat-encargo.hecho { opacity: .62; border-left-color: var(--ok); }
.chat-encargo.hecho b { text-decoration: line-through; }
.chat-encargo .check { margin: 0; flex: 1; }

.chat-reacciones { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.chat-marca {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--borde); background: var(--panel); cursor: pointer; font-size: 12px;
  font-family: inherit;
}
.chat-marca.mia { background: var(--verde-50); border-color: var(--verde-200); }
.chat-marca b { font-size: 10.5px; color: var(--tinta-2); }

.chat-acciones {
  position: absolute; top: -10px; right: 8px; display: none; gap: 2px; padding: 2px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 9px;
  box-shadow: var(--sombra-1); z-index: 2;
}
/* Los botones de cada mensaje salen al pasar el ratón por encima… pero solo
   donde hay ratón. En una pantalla táctil el «encima» se queda pegado
   después de tocar, y esa regla tapaba los botones justo cuando se iban a
   pulsar: parecía que no funcionaban. */
@media (hover: hover) {
  .chat-linea:hover .chat-acciones { display: flex; }
}
.chat-acciones:focus-within { display: flex; }
.chat-linea.abierto .chat-acciones { display: flex; }
.chat-linea.abierto { background: var(--verde-50); }
.chat-rea {
  width: 28px; height: 26px; display: grid; place-items: center; border: none; background: none;
  border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--tinta-2); font-family: inherit;
}
.chat-rea:hover { background: var(--verde-50); }
.chat-rea svg { width: 13px; height: 13px; }
.chat-rea.t-mal:hover { background: var(--peligro-bg); color: var(--peligro); }

/* ── Escribir ── */
.chat-escribir { border-top: 1px solid var(--borde); padding: 10px 14px 11px; background: var(--panel-2); }
.chat-respondiendo {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 7px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; font-size: 12px;
  min-width: 0;
}
.chat-respondiendo .crece { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fila-escribir { display: flex; align-items: flex-end; gap: 7px; }
.chat-fila-escribir textarea { flex: 1; min-height: 44px; }
.chat-enviar { width: 42px; padding: 0; flex: none; height: 40px; }
.chat-pista { margin-top: 6px; }

/* ── Talleres y charlas ───────────────────────────────── */
.evento-tarjeta { cursor: pointer; transition: border-color .13s, box-shadow .13s; }
.evento-tarjeta:hover { border-color: var(--verde-500); box-shadow: var(--sombra-2); }
.evento-titulo { font-size: 15.5px; line-height: 1.3; margin: 0 0 8px; }
.evento-cuando { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-2); flex-wrap: wrap; }
.evento-cuando svg { width: 14px; height: 14px; color: var(--tinta-3); flex: none; }
.evento-cifras {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde);
}
.evento-cifras b { font-size: 15px; font-variant-numeric: tabular-nums; }
.campo-evento {
  border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px; background: var(--panel-2);
}
.lista-simple { margin: 0; padding-left: 20px; }
.lista-simple li { padding: 3px 0; font-size: 13px; }