@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --uocc-page-bg: #090a0c;
  --uocc-surface: #111317;
  --uocc-surface-soft: #171b22;
  --uocc-ink: #050505;
  --uocc-text: #f4f5f7;
  --uocc-muted: #a1a6af;
  --uocc-line: #2a2e35;
  --uocc-grid-line: rgba(147, 197, 253, .10);
  --uocc-brand: #0195fb;
  --uocc-brand-strong: #74c8ff;
  --uocc-brand-deep: #064e7e;
  --uocc-brand-soft: #102b3d;
  --uocc-on-brand: #07111f;
  --uocc-action-primary: #0073c4;
  --uocc-action-primary-text: #ffffff;
  --uocc-radius: 6px;
  --uocc-radius-small: 3px;
  --uocc-content-width: 1180px;
  --uocc-font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --uocc-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --uocc-font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --uocc-control-height: 44px;
  --uocc-control-padding-x: 12px;
  --uocc-control-font-size: 15px;
}

:root[data-theme="light"] {
  --uocc-page-bg: #f5f5f4;
  --uocc-surface: #ffffff;
  --uocc-surface-soft: #eef3f8;
  --uocc-ink: #050505;
  --uocc-text: #121417;
  --uocc-muted: #555b64;
  --uocc-line: #d5d9df;
  --uocc-grid-line: rgba(29, 78, 216, .09);
  --uocc-brand: #0195fb;
  --uocc-brand-strong: #0068b8;
  --uocc-brand-deep: #004d87;
  --uocc-brand-soft: #e3f3ff;
  --uocc-on-brand: #07111f;
}

::selection {
  background: var(--uocc-brand);
  color: var(--uocc-on-brand);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--uocc-brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Navegación compartida: geometría editorial y contraste institucional. */
.uocc-nav-header {
  border-color: var(--uocc-line);
  border-radius: var(--uocc-radius);
  background: color-mix(in srgb, var(--uocc-surface) 94%, transparent);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
:root:not([data-theme="light"]) .uocc-nav-header {
  border-color: rgba(96, 165, 250, .38);
}
.uocc-nav-brand-logo {
  filter: drop-shadow(0 2px 6px rgba(0, 150, 252, .28));
}
.uocc-nav-brand-copy strong {
  color: var(--uocc-brand-strong);
  font-family: var(--uocc-font-display);
}
:root[data-theme="light"] .uocc-nav-brand-logo {
  filter: drop-shadow(0 2px 5px rgba(29, 78, 216, .16));
}
:root[data-theme="light"] .uocc-nav-brand-copy strong {
  color: var(--uocc-brand);
}
.uocc-nav-brand-copy span,
.uocc-nav-user { color: var(--uocc-muted); }
.uocc-nav-backdrop { background: color-mix(in srgb, var(--uocc-ink) 72%, transparent); }
.uocc-nav-user,
.uocc-nav-toggle,
.uocc-nav-close { border-radius: var(--uocc-radius-small); }
.uocc-nav-toggle {
  border-color: var(--uocc-brand);
  background: var(--uocc-surface-soft);
  color: var(--uocc-brand-strong);
}
.uocc-nav-toggle:hover {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
.uocc-nav-toggle:focus-visible {
  border-color: var(--uocc-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uocc-brand) 24%, transparent);
}
:root:not([data-theme="light"]) .uocc-nav-toggle {
  border-color: var(--uocc-brand);
  background: var(--uocc-surface-soft);
  color: var(--uocc-brand-strong);
}
:root:not([data-theme="light"]) .uocc-nav-toggle:hover {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
:root[data-theme="light"] .uocc-nav-toggle {
  border-color: var(--uocc-brand);
  background: var(--uocc-brand-soft);
  color: var(--uocc-brand-deep);
}
:root[data-theme="light"] .uocc-nav-toggle:hover {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
.uocc-nav-drawer {
  border-left-color: color-mix(in srgb, var(--uocc-brand) 42%, transparent);
  background:
    linear-gradient(var(--uocc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--uocc-grid-line) 1px, transparent 1px),
    var(--uocc-page-bg);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: -20px 0 60px rgba(0,0,0,.42);
}
.uocc-nav-drawer-header,
.uocc-nav-account {
  border-radius: var(--uocc-radius);
  border-color: var(--uocc-line);
  background: var(--uocc-surface);
  box-shadow: none;
}
.uocc-nav-links { counter-reset: uocc-nav-item; }
.uocc-nav-link {
  counter-increment: uocc-nav-item;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface);
  box-shadow: none;
}
.uocc-nav-link::before {
  content: counter(uocc-nav-item, decimal-leading-zero);
  color: var(--uocc-brand);
  font-family: var(--uocc-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.uocc-nav-link-copy strong { font-family: var(--uocc-font-display); }
.uocc-nav-link-eyebrow,
.uocc-nav-label { font-family: var(--uocc-font-mono); }
.uocc-nav-link.uocc-nav-link--active {
  border-color: var(--uocc-brand);
  background: var(--uocc-brand);
  color: var(--uocc-on-brand);
  box-shadow: none;
}
.uocc-nav-link.uocc-nav-link--active::before,
.uocc-nav-link.uocc-nav-link--active .uocc-nav-link-copy strong,
.uocc-nav-link.uocc-nav-link--active .uocc-nav-link-copy small,
.uocc-nav-link.uocc-nav-link--active .uocc-nav-link-eyebrow,
.uocc-nav-link.uocc-nav-link--active .uocc-nav-link-arrow { color: var(--uocc-on-brand); }
.uocc-nav-link.uocc-nav-link--active .uocc-nav-link-arrow {
  background: color-mix(in srgb, var(--uocc-on-brand) 16%, transparent);
}
:root[data-theme="light"] .uocc-nav-header,
:root[data-theme="light"] .uocc-nav-drawer-header,
:root[data-theme="light"] .uocc-nav-account,
:root[data-theme="light"] .uocc-nav-link {
  border-color: var(--uocc-line);
  background-color: var(--uocc-surface);
  box-shadow: none;
}
:root[data-theme="light"] .uocc-nav-header {
  border-color: #93c5fd;
}
:root[data-theme="light"] .uocc-nav-drawer {
  background:
    linear-gradient(var(--uocc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--uocc-grid-line) 1px, transparent 1px),
    var(--uocc-page-bg);
  background-size: 24px 24px, 24px 24px, auto;
}
:root[data-theme="light"] .uocc-nav-link.uocc-nav-link--active {
  border-color: var(--uocc-brand);
  background: var(--uocc-brand);
  box-shadow: none;
}

/* Inicio: composición editorial compacta sin alterar contenido operativo. */
.home-mode {
  background: var(--uocc-page-bg);
  color: var(--uocc-text);
  font-family: var(--uocc-font-body);
}
.home-mode .shell { gap: 16px; }
.home-mode .card {
  border-color: var(--uocc-line);
  border-radius: var(--uocc-radius);
  background: var(--uocc-surface);
  box-shadow: none;
}
.home-mode .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: start;
  min-height: 0;
  padding: 24px;
  border-top: 5px solid var(--uocc-brand);
}
.home-mode .hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 0 48%;
  background-image:
    radial-gradient(circle, var(--uocc-brand) 0 2px, transparent 2.5px),
    linear-gradient(var(--uocc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--uocc-grid-line) 1px, transparent 1px);
  background-size: 48px 48px, 24px 24px, 24px 24px;
  opacity: .58;
  transform: skewX(-8deg) translateX(8%);
  transform-origin: bottom right;
}
.home-mode .hero::after {
  content: "MOPC · UOCC · UOCP.APP";
  position: absolute;
  z-index: -1;
  right: 24px;
  bottom: 18px;
  color: color-mix(in srgb, var(--uocc-brand) 62%, transparent);
  font-family: var(--uocc-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}
.home-mode .hero > * { position: relative; z-index: 1; }
.home-mode .hero-head { max-width: 650px; }
.home-mode .hero h1 {
  width: fit-content;
  max-width: 100%;
  padding: .08em .16em .12em;
  background: var(--uocc-brand);
  color: var(--uocc-on-brand);
  font-family: var(--uocc-font-display);
  font-size: clamp(2.15rem, 4.2vw, 3.85rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.045em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.home-mode .hero p { max-width: 62ch; line-height: 1.55; }
.home-mode .eyebrow {
  color: var(--uocc-brand-strong);
  font-family: var(--uocc-font-mono);
  letter-spacing: .1em;
}
.home-mode .meta-grid {
  gap: 1px;
  border: 1px solid var(--uocc-line);
  background: var(--uocc-line);
}
.home-mode .meta-item {
  border: 0;
  border-radius: 0;
  background: var(--uocc-surface-soft);
}
.home-mode .meta-item span,
.home-mode .kpi-card span,
.home-mode th { font-family: var(--uocc-font-mono); }
.home-mode h2,
.home-mode h3 { font-family: var(--uocc-font-display); }
.home-mode .section-intro { border-left: 4px solid var(--uocc-brand); padding-left: 14px; }
.home-mode .kpi-card {
  position: relative;
  overflow: hidden;
  border-color: var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  background: var(--uocc-surface-soft);
}
.home-mode .kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--uocc-brand);
}
.home-mode .panel,
.home-mode .table-wrap,
.home-mode .empty-state,
.home-mode code { border-radius: var(--uocc-radius-small); box-shadow: none; }
.home-mode main.shell button,
.home-mode main.shell .button { border-radius: 999px; box-shadow: none; }
.home-mode main.shell button:not(.secondary):not(.danger):not(.warning),
.home-mode main.shell .button:not(.secondary):not(.danger):not(.warning) {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
:root[data-theme="light"] .home-mode .card { background: var(--uocc-surface); border-color: var(--uocc-line); }
:root[data-theme="light"] .home-mode .meta-grid { background: var(--uocc-line); border-color: var(--uocc-line); }
:root[data-theme="light"] .home-mode .meta-item,
:root[data-theme="light"] .home-mode .kpi-card { background: var(--uocc-surface-soft); border-color: var(--uocc-line); }
@media (max-width: 900px) {
  .home-mode .hero { grid-template-columns: 1fr; }
  .home-mode .hero::before { inset: 42% 0 0 24%; }
  .home-mode .hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
}
@media (max-width: 640px) {
  .home-mode .hero { padding: 20px; }
  .home-mode .hero::after { display: none; }
  .home-mode .hero h1 { font-size: 2rem; }
  .home-mode .meta-grid { grid-template-columns: 1fr; }
}

/* Segunda fase: superficies operativas con el mismo sistema editorial. */
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) {
  background: var(--uocc-page-bg);
  color: var(--uocc-text);
  font-family: var(--uocc-font-body);
}

.important-dates-mode {
  padding: 28px 16px 40px;
}

:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .shell {
  gap: 16px;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .card {
  border-color: var(--uocc-line);
  border-radius: var(--uocc-radius);
  background: var(--uocc-surface);
  box-shadow: none;
}
.planner-mode .hero,
.important-dates-mode .hero,
.mcp-mode .hero,
.settings-mode .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: start;
  min-height: 0;
  padding: 24px;
  border-top: 5px solid var(--uocc-brand);
}
.planner-mode .hero::before,
.important-dates-mode .hero::before,
.mcp-mode .hero::before,
.settings-mode .hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 0 54%;
  background-image:
    radial-gradient(circle, var(--uocc-brand) 0 1.7px, transparent 2.2px),
    linear-gradient(var(--uocc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--uocc-grid-line) 1px, transparent 1px);
  background-size: 48px 48px, 24px 24px, 24px 24px;
  opacity: .62;
  transform: skewX(-7deg) translateX(9%);
}
.planner-mode .hero > *,
.important-dates-mode .hero > *,
.mcp-mode .hero > *,
.settings-mode .hero > * { position: relative; z-index: 1; }
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .hero-head { max-width: 650px; }
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .hero h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: .08em .16em .12em;
  background: var(--uocc-brand);
  color: var(--uocc-on-brand);
  font-family: var(--uocc-font-display);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}
:is(.home-mode, .planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .hero h1 {
  padding: 0;
  background: transparent;
  color: var(--uocc-brand-strong);
}
:root[data-theme="light"] :is(.home-mode, .planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .hero h1 {
  color: var(--uocc-brand);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .hero p {
  max-width: 62ch;
  line-height: 1.55;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .eyebrow {
  color: var(--uocc-brand-strong);
  font-family: var(--uocc-font-mono);
  letter-spacing: .1em;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(h2, h3) {
  font-family: var(--uocc-font-display);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .section-intro {
  border-left: 4px solid var(--uocc-brand);
  padding-left: 14px;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .meta-grid {
  gap: 1px;
  border: 1px solid var(--uocc-line);
  background: var(--uocc-line);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .meta-item {
  border: 0;
  border-radius: 0;
  background: var(--uocc-surface-soft);
  box-shadow: none;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(.meta-item span, th, label) {
  font-family: var(--uocc-font-mono);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(input, .select, .stage-trigger) {
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native) {
  height: var(--uocc-control-height);
  min-height: var(--uocc-control-height);
  padding-inline: var(--uocc-control-padding-x) 34px;
  border: 1px solid var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  background-color: var(--uocc-surface-soft);
  color: var(--uocc-text);
  font-family: var(--uocc-font-body);
  font-size: var(--uocc-control-font-size);
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native):hover {
  border-color: color-mix(in srgb, var(--uocc-brand) 58%, var(--uocc-line));
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native):focus-visible {
  outline: none;
  border-color: var(--uocc-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uocc-brand) 18%, transparent);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native):disabled {
  cursor: not-allowed;
  border-color: var(--uocc-line);
  background-color: color-mix(in srgb, var(--uocc-surface-soft) 84%, var(--uocc-page-bg));
  color: var(--uocc-muted);
  opacity: .68;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native) option {
  background: var(--uocc-surface);
  color: var(--uocc-text);
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(button, .button, .btn) {
  box-shadow: none;
}
:is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(.table-wrap, .table-shell, .panel, .empty-state) {
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  box-shadow: none;
}

/* Planner: el calendario conserva sus colores de etapa y gana estructura plana. */
.planner-mode .nav-tabs {
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  background: var(--uocc-surface-soft);
}
.planner-mode .nav-tab { border-radius: 1px; }
.planner-mode .nav-tab.active {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
  box-shadow: none;
}
.planner-mode .nav-arrow,
.planner-mode .btn-today {
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  color: var(--uocc-brand-strong);
}
.planner-mode :is(.nav-arrow, .btn-today, .btn) { border-radius: 999px; }
.planner-mode .btn:not(.secondary):not(.warning) {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
.planner-mode :is(.cal-cell, .week-col, .stage-panel) {
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  box-shadow: none;
}
.planner-mode .stage-trigger {
  height: var(--uocc-control-height);
  min-height: var(--uocc-control-height);
  padding-inline: var(--uocc-control-padding-x);
  border: 1px solid var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  background: var(--uocc-surface-soft);
  color: var(--uocc-text);
  font-family: var(--uocc-font-body);
  font-size: var(--uocc-control-font-size);
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.planner-mode .stage-trigger strong {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.planner-mode .stage-trigger:hover {
  border-color: color-mix(in srgb, var(--uocc-brand) 58%, var(--uocc-line));
}
.planner-mode .stage-trigger:focus-visible {
  outline: none;
  border-color: var(--uocc-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uocc-brand) 18%, transparent);
}
.planner-mode .stage-panel {
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  background: var(--uocc-surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--uocc-ink) 18%, transparent);
}
.planner-mode .stage-option {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--uocc-radius-small);
  color: var(--uocc-text);
}
.planner-mode .stage-option:hover {
  background: var(--uocc-brand-soft);
}
.planner-mode .stage-option.active {
  background: var(--uocc-brand-soft);
  color: var(--uocc-brand-strong);
}
.planner-mode :is(.cal-event, .week-item, .timeline-event) { border-radius: 2px; }

/* Fechas: bloques agrupados, filtros y tablas con jerarquía editorial. */
.important-dates-mode .summary-card,
.important-dates-mode .section-card {
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  box-shadow: none;
}
.important-dates-mode .summary-card { border-top: 3px solid var(--uocc-brand); }
.important-dates-mode .section-head {
  background: var(--uocc-surface);
  border-color: var(--uocc-line);
}
:root[data-theme="light"] :is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native):not(:disabled) {
  background-color: #ffffff;
}
:root[data-theme="light"] :is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) select:not(.stage-native):not(:disabled):focus {
  border-color: #315ea8;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(49, 94, 168, .12);
}
:root[data-theme="light"] :is(.planner-mode, .important-dates-mode) .multi-filter:not([open]) > summary {
  background-color: #ffffff;
}
.planner-mode .filter-bar form > :is(.select, .multi-filter) {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 320px;
}
@media (max-width: 640px) {
  .planner-mode .stage-filter {
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 320px;
  }
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary {
  box-sizing: border-box;
  height: var(--uocc-control-height);
  min-height: var(--uocc-control-height);
  padding-inline: var(--uocc-control-padding-x);
  border: 1px solid var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  color: var(--uocc-text);
  font-family: var(--uocc-font-body);
  font-size: var(--uocc-control-font-size);
  font-weight: 500;
  line-height: 1.2;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary::marker {
  content: "";
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary::-webkit-details-marker {
  display: none;
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary:hover {
  border-color: color-mix(in srgb, var(--uocc-brand) 58%, var(--uocc-line));
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary:focus-visible {
  outline: none;
  border-color: var(--uocc-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uocc-brand) 18%, transparent);
}
:is(.planner-mode, .important-dates-mode) .multi-filter[open] > summary {
  border-color: var(--uocc-brand);
  background: var(--uocc-brand-soft);
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary span {
  color: var(--uocc-text);
  font-size: var(--uocc-control-font-size);
}
.planner-mode .multi-filter summary span {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
:is(.planner-mode, .important-dates-mode) .multi-filter summary strong {
  color: var(--uocc-muted);
  font-family: var(--uocc-font-mono);
  font-size: 11px;
  font-weight: 500;
}
:is(.planner-mode, .important-dates-mode) .multi-filter[open] > summary strong {
  color: var(--uocc-brand-strong);
}
:is(.planner-mode, .important-dates-mode) .multi-filter-options {
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--uocc-line);
  border-radius: var(--uocc-radius-small);
  background: var(--uocc-surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--uocc-ink) 18%, transparent);
}
:is(.planner-mode, .important-dates-mode) .multi-filter-options label {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--uocc-radius-small);
  color: var(--uocc-text);
}
:is(.planner-mode, .important-dates-mode) .multi-filter-options label:hover {
  background: var(--uocc-brand-soft);
}
:is(.planner-mode, .important-dates-mode) .multi-filter-options label:has(input:checked) {
  background: var(--uocc-brand-soft);
  color: var(--uocc-brand-strong);
}
:is(.planner-mode, .important-dates-mode) .multi-filter-options label:has(input:disabled) {
  cursor: not-allowed;
}
.important-dates-mode .field .multi-filter-options label {
  font-size: 12px;
  line-height: 1.35;
}
:is(.planner-mode, .important-dates-mode) .multi-filter-options input {
  accent-color: var(--uocc-brand);
}
.important-dates-mode .table-wrap { background: transparent; }
.important-dates-mode .table-shell { background: var(--uocc-surface); }
.important-dates-mode .button { border-radius: 999px; }
.important-dates-mode .button:not(.secondary):not(.warning) {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}

/* MCP: acciones primarias visibles y resultados sin tarjetas flotantes. */
.mcp-mode main.shell :is(
  button:not(.secondary):not(.danger):not(.warning),
  .button:not(.secondary):not(.danger):not(.warning)
) {
  border-radius: 999px;
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
.mcp-mode :is(.panel, .kpi-card, .mcp-process-card) {
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  box-shadow: none;
}
.mcp-mode .kpi-card { border-left: 3px solid var(--uocc-brand); }
.mcp-mode .table-wrap { background: var(--uocc-surface-soft); }
.mcp-mode .mcp-page-link { border-radius: 999px; }

/* Configuración: formularios sobrios y peligro inequívoco. */
.settings-mode .audit-item,
.settings-mode .empty-state {
  border-radius: var(--uocc-radius-small);
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  box-shadow: none;
}
.settings-mode main.shell :is(button, .button) { border-radius: 999px; }
.settings-mode main.shell :is(button:not(.secondary):not(.danger), .button:not(.secondary):not(.danger)) {
  border-color: var(--uocc-action-primary);
  background: var(--uocc-action-primary);
  color: var(--uocc-action-primary-text);
}
.settings-mode .button.danger,
.settings-mode button.danger {
  border-color: #b42318;
  background: color-mix(in srgb, #b42318 18%, var(--uocc-surface));
  color: #fecaca;
}
:root[data-theme="light"] .settings-mode :is(.button.danger, button.danger) {
  border-color: rgba(180,35,24,.30);
  background: #fdecec;
  color: #9f1d16;
}
.settings-mode .table-wrap { background: var(--uocc-surface-soft); }

:root[data-theme="light"] :is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(.card, .table-shell) {
  border-color: var(--uocc-line);
  background: var(--uocc-surface);
  box-shadow: none;
}
:root[data-theme="light"] :is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) :is(.meta-item, .summary-card, .panel, .kpi-card, .audit-item) {
  border-color: var(--uocc-line);
  background: var(--uocc-surface-soft);
  box-shadow: none;
}

@media (max-width: 760px) {
  .planner-mode .hero,
  .important-dates-mode .hero,
  .mcp-mode .hero,
  .settings-mode .hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .planner-mode .hero::before,
  .important-dates-mode .hero::before,
  .mcp-mode .hero::before,
  .settings-mode .hero::before { inset: 45% 0 0 22%; }
  :is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .hero h1 { font-size: 2rem; }
  :is(.planner-mode, .important-dates-mode, .mcp-mode, .settings-mode) .meta-grid { grid-template-columns: 1fr; }

  .settings-mode .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .settings-mode table,
  .settings-mode tbody { display: grid; }
  .settings-mode table thead { display: none; }
  .settings-mode tbody { gap: 10px; }
  .settings-mode tbody tr {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--uocc-line);
    border-radius: var(--uocc-radius-small);
    background: var(--uocc-surface-soft);
  }
  .settings-mode td {
    display: grid;
    grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
    border-color: var(--uocc-line);
    overflow-wrap: anywhere;
  }
  .settings-mode td::before {
    align-self: start;
    color: var(--uocc-muted);
    content: "Dato";
    font-family: var(--uocc-font-mono);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .settings-mode td:nth-child(1)::before { content: "Usuario"; }
  .settings-mode td:nth-child(2)::before { content: "Rol"; }
  .settings-mode td:nth-child(3)::before { content: "Estado"; }
  .settings-mode td:nth-child(4)::before { content: "Último acceso"; }
  .settings-mode td:nth-child(5)::before { content: "Contraseña"; }
  .settings-mode td:nth-child(6)::before { content: "Actualizado"; }
  .settings-mode td:nth-child(7)::before { content: "Acciones"; }
  .settings-mode .row-actions { width: 100%; }
  .settings-mode .row-actions :is(form, .button, button) { flex: 1 1 auto; }
}