:root {
  /* Monocromo puro: negro sobre blanco. Sin rosa ni ningún otro color de
     marca — solo negro/gris/blanco, igual que la referencia. Los únicos
     colores del sistema son los semánticos (categorías, estados). */
  --accent: #16171b;
  --accent-dark: #000000;
  --accent-ink: #ffffff;
  --ink: #111318;
  --muted: #8a8f98;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #e5e3e1;
  --input-bg: #ffffff;
  --btn-dark-bg: #111318;
  --btn-ghost-bg: #f2f1f1;
  --radius-lg: 20px;
  --radius-md: 14px;
  --status-purple: #8b5cf6;
  --status-green: #10b981;
  --status-teal: #06b6d4;
  --status-blue: #3b82f6;
}

/* Modo oscuro: se activa poniendo data-theme="dark" en <html> (ver script
   anti-parpadeo en inc/layout_header.php, que lee la preferencia guardada
   en localStorage antes de pintar la página). Sigue siendo monocromo: el
   acento se invierte a un gris muy claro en vez de volverse un color. */
html[data-theme="dark"] {
  --accent: #f2f2f4;
  --accent-dark: #ffffff;
  --accent-ink: #111318;
  --ink: #f0f0f2;
  --muted: #9a9ea8;
  --page-bg: #15161a;
  --card-bg: #1c1d22;
  --border: #2d2e34;
  --input-bg: #26272d;
  --btn-dark-bg: #34353c;
  --btn-ghost-bg: #2a2b31;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

html { background: var(--page-bg); }

body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

h1, h2, h3, .page-title, .card-title, .brand-name {
  letter-spacing: -0.02em;
}

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .18s ease;
}

/* Botón para contraer/expandir el menú a una columna solo con iconos: una
   fila más dentro del pie de la barra lateral, igual que Ajustes/Salir. */
.sidebar-collapse-btn { width: 100%; background: none; border: none; font-family: inherit; }
.sidebar-collapse-btn .ic svg { transition: transform .18s ease; }

html[data-sidebar="collapsed"] .sidebar { width: 76px; }
html[data-sidebar="collapsed"] .sidebar-collapse-btn svg { transform: rotate(180deg); }
html[data-sidebar="collapsed"] .brand { justify-content: center; padding: 0; }
html[data-sidebar="collapsed"] .brand-text,
html[data-sidebar="collapsed"] .nav-label,
html[data-sidebar="collapsed"] .link-label {
  display: none;
}
html[data-sidebar="collapsed"] .nav-link { justify-content: center; gap: 0; padding: 10px 0; }

.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-badge {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(160deg, #2b2c32, #0a0a0c);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.brand-name { font-weight: 800; font-size: 15px; letter-spacing: 0.2px; }

.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 10px 8px 4px; font-weight: 700; }

.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--btn-ghost-bg); }
.nav-link.active { background: var(--btn-dark-bg); color: #fff; }
.nav-link .ic { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-link .ic svg { width: 17px; height: 17px; stroke: currentColor; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; padding: 28px 32px 60px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-userinfo { text-align: right; line-height: 1.1; }
.topbar-mobile-label { display: none; font-weight: 800; font-size: 12px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.btn.menu-toggle { display: none; }

/* Overlay tras el sidebar en móvil, para cerrarlo tocando fuera */
.sidebar-scrim { display: none; }
.sidebar-scrim.show {
  display: block; position: fixed; inset: 0; background: rgba(17,19,24,.35); z-index: 55;
}

/* ---------- Pestañas subrayadas (estilo referencia): línea divisoria +
   texto gris que pasa a negro y subrayado al estar activo ---------- */
.tabs-underline {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 22px;
}
.tab-underline-item {
  appearance: none; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 2px 13px; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
  font-family: inherit;
}
.tab-underline-item:hover { color: var(--ink); }
.tab-underline-item.active { color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); }
.tab-underline-item .count {
  background: var(--btn-dark-bg); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 1px 7px;
}

/* Línea divisoria bajo la cabecera de una sección, antes del contenido */
.section-divider { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 18px; }

/* ---------- Rejillas reutilizables (responsive de verdad, sin estilos en línea) ---------- */
.row-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grid-stats-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-stats-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-2col-main { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--btn-ghost-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--ink); border: 2px solid var(--card-bg); box-shadow: 0 0 0 1px var(--border);
}

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px;
}
.card-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.card-sub { color: var(--muted); font-size: 12.5px; }

.stat-card { background: var(--card-bg); border-radius: var(--radius-md); border: 1px solid var(--border); padding: 14px 16px; }
.stat-value { font-size: 22px; font-weight: 800; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill-accent { background: var(--accent); color: var(--accent-ink); }
.pill-dark { background: var(--btn-dark-bg); color: #fff; }
.pill-soft { background: var(--btn-ghost-bg); color: var(--ink); }

.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border: none; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-dark { background: var(--btn-dark-bg); color: #fff; }
.btn-ghost { background: var(--btn-ghost-bg); color: var(--ink); }
.btn-outline { background: var(--card-bg); border: 1px solid var(--border); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.push-right { margin-left: auto; }

.progress-track { background: var(--btn-ghost-bg); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-fill { background: var(--accent); height: 100%; border-radius: 999px; transition: width .3s ease; }

.input, select.input, textarea.input {
  width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; background: var(--input-bg); color: var(--ink);
}
/* Safari/iOS ignora min-width y el ancho del contenedor en <input
   type="date"/"time"> nativos: el widget de reloj/calendario se renderiza
   con su propio ancho mínimo interno pase lo que pase en el CSS del propio
   input. -webkit-appearance:none le quita el estilo de control nativo y
   hace que vuelva a comportarse como una caja normal que sí respeta el
   ancho del contenedor (el selector táctil al tocarlo se sigue abriendo
   igual). Además forzamos max-width:100% y box-sizing como red de seguridad. */
input.input[type="date"], input.input[type="time"] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.modal-box { overflow-x: hidden; }
.field-row { display: flex; gap: 10px; }
.field-half { flex: 1 1 0; min-width: 0; }
.input:focus, select.input:focus, textarea.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label.field-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; display: block; }

/* Título de guion: grande y sin borde, como el título de un documento */
.doc-title-input {
  flex: 1; min-width: 0; border: none; background: none; color: var(--ink);
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em; padding: 4px 2px;
}
.doc-title-input:focus { outline: none; border-bottom: 2px solid var(--accent); }
.doc-title-input::placeholder { color: var(--muted); font-weight: 700; }

/* Insignias "tinta suave": se les pasa el color vía style="color:#hex" y el
   fondo se calcula automáticamente como una versión clara del mismo color,
   mezclada con el fondo de tarjeta actual (así funciona igual en modo oscuro). */
.badge-cat {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 15%, var(--card-bg));
}
.pill-tint { background: color-mix(in srgb, currentColor 15%, var(--card-bg)); font-weight: 700; }
.pill-green { color: var(--status-green); background: color-mix(in srgb, var(--status-green) 15%, var(--card-bg)); }
.pill-purple { color: var(--status-purple); background: color-mix(in srgb, var(--status-purple) 15%, var(--card-bg)); }
.pill-teal { color: var(--status-teal); background: color-mix(in srgb, var(--status-teal) 15%, var(--card-bg)); }

/* ---------- Calendar ---------- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.calendar-day-head { font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; }
.calendar-cell {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  min-height: 130px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.calendar-cell.today { border: 2px solid var(--accent); }
.calendar-date { font-size: 12px; font-weight: 800; color: var(--muted); }
.calendar-cell.today .calendar-date { color: var(--accent); }
.task-chip {
  font-size: 11px; font-weight: 700; padding: 4px 7px; border-radius: 8px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.task-chip.done { opacity: .45; text-decoration: line-through; }

/* Vista mensual: celdas más bajas, días de otros meses atenuados */
.calendar-cell.month { min-height: 90px; }
.calendar-cell.other-month { opacity: .4; }

/* ---------- Vistas (pestañas Semana/Mes/Kanban) ---------- */
.view-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Kanban ---------- */
.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kanban-column { background: var(--page-bg); border-radius: 16px; padding: 12px; min-height: 120px; }
.kanban-column-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 13px; margin-bottom: 10px; padding: 0 2px;
}
.kanban-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; cursor: grab;
}
.kanban-card:active { cursor: grabbing; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,19,24,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-box { background: var(--card-bg); border-radius: 20px; padding: 24px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; }

@media (max-width: 768px) {
  /* En móvil el menú siempre se ve completo (con texto) al abrirlo con el
     icono ☰ — el modo "solo iconos" es cosa de escritorio, con más ancho
     de sobra para aprovechar. */
  html[data-sidebar="collapsed"] .sidebar { width: 264px; }
  .sidebar { position: fixed; left: -280px; top: 0; z-index: 60; transition: left .2s ease; height: 100vh; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .sidebar-collapse-btn { display: none; }
  .brand-text, .nav-label, .link-label { display: block; }
  .brand { justify-content: flex-start; }
  .nav-link { justify-content: flex-start; gap: 12px; padding: 10px 12px; }
  .btn.menu-toggle { display: inline-flex; }
  .main { padding: 18px 16px 60px; }
  .calendar-grid { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 720px) {
  .grid-2col-main { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-title { font-size: 21px; }
  .grid-stats-4, .grid-stats-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 18px; }
  .topbar-right { justify-content: flex-start; }
  .topbar-userinfo, .topbar-right .avatar { display: none; }
  .topbar-mobile-label { display: block; }
  .modal-box { padding: 18px; }
  .field-row { flex-direction: column; gap: 12px; }
  .push-right { margin-left: 0; }
  .kanban-board { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .grid-stats-4, .grid-stats-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Interruptor (modo oscuro, etc.) ---------- */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--btn-ghost-bg); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; transition: background .2s ease;
}
.switch-track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 50%;
  transform: translateY(-50%); background: #fff; border-radius: 50%; transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateY(-50%) translateX(18px); background: var(--accent-ink); }

/* ---------- Ajustes: filas de opción ---------- */
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-weight: 700; font-size: 14px; }
.settings-row-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ---------- Editor de texto enriquecido (Quill) ---------- */
.rich-editor-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--input-bg); }
.rich-editor-wrap .ql-toolbar.ql-snow {
  border: none; border-bottom: 1px solid var(--border);
  background: var(--btn-ghost-bg);
}
.rich-editor-wrap .ql-container.ql-snow { border: none; font-family: inherit; font-size: 14px; }
.rich-editor-wrap .ql-editor { min-height: 160px; color: var(--ink); }
.rich-editor-wrap .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.rich-editor-wrap.tall .ql-editor { min-height: 320px; }
.rich-editor-wrap.doc .ql-editor { min-height: 68vh; font-size: 15px; line-height: 1.6; padding: 28px 32px; }
/* El placeholder "Escribe aquí..." de Quill se posiciona con un left/right
   fijo (pensado para su padding por defecto de 15px) — hay que recolocarlo
   para que coincida con el padding real de este editor, si no el texto
   escrito empieza más a la derecha que el propio placeholder. */
.rich-editor-wrap.doc .ql-editor.ql-blank::before { left: 32px; right: 32px; }
.ql-font-courier-new { font-family: 'Courier New', Courier, monospace; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before {
  content: 'Courier New'; font-family: 'Courier New', Courier, monospace;
}
.ql-font-montserrat { font-family: 'Montserrat', sans-serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="montserrat"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="montserrat"]::before {
  content: 'Montserrat'; font-family: 'Montserrat', sans-serif;
}

/* Selector de tamaño de letra en puntos (8pt...36pt): la etiqueta de cada
   opción muestra el propio valor numérico en vez del texto por defecto
   de Quill ("Normal" para todas). El tamaño en sí se aplica como estilo en
   línea (font-size), no hace falta CSS aparte para que funcione. */
.ql-snow .ql-picker.ql-size { width: 70px; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value);
}
.rich-editor-wrap .ql-snow .ql-stroke { stroke: var(--muted); }
.rich-editor-wrap .ql-snow .ql-fill, .rich-editor-wrap .ql-snow .ql-stroke.ql-fill { fill: var(--muted); }
.rich-editor-wrap .ql-snow .ql-picker { color: var(--muted); }
.rich-editor-wrap .ql-snow .ql-picker-options { background: var(--card-bg); border-color: var(--border) !important; }
.rich-editor-wrap .ql-toolbar.ql-snow .ql-picker-label { border-color: transparent; }
.rich-editor-wrap .ql-snow.ql-toolbar button:hover .ql-stroke,
.rich-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.rich-editor-wrap .ql-snow.ql-toolbar button:hover .ql-fill,
.rich-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }

/* ---------- Hoja de cálculo sencilla (Documentales) ---------- */
.sheet-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.sheet { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.sheet th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 800; padding: 10px 10px; background: var(--btn-ghost-bg);
  border-bottom: 1px solid var(--border);
}
.sheet td { border-bottom: 1px solid var(--border); padding: 0; vertical-align: top; }
.sheet tr:last-child td { border-bottom: none; }
.sheet-cell {
  width: 100%; border: none; background: transparent; color: var(--ink);
  font-size: 13px; font-family: inherit; padding: 9px 10px; resize: none;
}
.sheet-cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.sheet-del { color: #c0392b; background: none; border: none; cursor: pointer; padding: 9px 10px; }
.sheet-foot { padding: 10px; text-align: center; color: var(--muted); font-size: 13px; }

/* Impresión: oculta sidebar/topbar y cualquier elemento marcado .no-print */
@media print {
  .sidebar, .topbar, .sidebar-scrim, .no-print { display: none !important; }
  .main { padding: 0 !important; }
  .card { border: none !important; box-shadow: none !important; padding: 0 !important; }
  body { background: #fff !important; }
  .rich-editor-wrap { border: none !important; }
  .rich-editor-wrap .ql-toolbar { display: none !important; }
  .rich-editor-wrap.doc .ql-editor { max-width: none !important; padding: 0 !important; }
}