/* =====================================================
   rc-styles.css — SIMPLE Design System v3.2
   República Creativa
   ─────────────────────────────────────────────────
   REGLA DE ORO: Ningún módulo redefine lo que está
   aquí. Solo estilos exclusivos de esa pantalla.
   ===================================================== */


/* ─────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:       #ed1c24;

  /* Surfaces */
  --bg:          #f4f3f1;
  --surface:     #ffffff;

  /* Text — solo 2 niveles, sin intermedios */
  --text:        #4c4c4c;
  --text-muted:  rgba(76,76,76,.58);   /* ↑ de .68 → contraste suficiente sin ruido */

  /* Líneas — solo 2 niveles con diferencia perceptible */
  --line:        rgba(76,76,76,.18);   /* bordes de inputs, botones, divisores fuertes */
  --line-soft:   rgba(76,76,76,.09);   /* separadores internos de cards, filas de tabla */
  --line-w:      1px;

  /* Semánticos */
  --success:     #16a34a;
  --info:        #1d4ed8;
  --warning:     #d97706;
  --danger:      #dc2626;

  /* Tipografía — Inter únicamente, 3 tamaños de uso frecuente */
  --font:        "Inter", system-ui, -apple-system, sans-serif;
  --fs-xs:       12px;   /* micro: labels uppercase, badges, timestamps */
  --fs-sm:       13px;   /* tablas densas, metadata secundaria */
  --fs-md:       14px;   /* cuerpo base, inputs, botones */
  --fs-lg:       16px;   /* títulos de sección, card-title */
  --fs-xl:       18px;   /* KPI secundario */
  --fs-2xl:      22px;   /* KPI principal */
  --fs-3xl:      28px;   /* KPI grande — finanzas, proyectos */
  --fs-hero:     36px;   /* Título hero — presentaciones */
  --fs-icon:     44px;   /* Íconos decorativos grandes */

  --fw-normal:   400;    /* cuerpo, descripciones */
  --fw-medium:   500;    /* labels, nav, UI controls */
  --fw-semibold: 600;    /* títulos sección, nombres en tabla */
  --fw-bold:     700;    /* KPIs, headings, números grandes */

  /* Spacing — grid de 4pt */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px;

  /* Radios — solo 3, sin valores intermedios */
  --r-sm:  4px;    /* chips micro, botones sm */
  --r-md:  8px;    /* botones, inputs, dropdowns */
  --r-lg:  12px;   /* cards, modales, panels */

  /* Botones */
  --h-btn:        34px;
  --h-btn-sm:     28px;
  --pad-btn-x:    16px;
  --pad-btn-x-sm: 10px;

  /* Sombras — bloques sin borde, separación por sombra */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,.10);
  --shadow-modal: 0 20px 60px rgba(0,0,0,.18);

  /* Focus */
  --ring: 0 0 0 3px rgba(237,28,36,.18);

  /* Hover universal — un solo valor, sin ruido */
  --hover-bg:    rgba(0,0,0,.035);
  --active-bg:   rgba(0,0,0,.06);

  /* Aliases */
  --muted:  var(--text-muted);
  --accent: var(--brand);

  /* Aliases de compatibilidad — mapean tokens inválidos de módulos legacy a tokens del sistema */
  --radius:       var(--r-md);
  --radius-sm:    var(--r-sm);
  --radius-lg:    var(--r-lg);
  --radius-pill:  999px;
  --fs-small:     var(--fs-xs);
  --fs-body:      var(--fs-sm);
  --fs-value:     var(--fs-md);
  --fs-title:     var(--fs-lg);
  --fs-label:     var(--fs-xs);
  --fs-micro:     var(--fs-xs);
  --fw-light:     var(--fw-normal);
  --danger-dk:    var(--danger);
  --danger-bd:    rgba(220,38,38,.30);
  --danger-bg:    rgba(220,38,38,.06);
  --danger-lt:    rgba(220,38,38,.06);
  --color-green-dk: var(--success);
  --color-blue:   var(--info);
}


/* ─────────────────────────────────────────────────
   2. RESET + BASE
   ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family:            var(--font);
  font-size:              var(--fs-md);
  font-weight:            var(--fw-normal);
  color:                  var(--text);
  background:             var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height:             100vh;
}
a { color: inherit; text-decoration: none; }


/* ─────────────────────────────────────────────────
   3. LAYOUT
   ───────────────────────────────────────────────── */
.wrap        { max-width: 940px; margin: 0 auto; padding: 0 0 60px; }
.page-head        { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.page-title       { font-size: 20px; font-weight: var(--fw-bold); color: var(--text); }
.page-toolbar     { display: flex; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s3); border-bottom: var(--line-w) solid var(--line-soft); }
.page-toolbar-tabs { display: flex; align-items: flex-end; }
.page-toolbar .search-wrap { margin-left: auto; margin-bottom: 4px; background: var(--bg); position: relative; }
.page-head-left   { display: flex; align-items: center; gap: var(--s2); flex: 1; }
.page-count  { font-size: var(--fs-xs); color: var(--text-muted); }

/* Separador de sección al estilo finanzas — título + línea que extiende */
.sec-hd {
  display:       flex;
  align-items:   center;
  gap:           var(--s3);
  margin-bottom: var(--s3);
  margin-top:    var(--s6);
}
.sec-hd-lbl {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .7px;
  color:          var(--text-muted);
  white-space:    nowrap;
}
.sec-hd::after {
  content:    '';
  flex:       1;
  height:     var(--line-w);
  background: var(--line-soft);
}


/* ─────────────────────────────────────────────────
   4. BOTONES
   ───────────────────────────────────────────────── */
.btn {
  appearance:      none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--s2);
  height:          var(--h-btn);
  padding:         0 var(--pad-btn-x);
  border:          var(--line-w) solid var(--line);
  border-radius:   var(--r-md);
  background:      var(--surface);
  color:           var(--text);
  font-family:     var(--font);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-medium);
  cursor:          pointer;
  user-select:     none;
  white-space:     nowrap;
  text-decoration: none;
  transition:      transform .06s ease, background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover  { background: var(--hover-bg); border-color: rgba(76,76,76,.28); }
.btn:active { transform: translateY(1px); }
.btn:focus  { outline: none; box-shadow: var(--ring); }

/* Primary — acción principal de pantalla */
.btn.primary {
  background:   var(--brand);
  border-color: var(--brand);
  color:        #fff;
  box-shadow:   0 6px 18px rgba(237,28,36,.22);
}
.btn.primary:hover { filter: brightness(.97); background: var(--brand); }

/* Ghost — acciones secundarias, navegación */
.btn.ghost {
  background:   transparent;
  border-color: transparent;
  box-shadow:   none;
}
.btn.ghost:hover { background: var(--hover-bg); border-color: transparent; }

/* Danger — acciones destructivas */
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(.96); background: var(--danger); }

/* Info */
.btn.info { background: var(--info); border-color: var(--info); color: #fff; }
.btn.info:hover { filter: brightness(.96); background: var(--info); }

/* Small — sm y mini son el mismo tamaño */
.btn.sm,
.btn.mini {
  height:        var(--h-btn-sm);
  padding:       0 var(--pad-btn-x-sm);
  border-radius: var(--r-sm);
  font-size:     var(--fs-xs);
}
.btn.icon    { width: var(--h-btn);    padding: 0; }
.btn.icon.sm { width: var(--h-btn-sm); padding: 0; }

/* Plus button (finanzas pattern — inline en tablas) */
.btn-plus {
  width:         var(--h-btn-sm);
  height:        var(--h-btn-sm);
  border-radius: var(--r-sm);
  border:        var(--line-w) solid var(--line);
  background:    var(--surface);
  cursor:        pointer;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  color:         var(--text-muted);
  transition:    all .12s;
}
.btn-plus:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-plus svg   { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }


/* ─────────────────────────────────────────────────
   5. INPUTS / FORMULARIOS
   ───────────────────────────────────────────────── */
label {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom:  var(--s1);
  font-family:    var(--font);
}

input[type=text]:not(.unstyled),
input[type=email]:not(.unstyled),
input[type=number]:not(.unstyled),
input[type=search]:not(.unstyled),
input[type=date]:not(.unstyled),
input[type=tel]:not(.unstyled),
input[type=url]:not(.unstyled),
input[type=password]:not(.unstyled),
input:not([type]):not(.unstyled),
select:not(.unstyled),
textarea:not(.unstyled) {
  width:         100%;
  border:        var(--line-w) solid var(--line);
  border-radius: var(--r-md);
  background:    var(--surface);
  color:         var(--text);
  font-family:   var(--font);
  font-size:     var(--fs-md);
  padding:       0 var(--s3);
  outline:       none;
  transition:    border-color .12s, box-shadow .12s;
}
input:not(textarea):not([type=checkbox]):not([type=radio]):not(.unstyled),
select:not(.unstyled) { height: var(--h-btn); }

textarea:not(.unstyled) { min-height: 88px; resize: vertical; padding: var(--s2) var(--s3); }

input:not(.unstyled):focus, select:not(.unstyled):focus, textarea:not(.unstyled):focus {
  border-color: rgba(237,28,36,.4);
  box-shadow:   var(--ring);
}

/* Input sin estilo del sistema — topbar, editores inline, selects transparentes */
.unstyled {
  border:        none !important;
  border-radius: 0    !important;
  background:    transparent !important;
  box-shadow:    none !important;
  padding:       0    !important;
  height:        auto !important;
  width:         auto;
  outline:       none;
  font-family:   var(--font);
  color:         var(--text);
}
.unstyled:focus { outline: none; box-shadow: none !important; }

/* Buscador inline */
.search-wrap {
  display:       flex;
  align-items:   center;
  gap:           var(--s2);
  border:        none;
  border-radius: var(--r-md);
  padding:       0 var(--s3);
  height:        var(--h-btn);
  background:    var(--surface);
  width:         240px;
  flex-shrink:   0;
}
.search-wrap input,
.search-in {
  border:              none !important;
  background:          transparent;
  font-size:           var(--fs-sm);
  font-family:         var(--font);
  outline:             none !important;
  box-shadow:          none !important;
  -webkit-appearance:  none;
  width:               100%;
  color:               var(--text);
  height:              auto;
  padding:             0;
}
.search-wrap input::placeholder,
.search-in::placeholder { color: rgba(76,76,76,.25); }
.search-in:focus { border: none; box-shadow: none; }


/* ─────────────────────────────────────────────────
   6. CARDS — sin borde, separación por sombra
   ───────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        0;
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.card-clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.card-clickable:hover  { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-clickable:active { transform: translateY(0); box-shadow: var(--shadow-sm); }


/* ─────────────────────────────────────────────────
   7. TABLA
   ───────────────────────────────────────────────── */
.rc-table-wrap {
  background:    var(--surface);
  border:        0;
  border-radius: 0;
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}
table.rc-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--fs-sm);
  font-family:     var(--font);
}
table.rc-table thead tr { background: rgba(76,76,76,.03); }
table.rc-table th {
  padding:        6px var(--s4);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align:     left;
  border-bottom:  var(--line-w) solid var(--line);
  white-space:    nowrap;
}
/* Columnas ordenables */
table.rc-table th.rc-sortable {
  cursor:      pointer;
  user-select: none;
}
table.rc-table th.rc-sortable:hover { color: var(--text); }
table.rc-table th.rc-sortable .rc-sort-icon {
  display:        inline-flex;
  flex-direction: column;
  gap:            1px;
  margin-left:    5px;
  vertical-align: middle;
  opacity:        .35;
  transition:     opacity .12s;
}
table.rc-table th.rc-sortable:hover .rc-sort-icon { opacity: .7; }
table.rc-table th.rc-sort-asc  .rc-sort-icon,
table.rc-table th.rc-sort-desc .rc-sort-icon { opacity: 1; color: var(--text); }
table.rc-table th.rc-sort-asc  .rc-sort-icon svg:first-child { opacity: 1; }
table.rc-table th.rc-sort-asc  .rc-sort-icon svg:last-child  { opacity: .25; }
table.rc-table th.rc-sort-desc .rc-sort-icon svg:first-child { opacity: .25; }
table.rc-table th.rc-sort-desc .rc-sort-icon svg:last-child  { opacity: 1; }

table.rc-table td {
  padding:        var(--s2) var(--s4);
  border-bottom:  var(--line-w) solid var(--line-soft);
  vertical-align: middle;
}
table.rc-table tbody tr:last-child td { border-bottom: none; }
table.rc-table tbody tr.rc-click      { cursor: pointer; transition: background .1s; }
table.rc-table tbody tr:hover td      { background: var(--hover-bg); }
table.rc-table tbody tr.rc-active     { background: rgba(0,0,0,.04); }
table.rc-table tbody tr.rc-done td    { opacity: .5; }

/* Columna nombre — siempre semibold */
table.rc-table td:first-child { font-weight: var(--fw-semibold); }

/* Filas de resumen (patrón finanzas) */
.tr-total td { background: var(--text); color: #fff; font-weight: var(--fw-bold); border: none; }
.tr-pos   td { background: rgba(22,163,74,.08); color: var(--success); font-weight: var(--fw-semibold); border-top: var(--line-w) solid rgba(22,163,74,.18); border-bottom: none; }
.tr-neg   td { background: rgba(220,38,38,.06); color: var(--danger);  font-weight: var(--fw-semibold); border-top: var(--line-w) solid rgba(220,38,38,.16); border-bottom: none; }
.tr-sub   td { background: rgba(0,0,0,.02);     font-weight: var(--fw-semibold); border-top: var(--line-w) solid var(--line-soft); }

/* Helpers de celda */
.rc-v  { font-weight: var(--fw-semibold); color: var(--text); }
.rc-s  { color: var(--text-muted);        font-size: var(--fs-xs); }
.rc-n  { font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font); }
.rc-x  { width: 36px; text-align: center; }
.rc-a  { text-align: right; white-space: nowrap; }
.rc-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }

/* Delete inline */
.rc-del {
  background:    none;
  border:        none;
  color:         var(--text-muted);
  cursor:        pointer;
  font-size:     15px;
  line-height:   1;
  padding:       2px 6px;
  border-radius: var(--r-sm);
  opacity:       .4;
  transition:    color .1s, background .1s, opacity .1s;
}
.rc-del:hover { color: var(--danger); background: rgba(220,38,38,.08); opacity: 1; }

/* Fila + agregar (patrón finanzas) */
.add-row {
  width:       100%;
  padding:     var(--s2) var(--s4);
  background:  transparent;
  border:      none;
  border-top:  1px dashed var(--line-soft);
  color:       var(--text-muted);
  font-family: var(--font);
  font-size:   var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor:      pointer;
  text-align:  left;
  display:     flex;
  align-items: center;
  gap:         var(--s2);
  transition:  all .12s;
}
.add-row:hover { background: var(--hover-bg); color: var(--text); }

/* Tag / badge inline */
.rc-tag {
  display:       inline-flex;
  align-items:   center;
  height:        20px;
  padding:       0 var(--s2);
  border-radius: 999px;
  font-size:     var(--fs-xs);
  font-weight:   var(--fw-semibold);
  background:    rgba(76,76,76,.07);
  color:         var(--text-muted);
  white-space:   nowrap;
}

/* Status badges */
.rc-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  height:        22px;
  padding:       0 var(--s2);
  border-radius: 999px;
  font-size:     var(--fs-xs);
  font-weight:   var(--fw-semibold);
  white-space:   nowrap;
  background:    rgba(76,76,76,.07);
  color:         var(--text-muted);
}
.rc-badge.draft  { background: rgba(76,76,76,.07);  color: var(--text-muted); }
.rc-badge.rev    { background: rgba(217,119,6,.10); color: var(--warning); }
.rc-badge.proc   { background: rgba(29,78,216,.10); color: var(--info); }
.rc-badge.aprov,
.rc-badge.done,
.rc-badge.final  { background: rgba(22,163,74,.10); color: var(--success); }
.rc-badge.rechaz { background: rgba(220,38,38,.10); color: var(--danger); }
.rc-badge.coment { background: rgba(29,78,216,.10); color: var(--info); }


/* ─────────────────────────────────────────────────
   8. TABS — navegación de sección (underline)
      Distinción clara: tabs = páginas, subtabs = filtros
   ───────────────────────────────────────────────── */
.tabs-row,
.prd-tabs {
  display:       flex;
  border-bottom: var(--line-w) solid var(--line-soft);
  margin-bottom: var(--s4);
  gap:           var(--s1);
}
/* Dentro del page-toolbar, no duplicar el border */
.page-toolbar .prd-tabs,
.page-toolbar .tabs-row,
.page-toolbar .cot-tabs {
  border-bottom: none;
  margin-bottom: 0;
}
.tab-btn {
  background:    none;
  border:        none;
  border-bottom: 2px solid transparent;
  padding:       var(--s2) var(--s5);
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-medium);
  font-family:   var(--font);
  color:         var(--text-muted);
  cursor:        pointer;
  transition:    color .14s, border-color .14s;
  margin-bottom: -1px;
  white-space:   nowrap;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--text); font-weight: var(--fw-semibold); border-bottom-color: var(--brand); }

/* Subtabs — pills para filtros dentro de una sección */
.subtabs-row {
  display:       flex;
  gap:           var(--s2);
  margin-bottom: var(--s4);
  padding:       var(--s2) 0;
  flex-wrap:     wrap;
}
.subtab-btn {
  font-family:   var(--font);
  font-size:     var(--fs-xs);
  font-weight:   var(--fw-medium);
  color:         var(--text-muted);
  padding:       4px 14px;
  border:        var(--line-w) solid var(--line);
  border-radius: 999px;
  background:    transparent;
  cursor:        pointer;
  transition:    all .13s;
  white-space:   nowrap;
}
.subtab-btn:hover  { border-color: rgba(76,76,76,.30); color: var(--text); }
.subtab-btn.active { background: var(--text); border-color: var(--text); color: #fff; font-weight: var(--fw-semibold); }


/* ─────────────────────────────────────────────────
   9. CHIPS

/* ─────────────────────────────────────────────────
   10. EDITOR PANEL
   ───────────────────────────────────────────────── */
.editor-panel {
  background:    var(--surface);
  border:        0;
  border-radius: var(--r-lg);
  padding:       var(--s6);
  margin-bottom: var(--s3);
  box-shadow:    var(--shadow-sm);
}
.editor-panel .row     { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s3); }
.editor-panel .row.one { grid-template-columns: 1fr; }
.editor-actions        { display: flex; gap: var(--s2); margin-top: var(--s2); align-items: center; flex-wrap: wrap; }


/* ─────────────────────────────────────────────────
   11. MODAL
   ───────────────────────────────────────────────── */
.modal {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         400;
  background:      rgba(28,28,30,.42);
  align-items:     center;
  justify-content: center;
  padding:         var(--s4);
  padding-left:    calc(260px + var(--s4));
}
.modal.show { display: flex; }

.modal-card {
  width:          min(600px, 100%);
  max-height:     88vh;
  overflow:       hidden;
  border:         0;
  border-radius:  var(--r-lg);
  background:     var(--surface);
  box-shadow:     var(--shadow-modal);
  display:        flex;
  flex-direction: column;
}
.modal-head,
.modal-hd {
  padding:       var(--s4) var(--s5);
  border-bottom: var(--line-w) solid var(--line-soft);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  background:    var(--surface);
  flex-shrink:   0;
}
.modal-head strong,
.modal-title {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: .8px;
  text-transform: uppercase;
}
.modal-body { padding: var(--s5); overflow: auto; flex: 1; min-height: 0; }
.modal-ft   { padding: var(--s4) var(--s5); flex-shrink: 0; border-top: var(--line-w) solid var(--line-soft); display: flex; gap: var(--s2); justify-content: flex-end; }

.modal-close {
  width:         var(--h-btn-sm);
  height:        var(--h-btn-sm);
  border-radius: var(--r-sm);
  border:        var(--line-w) solid var(--line);
  background:    var(--surface);
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  font-size:     15px;
  color:         var(--text-muted);
  padding:       0;
  flex-shrink:   0;
  transition:    background .1s;
}
.modal-close:hover { background: var(--bg); }

.modal-2col      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.modal-col-left,
.modal-col-right { display: flex; flex-direction: column; gap: var(--s3); }


/* ─────────────────────────────────────────────────
   12. TOAST — esquina inferior derecha
   ───────────────────────────────────────────────── */
#toastBox {
  position:       fixed;
  bottom:         var(--s6);
  right:          var(--s6);
  display:        flex;
  flex-direction: column-reverse;
  gap:            var(--s2);
  z-index:        9999;
  pointer-events: none;
}
.toast {
  background:     var(--text);
  color:          #fff;
  padding:        10px var(--s4);
  border-radius:  var(--r-md);
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-medium);
  opacity:        0;
  transform:      translateY(6px);
  transition:     opacity .2s, transform .2s;
  pointer-events: none;
  max-width:      300px;
  box-shadow:     var(--shadow-md);
}
.toast.show     { opacity: 1; transform: translateY(0); }
.toast.hide     { opacity: 0; transform: translateY(6px); }
.toast.t-ok,
.toast.t-success { background: #065f46; opacity: 1; transform: translateY(0); }
.toast.t-err,
.toast.t-error   { background: #b91c1c; opacity: 1; transform: translateY(0); }
.toast.t-info    { background: var(--info);    opacity: 1; transform: translateY(0); }
.toast.t-warn    { background: var(--warning); opacity: 1; transform: translateY(0); }





/* ─────────────────────────────────────────────────
   14. DROPDOWN GENÉRICO
   ───────────────────────────────────────────────── */
.dd-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  background:    var(--surface);
  border:        var(--line-w) solid var(--line);
  border-radius: var(--r-md);
  box-shadow:    var(--shadow-md);
  min-width:     160px;
  z-index:       300;
  overflow:      hidden;
}
.dd-menu.open { display: block; }
.dd-item {
  display:     block;
  width:       100%;
  padding:     var(--s2) var(--s4);
  border:      none;
  background:  none;
  text-align:  left;
  font-size:   var(--fs-sm);
  font-family: var(--font);
  color:       var(--text);
  cursor:      pointer;
  transition:  background .1s;
}
.dd-item:hover { background: var(--hover-bg); }


/* ─────────────────────────────────────────────────
   15. PAGER / OVERLAY / DIVIDER
   ───────────────────────────────────────────────── */
.pager {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     var(--s3) 0 0;
  color:       var(--text-muted);
  font-size:   var(--fs-sm);
}
.divider { height: var(--line-w); background: var(--line-soft); margin: var(--s6) 0; }

.overlay {
  position:        fixed;
  inset:           0;
  z-index:         900;
  background:      rgba(244,243,241,.82);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--fs-sm);
  color:           var(--text-muted);
}


/* ─────────────────────────────────────────────────
   16. VIEW TOGGLE (lista / kanban / gantt)
   ───────────────────────────────────────────────── */
.view-toggle {
  display:       flex;
  border:        var(--line-w) solid var(--line);
  border-radius: var(--r-sm);
  overflow:      hidden;
}
.vbtn {
  height:      var(--h-btn-sm);
  padding:     0 var(--s3);
  border:      none;
  background:  var(--surface);
  color:       var(--text-muted);
  font-size:   var(--fs-xs);
  font-family: var(--font);
  cursor:      pointer;
  transition:  background .1s, color .1s;
  display:     flex;
  align-items: center;
  gap:         4px;
}
.vbtn + .vbtn             { border-left: var(--line-w) solid var(--line); }
.vbtn.active              { background: var(--active-bg); color: var(--text); font-weight: var(--fw-medium); }
.vbtn:not(.active):hover  { background: var(--hover-bg); }


/* ─────────────────────────────────────────────────
   17. FILE CHIPS / ADJUNTOS
   ───────────────────────────────────────────────── */
.file-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  height:        26px;
  padding:       0 10px;
  border:        var(--line-w) solid var(--line);
  border-radius: 999px;
  font-size:     var(--fs-xs);
  color:         var(--text);
  background:    var(--surface);
  cursor:        pointer;
  transition:    background .1s;
}
.file-chip:hover { background: var(--hover-bg); }

.mfile-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       4px var(--s2);
  border:        var(--line-w) solid var(--line);
  border-radius: var(--r-sm);
  font-size:     var(--fs-xs);
  color:         var(--text-muted);
}
.mfile-chip .rm { cursor: pointer; color: var(--danger); }

.file-drop {
  border:        2px dashed var(--line);
  border-radius: var(--r-md);
  padding:       var(--s5);
  text-align:    center;
  cursor:        pointer;
  transition:    border-color .15s, background .15s;
  background:    rgba(76,76,76,.06);
}
.file-drop:hover    { border-color: var(--brand); background: rgba(237,28,36,.04); }
.file-drop-icon     { font-size: 22px; margin-bottom: var(--s2); color: var(--text-muted); }
.file-drop-txt      { font-size: var(--fs-sm); color: var(--text-muted); }


/* ─────────────────────────────────────────────────
   18. TODO / TAREAS
   ───────────────────────────────────────────────── */
.todo-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--s2);
  padding:       var(--s2) 10px;
  border-radius: var(--r-md);
  transition:    background .1s;
}
.todo-item:hover                    { background: var(--hover-bg); }
.todo-item.dragging                 { opacity: .35; }
.todo-item.drag-over                { background: rgba(237,28,36,.04); }
.todo-item:hover .todo-handle,
.todo-item:hover .todo-del,
.todo-item:hover .todo-fecha-btn    { opacity: 1; }

.todo-check {
  width:         18px;
  height:        18px;
  border:        var(--line-w) solid var(--line);
  border-radius: var(--r-sm);
  flex-shrink:   0;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-top:    2px;
  transition:    background .1s, border-color .1s;
}
.todo-check.done { background: var(--success); border-color: var(--success); }

.todo-text          { font-size: var(--fs-sm); flex: 1; line-height: 1.45; }
.todo-text.done     { text-decoration: line-through; color: var(--text-muted); }
.todo-text-edit     { font-size: var(--fs-sm); width: 100%; }
.todo-handle        { cursor: grab; color: var(--text-muted); opacity: 0; transition: opacity .1s; font-size: 13px; }
.todo-del           { opacity: 0; transition: opacity .1s; }
.todo-fecha-btn     { opacity: 0; transition: opacity .1s; font-size: var(--fs-xs); }
.todo-pri-opt       { padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-xs); }
.todo-pri-opt.active { background: rgba(237,28,36,.08); color: var(--brand); }
.todo-group-header  {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .7px;
  color:          var(--text-muted);
  padding:        var(--s2) var(--s2) var(--s1);
}
.todo-edit-panel { padding: var(--s2) 10px var(--s2) 34px; }
.todo-edit-panel input[type=date] { height: auto; padding: 4px 8px; font-size: var(--fs-xs); }