/* ============================================================
   DUD — Directorio Único de Docentes
   Design System (Brand Book Universidad Continental 2025)
   Base para importar a Figma vía html.to.design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Roboto+Condensed:wght@800&display=swap');

:root {
  /* Marca — primaria */
  --uc-white: #FFFFFF;
  --uc-black: #000000;
  --uc-purple: #5A00AA;

  /* Marca — secundaria */
  --uc-lilac: #9169FF;
  --uc-sky: #B9E1FF;
  --uc-pink: #FAAAFA;

  /* Roles semánticos */
  --primary: var(--uc-purple);
  --primary-hover: var(--uc-lilac);
  --on-primary: #FFFFFF;
  --text: #000000;
  --text-muted: #6B6B6B;
  --surface: #FFFFFF;
  --bg: #F4F4F6;
  --border: #E6E4EC;

  /* Estados del workflow (funcionales) */
  --state-draft: #6B6B6B;
  --state-sent: #9169FF;
  --state-review: #725900;
  --state-approved: #2E7D32;
  --state-observed: #C62828;
  --state-draft-bg: var(--bg);
  --state-sent-bg: #F1EDFF;
  --state-review-bg: #FBF3D6;
  --state-approved-bg: #E4F4E5;
  --state-observed-bg: #FBE4E4;

  /* Superficies suaves */
  --purple-050: #F3EBFB;
  --purple-100: #E7D6F6;
  --lilac-050: #F1EDFF;

  /* Radios y sombras */
  --radius-card: 14px;
  --radius-input: 9px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 0, 40, .06);
  --shadow-md: 0 6px 20px rgba(40, 0, 80, .10);
  --shadow-lg: 0 18px 40px rgba(40, 0, 80, .18);

  --font: 'Neue Plak', 'Poppins', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }

/* ---------- Íconos (outline, trazo uniforme — línea gráfica UC) ---------- */
svg.ic {
  width: 18px; height: 18px; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn svg.ic, .icon-btn svg.ic, .chip svg.ic { width: 16px; height: 16px; }
.ic-lg { width: 24px !important; height: 24px !important; }
.ic-xl { width: 46px !important; height: 46px !important; stroke-width: 1.4 !important; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.35;
}

/* Marco/canvas por pantalla (import a Figma) */
.frame {
  width: 1440px;
  max-width: 100%;
  margin: 24px auto;
  background: var(--bg);
  min-height: 900px;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-lg);
  display: flex;
}
.frame--mobile { width: 390px; min-height: 844px; }

.frame-label {
  width: 1440px;
  margin: 40px auto 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6B6B6B;
}
.frame--mobile + .frame-label, .frame-label--mobile { width: 390px; }

/* ---------- Logo isotipo (SVG inline reproducido con barras) ---------- */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; line-height: 1.05; color: var(--text);
}
.logo .iso {
  width: 34px; height: 26px; position: relative; flex: none;
  border-left: 3px solid currentColor;
  border-top-left-radius: 13px; border-bottom-left-radius: 13px;
}
.logo .iso::before, .logo .iso::after {
  content: ""; position: absolute; left: 4px; right: 0;
  height: 3px; background: currentColor;
}
.logo .iso::before { top: 4px; box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor; }
.logo .iso::after  { bottom: 3px; }
.logo.on-dark, .logo.on-purple { color: #fff; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 0; align-self:flex-start; height: 100vh; flex: none; width: 240px;
  background: var(--uc-black); color: #fff; padding: 26px 18px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 30;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; margin:0 0 34px 10px; color:#fff; }
.brand-logo { height: 26px; width: auto; filter: brightness(0) invert(1); }
.sidebar .nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 10px; color: #C9C6D1; font-size: 14px; font-weight: 500; cursor: pointer;
}
.sidebar .nav-item .ic { width: 18px; height: 18px; opacity:.85; }
.sidebar .nav-item.active { background: var(--uc-purple); color: #fff; }
.sidebar .nav-item:hover:not(.active) { background: rgba(255,255,255,.18); color:#fff; }
.sidebar .spacer { flex: 1; }
.sidebar .foot { font-size: 12px; color:#6B6B6B; padding: 12px 14px; }
.nav-toggle, .nav-burger { display: none; }
.mobile-avatar { display: none; }

/* ---------- Topbar ---------- */
.content { position: relative; flex: 1; min-width: 0; overflow: visible; }
.topbar {
  min-height: 68px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
}
.topbar.topbar-stacked { padding-top:16px; padding-bottom:16px; }
.topbar .title { font-size: 20px; font-weight: 700; }
.topbar .tools { display: flex; align-items: center; gap: 16px; color: var(--text-muted); }
.topbar .tools > span, .topbar .tools > svg { display:none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--purple-100); color: var(--uc-purple);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; }

.page { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.page-title { font-size: 24px; font-weight: 700; }
.page-sub { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 22px;
}
.card + .card { margin-top: 0; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.card-title { font-size: 16px; font-weight: 700; }
.card-head > .chip { flex: none; }

/* Tarjetas de módulo (Home): igual alto, botón abajo, hover */
.grid-3 { align-items: stretch; }
.grid-3 > .card { display: flex; flex-direction: column; min-height: 192px; transition: box-shadow .15s, transform .15s, border-color .15s; }
.grid-3 > .card .card-head { min-height: 54px; }
.grid-3 > .card > .btn { margin-top: auto; }
.grid-3 > .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--purple-100); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: var(--radius-pill); transition: .15s; white-space: nowrap;
}
.btn-primary { background: var(--uc-purple); color: #fff; }
.btn-primary:hover { background: var(--uc-lilac); }
.btn-primary[style*="state-approved"] { background:var(--uc-purple) !important; }
.btn-ghost { background: transparent; color: var(--uc-purple); border: 1.5px solid var(--uc-purple); }
.btn-soft { background: var(--purple-050); color: var(--uc-purple); }
.btn-filter-review { background:var(--state-review-bg); color:var(--state-review); }
.btn-filter-observed { background:var(--state-observed-bg); color:var(--state-observed); }
.btn-filter-approved { background:var(--state-approved-bg); color:var(--state-approved); }
.status-filter.is-active { box-shadow:inset 0 0 0 2px currentColor; }
.filter-status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.tabs { display: flex; gap: 8px; }

/* ---------- Chips / badges ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.chip .dot { width:7px; height:7px; border-radius:50%; }
.chip-draft   { background:var(--state-draft-bg); color:var(--state-draft); }
.chip-sent    { background:var(--state-sent-bg); color:var(--uc-purple); }
.chip-review  { background:var(--state-review-bg); color:var(--state-review); }
.chip-approved{ background:var(--state-approved-bg); color:var(--state-approved); }
.chip-observed{ background:var(--state-observed-bg); color:var(--state-observed); }
.chip-draft .dot{background:var(--state-draft)} .chip-sent .dot{background:var(--state-sent)}
.chip-review .dot{background:var(--state-review)} .chip-approved .dot{background:var(--state-approved)}
.chip-observed .dot{background:var(--state-observed)}

/* ---------- Progreso ---------- */
.progress-banner {
  background: linear-gradient(100deg, var(--uc-purple), var(--uc-lilac));
  color:#fff; border-radius: var(--radius-card); padding: 22px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.progress-banner .pct { font-size: 30px; font-weight: 800; }
.bar { height: 8px; background: rgba(255,255,255,.3); border-radius: 999px; overflow:hidden; margin-top:12px; width: 60%; }
.bar > i { display:block; height:100%; background:#fff; border-radius:999px; }

.ring { width: 54px; height: 54px; border-radius: 50%; display:grid; place-items:center;
  font-size: 13px; font-weight: 700; color: var(--uc-purple); flex:none; }

/* ---------- Formularios ---------- */
.field { margin-bottom: 16px; }
.label { display:block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.label .req { color: var(--state-observed); }
.input, .select, .textarea {
  width:100%; font-family:var(--font); font-size:14px; color:var(--text);
  padding: 11px 13px; border:1.5px solid var(--border); border-radius: var(--radius-input); background:#fff;
}
.input:focus, .select:focus { outline:none; border-color: var(--uc-lilac); }
.input:disabled, .select:disabled, .input.readonly { background:#F4F4F6; color:#6B6B6B; cursor:not-allowed; }
.date-control { position:relative; }
.date-control .input { padding-right:42px; }
.date-control .ic { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--uc-purple); pointer-events:none; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: 14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap: 14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap: 14px; }

.readonly-item .k { font-size:12px; color:var(--text-muted); }
.readonly-item .v { font-size:14px; font-weight:400; margin-top:2px; }
.lock { font-size:11px; color:#6B6B6B; }

/* ---------- Tablas ---------- */
.table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table th { text-align:left; color:var(--text-muted); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; padding: 12px 14px; border-bottom:1px solid var(--border); }
.table td { padding: 14px; border-bottom:1px solid #F3EBFB; }
.table tr:hover td { background: var(--purple-050); }
.icon-btn { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff;
  display:inline-grid; place-items:center; cursor:pointer; color:var(--text-muted); }

/* ---------- Modal ---------- */
.modal-scrim { position:fixed; inset:0; background: rgba(20,0,40,.35); display:grid; place-items:center; z-index:100; padding:20px; overflow-y:auto; }
.modal { width: 520px; max-width:100%; max-height:90vh; background:#fff; border-radius: 16px; box-shadow: var(--shadow-lg); overflow:auto; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding: 20px 22px; border-bottom:1px solid var(--border); }
.modal-body { padding: 22px; max-height: 520px; overflow:auto; }
.modal-foot { display:flex; gap:12px; padding: 18px 22px; border-top:1px solid var(--border); }

/* ---------- Utilidades ---------- */
.muted { color: var(--text-muted); }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.tag-req::after{content:" *"; color:var(--state-observed);}
.filters { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.filters .select, .filters .input { width: auto; min-width: 170px; }
.filters.filters-360 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:stretch; }
.filters.filters-360 .input, .filters.filters-360 .select, .filters.filters-360 .btn {
  width:100%; min-width:0; margin-left:0 !important;
}
.filters.filters-360 .input { grid-column:span 2; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:16px; font-size:13px; color:var(--text-muted); }
.pagination .pg { width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:#fff; display:grid; place-items:center; cursor:pointer;}
.pagination .pg.active { background:var(--uc-purple); color:#fff; border-color:var(--uc-purple); }

.dropzone { border:2px dashed var(--uc-lilac); background:var(--lilac-050); border-radius:12px;
  padding: 34px; text-align:center; color:var(--uc-purple); }
.dropzone-interactive {
  display:block; width:100%; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.dropzone-interactive:hover,
.dropzone-interactive:focus-visible,
.dropzone-interactive.is-dragging {
  border-color:var(--uc-purple); background:var(--purple-100); box-shadow:0 0 0 3px rgba(90,0,170,.10); outline:0;
}
.visually-hidden {
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.form-actions { margin-top:24px; padding-top:4px; }
.checkbox { display:flex; gap:10px; align-items:center; padding:14px; border:1.5px solid var(--border); border-radius:10px; background:#F3EBFB; }
.checkbox input { margin-top:0; width:18px; height:18px; accent-color: var(--uc-purple); flex:none; }
.info-icon { position:relative; display:inline-grid; place-items:center; width:17px; height:17px; margin-left:4px; border:1px solid var(--uc-lilac); border-radius:50%; color:var(--uc-purple); font-size:10px; font-weight:700; vertical-align:middle; cursor:help; }
.info-icon[data-tooltip]::after {
  content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 9px); z-index:50;
  width:max-content; max-width:280px; padding:8px 10px; border-radius:7px; background:var(--uc-black); color:#fff;
  font-size:11px; font-weight:400; line-height:1.4; text-align:left; white-space:normal;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,4px); transition:opacity .15s, transform .15s, visibility .15s;
}
.info-icon[data-tooltip]::before {
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px); z-index:51;
  width:8px; height:8px; background:var(--uc-black); opacity:0; visibility:hidden;
  transform:translateX(-50%) rotate(45deg); transition:opacity .15s, visibility .15s;
}
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus-visible::after,
.info-icon[data-tooltip]:hover::before,
.info-icon[data-tooltip]:focus-visible::before { opacity:1; visibility:visible; }
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus-visible::after { transform:translate(-50%,0); }
.info-icon:focus-visible { outline:2px solid var(--uc-lilac); outline-offset:2px; }
.form-section { padding:16px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.form-section + .form-section { margin-top:14px; }
.form-section-title { margin-bottom:14px; color:var(--uc-purple); font-size:13px; font-weight:700; }
.phone-control { display:grid; grid-template-columns:90px 1fr; gap:8px; }
.module-progress { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.module-progress .bar { width:100%; margin:0; background:var(--purple-100); }
.module-progress .bar > i { background:var(--uc-purple); }

/* ---------- Controles de selección múltiple ---------- */
.token-field {
  min-height: 46px; border:1.5px solid var(--border); border-radius:var(--radius-input);
  background:#fff; padding:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.token {
  display:inline-flex; align-items:center; gap:6px; padding:6px 9px;
  border-radius:var(--radius-pill); background:var(--purple-050); color:var(--uc-purple);
  font-size:12px; font-weight:600;
}
.token button { border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; line-height:1; }
.token-input { flex:1; min-width:210px; border:0; outline:0; padding:4px; font:inherit; font-size:13px; }
.field-help { color:var(--text-muted); font-size:11px; margin-top:6px; }
.workflow-note { margin:-6px 0 16px; padding:10px 12px; border-radius:9px; background:var(--state-review-bg); color:#725900; font-size:12px; }
.brand-guidance { background:var(--purple-050); color:var(--uc-purple); border-left:3px solid var(--uc-purple); }
.module-heading { font-family:'Roboto Condensed', 'Arial Narrow', sans-serif; font-size:22px; font-weight:800; color:var(--uc-purple); letter-spacing:-.035em; line-height:1; text-transform:uppercase; }
.home-frame { min-height:calc(100vh - 48px); }
.home-frame .sidebar { height:calc(100vh - 48px); }
.home-page { padding:22px 28px; gap:12px; }
.home-progress { padding:19px 24px; }
.home-progress .bar { margin-top:8px; }
.modules-heading-row { display:flex; align-items:center; justify-content:space-between; margin:12px 0 6px; }
.modules-heading-row .module-heading { color:var(--text); }
.home-modules { gap:14px; }
.home-modules > .card { min-height:158px; padding:18px; transition:background .2s,color .2s,box-shadow .2s,transform .2s,border-color .2s; }
.home-modules > .card .card-head { min-height:42px; margin-bottom:10px; }
.home-modules .ring { width:48px; height:48px; }
.home-modules .ring > span { width:36px !important; height:36px !important; }
.home-modules > .card > .btn { margin-top:12px; }
.home-modules > .card:hover,
.home-modules > .card:focus-within {
  color:var(--text);
  background:var(--surface);
  border-color:var(--uc-lilac);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.home-modules > .card:hover .ring > span,
.home-modules > .card:focus-within .ring > span { color:var(--uc-purple); }
.home-modules > .card:hover .btn-primary,
.home-modules > .card:focus-within .btn-primary { background:var(--uc-lilac); color:var(--on-primary); }
.home-modules > .card:hover .btn-ghost,
.home-modules > .card:focus-within .btn-ghost { border-color:var(--uc-lilac); background:var(--surface); color:var(--uc-purple); }
.home-modules > .card:hover .btn-ghost:hover,
.home-modules > .card:focus-within .btn-ghost:hover { background:var(--purple-050); }
.review-meta { color:var(--text-muted); font-size:12px; }
.review-document-head { margin-bottom:16px; }
.module-marker { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill); background:var(--purple-050); color:var(--text); font-size:12px; font-weight:600; white-space:nowrap; }
.module-marker .dot { width:7px; height:7px; border-radius:50%; background:var(--uc-purple); }
.module-marker--personal .dot { background:var(--uc-lilac); }
.module-marker--international .dot { background:var(--uc-pink); }
.date-display { white-space:nowrap; }
.switch { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; font-weight:600; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-track { width:36px; height:20px; border-radius:999px; background:#C9C6D1; padding:3px; transition:.15s; }
.switch-track::after { content:""; display:block; width:14px; height:14px; border-radius:50%; background:#fff; transition:.15s; box-shadow:var(--shadow-sm); }
.switch input:checked + .switch-track { background:var(--uc-purple); }
.switch input:checked + .switch-track::after { transform:translateX(16px); }
.period-checks { display:flex; flex-wrap:wrap; gap:8px; }
.period-checks label { display:flex; align-items:center; gap:7px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; background:#fff; }
.period-checks input { width:16px; height:16px; accent-color:var(--uc-purple); }
.academic-entry-year { margin-top:16px; padding:13px 14px; border-radius:10px; background:var(--purple-050); font-size:14px; }
.profile-menu { position:fixed; right:28px; top:58px; z-index:80; width:280px; padding:16px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-md); }
.profile-menu .name { font-size:14px; font-weight:700; }
.profile-menu .meta { margin-top:3px; color:var(--text-muted); font-size:12px; }
.avatar-button { border:0; cursor:pointer; font-family:inherit; }
.avatar-button:focus-visible,.mobile-avatar:focus-visible { outline:2px solid var(--uc-lilac); outline-offset:3px; }

/* Propuesta para listados extensos: desplegable con área de scroll. */
.selection-list { position:relative; }
.selection-list summary {
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-input);
  background:#fff; color:var(--uc-purple); font-size:13px; font-weight:600;
}
.selection-list summary::-webkit-details-marker { display:none; }
.selection-list summary::after { content:"⌄"; color:var(--text-muted); }
.selection-list[open] summary::after { content:"⌃"; }
.selection-list-body {
  max-height:156px; overflow-y:auto; margin-top:6px; padding:6px;
  border:1px solid var(--border); border-radius:var(--radius-input); background:#fff;
}
.selection-list-item { display:flex; align-items:center; gap:8px; min-height:36px; padding:8px 9px; border-radius:7px; font-size:12.5px; line-height:1.35; }
.selection-list-item + .selection-list-item { border-top:1px solid #F3EBFB; }
.selection-list-item input { width:16px; height:16px; accent-color:var(--uc-purple); }
.filters .selection-list { min-width:0 !important; }
.filters .selection-list summary { min-height:46px; }
.filters .selection-list-body {
  position:absolute; top:100%; left:0; right:0; z-index:30; min-width:220px; max-height:220px;
  box-shadow:var(--shadow-md);
}
.filters .selection-list-item { width:100%; cursor:pointer; }
.filters .selection-list-item:hover { background:var(--purple-050); }

.period-control { display:flex; align-items:center; gap:8px; margin-top:4px; }
.period-control .select { width:auto; min-width:150px; padding:7px 32px 7px 10px; font-size:12px; }
.period-control--card { position:relative; margin:0; flex:none; gap:0; overflow:hidden; border:1.5px solid var(--border); border-radius:var(--radius-input); background:#fff; box-shadow:var(--shadow-sm); cursor:pointer; }
.period-control--card:focus-within { border-color:var(--uc-lilac); }
.period-control--card::after { content:'⌄'; position:absolute; right:12px; top:50%; transform:translateY(-56%); color:var(--text-muted); font-size:16px; line-height:1; pointer-events:none; }
.period-control-prefix { padding:8px 0 8px 12px; color:var(--text-muted); font-size:12px; white-space:nowrap; }
.period-control-value { min-width:150px; padding:8px 32px 8px 4px; font-size:13px; font-weight:700; white-space:nowrap; }
.period-control--card .select { position:absolute; inset:0; z-index:1; width:100%; height:100%; min-width:0; padding:0; border:0; opacity:0; cursor:pointer; }
.source-note { font-size:11px; color:var(--text-muted); margin-top:14px; }
.autocomplete-wrap { position:relative; }
.autocomplete-options { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:15; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:#fff; box-shadow:var(--shadow-md); }
.autocomplete-option { display:block; width:100%; padding:10px 12px; border:0; border-bottom:1px solid var(--border); background:#fff; color:var(--text); text-align:left; font:inherit; font-size:12px; cursor:pointer; }
.autocomplete-option:last-child { border-bottom:0; }
.autocomplete-option:hover,.autocomplete-option:focus { background:var(--purple-050); outline:0; }

.stat { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; }
.stat .num { font-size:26px; font-weight:800; color:var(--uc-purple); }
.stat .lbl { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin-top:4px; }

.log-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:13px; }
.log-ok { background:#E4F4E5; color:#2E7D32; }
.log-err { background:#FBE4E4; color:#C62828; }


/* ============================================================
   Responsive / Mobile-First
   ============================================================ */
html, body { overflow-x: clip; max-width: 100%; }

/* Tablet: grillas anchas a 2 columnas */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Móvil / tablet en vertical */
@media (max-width: 900px) {
  body { background: var(--bg); }
  .frame { width: 100%; max-width: 100%; min-height: auto; flex-direction: column; margin: 0 0 20px; box-shadow: none; overflow: visible; }
  .home-frame { min-height:auto; }
  .home-frame .sidebar { height:auto; }
  .home-page { padding:16px; gap:12px; }
  .frame-label { width: auto; margin: 14px 14px 0; }

  /* Sidebar -> barra superior con menú hamburguesa (CSS puro) */
  .sidebar { position:relative; top:auto; height:auto; align-self:stretch; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; }
  .sidebar .brand { margin: 0; }
  .nav-burger { display: inline-flex; align-items: center; cursor: pointer; color: #fff; padding: 4px; }
  .nav-burger svg.ic { width: 24px; height: 24px; }
  .sidebar .nav-item { display: none; width: 100%; padding: 10px 12px; font-size: 14px; }
  .nav-toggle:checked ~ .nav-item { display: flex; }
  .sidebar .spacer, .sidebar .foot { display: none; }

  .content { overflow: visible; }
  /* Header móvil = una sola barra (☰ + logo + avatar). La topbar es solo encabezado de contenido */
  .mobile-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--purple-100); color: var(--uc-purple); font-weight: 700; font-size: 13px; margin-left: auto; flex: none; }
  button.mobile-avatar { border:0; cursor:pointer; font-family:inherit; }
  .profile-menu { right:16px; top:66px; width:min(280px,calc(100vw - 32px)); }
  .topbar { height: auto; background: transparent; border-bottom: none; flex-wrap: wrap; gap: 10px; padding: 16px 16px 0; }
  .topbar .title { font-size: 18px; }
  .topbar .tools { display: none; }
  .period-control--card { width:100%; align-items:center; flex-direction:row; gap:0; }
  .period-control--card .select { width:100%; }

  /* Cards en móvil: header en columna (título arriba, acciones abajo full-width) */
  .card-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-head > .chip, .card-head > .lock, .card-head > .ring { align-self: flex-start; }
  .card-head .btn { width: 100%; justify-content: center; }
  .grid-3 > .card { min-height: 0; }
  .grid-3 > .card .card-head { min-height: 0; }
  .grid-3 > .card > .btn { margin-top: 16px; }

  /* Grupos de botones (pies de formulario, acciones) se apilan a ancho completo */
  .row { flex-wrap: wrap; }
  .row > .row { flex: 1 1 100%; }
  .row > .btn { flex: 1 1 100%; justify-content: center; }
  /* Pestañas: se mantienen lado a lado (no apiladas) */
  .tabs { flex-wrap: wrap; }
  .tabs > .btn { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }

  /* Banner de progreso: separar texto del % y reducir en móvil */
  .progress-banner { gap: 14px; }
  .progress-banner .pct { font-size: 22px; flex: none; }
  .progress-banner div[style*="font-size:18px"] { font-size: 14px !important; line-height: 1.3; }
  .page { padding: 16px; }

  /* Todas las grillas a una columna (incluye estilos inline) */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Evitar desbordes horizontales por contenido ancho */
  .grid-2 > *, .grid-3 > *, .grid-4 > *, [style*="grid-template-columns"] > * { min-width: 0; grid-column:auto !important; }
  .card, .dropzone { overflow-wrap: anywhere; }

  /* Filtros apilados a ancho completo */
  .filters { flex-wrap: wrap !important; }
  .filters .input, .filters .select, .filters .btn { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; }
  .filters.filters-360 { display:grid; grid-template-columns:1fr; }
  .filters.filters-360 .input { grid-column:auto; }

  /* Tablas -> tarjetas apiladas (etiqueta: valor), sin scroll horizontal */
  .table { display: block; white-space: normal; }
  .table thead { display: none; }
  .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--border); border-radius: 10px; padding: 6px 14px; margin-bottom: 12px; }
  .table tr:hover td { background: none; }
  .table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border: none; border-bottom: 1px solid #F3EBFB; text-align: right; }
  .table td:last-child { border-bottom: none; }
  .table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; white-space: nowrap; }
  .table td[data-label=""]::before, .table td:not([data-label])::before { content: ""; }
  .table td[data-label=""], .table td:not([data-label]) { justify-content: flex-end; padding-top: 4px; }

  .modal { width: 92% !important; }
  .modal-foot { flex-direction: column; }
  .pagination { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }

  /* Índice de pantallas a una columna */
  .wrap { padding: 24px 16px; }
  .wrap .grid { grid-template-columns: 1fr !important; }
  .hero { padding: 28px 22px; }
  .hero h1 { font-size: 26px !important; }
}