:root{
  /* Color */
  --c-bg: #F4F6F8;
  --c-surface: #FFFFFF;
  --c-ink: #1B2733;
  --c-ink-soft: #5B6A78;
  --c-line: #E2E8EE;
  --c-rail: #16202B;
  --c-rail-hover: #223040;
  --c-accent: #2F6FED;      /* azul principal */
  --c-accent-soft: #E8F0FF;
  --c-accent2: #E0A33E;     /* ámbar - RH */
  --c-accent3: #2FAE8C;     /* verde - Sistemas */
  --c-accent4: #D6608C;     /* rosa - Festejos */
  --c-accent5: #8C6FED;     /* morado - Compras */

  /* Tipografía */
  --f-display: 'Sora', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --rail-collapsed: 76px;
  --rail-expanded: 268px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(20,30,40,0.04), 0 8px 24px -12px rgba(20,30,40,0.10);
  --shadow-pop: 0 12px 40px -8px rgba(20,30,40,0.25);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html,body{
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

.rail-trigger{
  position: fixed;
  top:0; left:0;
  width: 18px;
  height: 100vh;
  z-index: 998;
}

.rail{
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--rail-collapsed);
  background: var(--c-rail);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 999;
  overflow: hidden;
  transition: width 0.28s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}

.rail:hover,
.rail-trigger:hover + .rail{
  width: var(--rail-expanded);
}

/* Permite hover directo sobre el riel también */
.rail-trigger:hover ~ .rail{ width: var(--rail-expanded); }

.rail-top{
  padding: 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.brand-mark{
  flex: none;
  width: 48px; height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-accent), #1B4FC7);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  color:#fff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(47,111,237,0.3);
  border: 2px solid rgba(255,255,255,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rail:hover .brand-mark,
.rail-trigger:hover ~ .rail .brand-mark {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(47,111,237,0.45);
}

.brand-text{
  display:flex;
  flex-direction:column;
  opacity: 0;
  transition: opacity 0.25s ease;
  transition-delay: 0.1s;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.rail:hover .brand-text,
.rail-trigger:hover ~ .rail .brand-text{ opacity: 1; }

.brand-name{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-sub{
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-menu{
  flex: 1;
  min-height: 0;
  padding: 14px 12px;
  display:flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: auto;
  scrollbar-color: rgba(255,255,255,0.45) rgba(255,255,255,0.06);
}
.rail-menu::-webkit-scrollbar { width: 8px; }
.rail-menu::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 10px; }
.rail-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
}
.rail-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6); }

.rail-item{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 11px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.72);
  text-decoration:none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.rail-item:hover{
  background: var(--c-rail-hover);
  color: #fff;
}

.rail-item.active{
  background: var(--c-accent);
  color: #fff;
}

.rail-icon{
  flex: none;
  width: 22px;
  text-align: center;
  font-size: 1.05rem;
}

.rail-label{
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0.04s;
}

.rail:hover .rail-label,
.rail-trigger:hover ~ .rail .rail-label{
  opacity: 1;
  transform: translateX(0);
}

.rail-bottom{
  padding: 14px 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.user-item{ cursor: default; }
.user-item:hover{ background: var(--c-rail-hover); }

.avatar{
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
}
.rail-icon.avatar{ width: 28px; height: 28px; font-size: 0.7rem; }

.main{
  margin-left: var(--rail-collapsed);
  min-height: 100vh;
  padding: 28px 36px 60px;
  transition: margin-left 0.28s cubic-bezier(.4,0,.2,1);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
  flex-wrap: wrap;
}

/* Botón ☰ para abrir el menú lateral en pantallas táctiles. Oculto en
   escritorio (ahí el rail ya es visible / se expande con hover). */
.btn-menu-movil{
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 10px;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
}

.topbar-title h1{
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 700;
  margin-top: 4px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap: 14px;
}

.search{
  display:flex;
  align-items:center;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 260px;
  color: var(--c-ink-soft);
}
.search input{
  border:none; outline:none; background:transparent;
  font-family: var(--f-body);
  font-size: 0.9rem;
  width: 100%;
  color: var(--c-ink);
}

.icon-btn{
  position: relative;
  border:none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  width: 42px; height: 42px;
  border-radius: 10px;
  font-size: 1.05rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn .dot{
  position:absolute;
  top: 9px; right: 9px;
  width: 8px; height: 8px;
  background: var(--c-accent4);
  border-radius: 50%;
  border: 1.5px solid var(--c-surface);
}

.content-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 24px;
  align-items: start;
}

.card{
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.feed{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

/* Composer */
.composer-head{
  display:flex;
  gap: 14px;
}
.composer-head textarea{
  flex:1;
  border: none;
  resize: none;
  min-height: 56px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  outline: none;
  color: var(--c-ink);
}
.composer-actions{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  margin-top: 12px;
}
.composer-tools{ display:flex; gap: 8px; }

.chip{
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  cursor:pointer;
  font-family: var(--f-body);
}
.chip:hover{ border-color: var(--c-accent); color: var(--c-accent); }

/* Posts */
.post-head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 12px;
}
.post-meta{ display:flex; flex-direction: column; gap: 4px; flex:1; }
.btn-borrar-publicacion{ flex-shrink:0; align-self:flex-start; background:none; border:none; cursor:pointer; font-size:0.95rem; color: var(--c-ink-soft); opacity:0.5; padding:6px 8px; border-radius:8px; }
.btn-borrar-publicacion:hover{ opacity:1; background:#FBE7EE; color: var(--c-accent4, #D6608C); }
.btn-borrar-publicacion:disabled{ opacity:0.3; cursor:default; }
.post-author{
  font-weight: 600;
  font-size: 0.92rem;
  display:flex; align-items:center; gap: 8px;
}
.post-time{ font-size: 0.78rem; color: var(--c-ink-soft); }

.badge-dept{
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge-rh{ background: #FBF1E0; color: var(--c-accent2); }
.badge-sis{ background: #E3F6F0; color: var(--c-accent3); }
.badge-fes{ background: #FBE7EE; color: var(--c-accent4); }
.badge-com{ background: #EFE9FE; color: var(--c-accent5); }

.post-text{
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.post-stats{
  display:flex; gap: 16px;
  font-size: 0.8rem;
  color: var(--c-ink-soft);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 6px;
}

.post-actions{
  display:flex;
  gap: 4px;
  padding-top: 6px;
}
.post-action{
  flex:1;
  border:none;
  background:transparent;
  padding: 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  cursor:pointer;
  font-family: var(--f-body);
}
.post-action:hover{ background: var(--c-bg); color: var(--c-ink); }

.comments{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.comment{ display:flex; gap: 10px; }
.avatar-sm{ width: 30px; height: 30px; font-size: 0.65rem; }
.avatar-md{ width: 40px; height: 40px; font-size: 0.78rem; }
.comment-body{
  background: var(--c-bg);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 1;
}
.comment-author{ font-size: 0.8rem; font-weight: 700; }
.comment-body p{ font-size: 0.85rem; color: var(--c-ink-soft); margin-top: 2px; }

.comment-input{ display:flex; gap: 10px; align-items:center; }
.comment-input input{
  flex: 1;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem;
  outline:none;
  font-family: var(--f-body);
}

.side{ display:flex; flex-direction: column; gap: 20px; position: sticky; top: 28px; }

.side-card h3{
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.side-card-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.side-card-head h3{ margin-bottom:0; }

/* Lista de pasos numerados (paneles de ayuda tipo "cómo conectar X"). */
.help-steps{
  list-style: none;
  counter-reset: help-step;
  display:flex; flex-direction: column; gap: 12px;
}
.help-steps li{
  counter-increment: help-step;
  display:flex; gap: 10px;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.help-steps li::before{
  content: counter(help-step);
  flex-shrink:0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 0.72rem;
  font-weight: 700;
  display:flex; align-items:center; justify-content:center;
}

.meeting-table{ width: 100%; border-collapse: collapse; }
.meeting-table td{ padding: 10px 0; vertical-align: middle; }
.meeting-table tr + tr td{ border-top: 1px solid var(--c-line); }

.m-date{
  width: 50px;
  text-align:center;
  padding-right: 14px;
}
.m-day{
  display:block;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1;
}
.m-month{
  display:block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  margin-top: 2px;
}
.m-info{ display:flex; flex-direction: column; gap: 3px; }
.m-title{ font-size: 0.85rem; font-weight: 600; }
.m-sub{ font-size: 0.76rem; color: var(--c-ink-soft); }

.report-list{ list-style:none; display:flex; flex-direction:column; gap: 14px; }
.report-list li{ display:flex; gap: 12px; align-items:flex-start; }
.report-icon{ font-size: 1.1rem; }
.report-info{ display:flex; flex-direction: column; gap: 2px; }
.report-title{ font-size: 0.85rem; font-weight: 600; }
.report-sub{ font-size: 0.76rem; color: var(--c-ink-soft); }

.side-tabs{
  display:flex;
  gap: 4px;
  background: var(--c-bg);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.side-tab{
  flex:1;
  border:none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
}
.side-tab.active{
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-card);
}
.side-tab .count{
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
}
.side-tab.active.tab-aniv .count{ background:#FBE7EE; color: var(--c-accent4); }

.birthday-feature{
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #1B2733 0%, #16202B 100%);
  color: #fff;
  padding: 22px;
  margin-bottom: 18px;
  overflow: hidden;
  text-align: center;
}
.birthday-feature .avatar-lg{
  width: 64px; height: 64px;
  font-size: 1.1rem;
  border: 3px solid rgba(255,255,255,0.18);
  margin: 0 auto 12px;
}
.birthday-feature-name{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.birthday-feature-role{
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}
.birthday-feature-msg{
  display:inline-block;
  margin-top: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
}
.birthday-feature-empty{
  text-align:center;
  padding: 28px 16px;
  color: var(--c-ink-soft);
  font-size: 0.85rem;
}

.birthday-list{ display:flex; flex-direction:column; gap: 14px; }
.birthday-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
.birthday-row .avatar{ flex: none; }
.birthday-row-info{ flex:1; display:flex; flex-direction:column; gap: 2px; }
.birthday-row-name{ font-size: 0.85rem; font-weight: 600; }
.birthday-row-role{ font-size: 0.76rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.birthday-date{
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-accent4);
  background: #FBE7EE;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.avatar-lg{ width: 64px; height: 64px; font-size: 1.1rem; }

.btn{
  border:none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.88rem;
  cursor:pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary{ background: var(--c-accent); color:#fff; }
.btn-primary:hover{ background: #1B4FC7; }
.btn-ghost{ background: transparent; border: 1px solid var(--c-line); color: var(--c-ink); }
.btn-ghost:hover{ border-color: var(--c-ink-soft); }
.btn-small{ padding: 7px 14px; font-size: 0.8rem; border-radius: 8px; }
.btn-danger{ background: #E2483D; color: #fff; border: 1px solid #E2483D; }
.btn-danger:hover{ background: #C73A30; border-color: #C73A30; }

.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(16,24,32,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.open{ opacity: 1; pointer-events: auto; }

.modal{
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  width: min(520px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease;
}
.modal-overlay.open .modal{ transform: translateY(0) scale(1); }

.modal-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 18px;
}
.modal-head h3{ font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; }
.modal-close{
  border:none; background: var(--c-bg);
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 1.1rem; cursor:pointer;
  color: var(--c-ink-soft);
}

.modal-form{ display:flex; flex-direction: column; gap: 14px; }
.modal-form label,
.card-form label,
.filter-form label{
  display:block;
  font-size: 0.82rem; font-weight: 600; color: var(--c-ink-soft);
}
/* El texto de la etiqueta (y el asterisco de "obligatorio", si lo trae) fluyen
   en línea de forma natural; el campo se manda a su propia línea aparte con
   este margen, en vez de depender de flexbox (que separaba cada <span> —como
   el asterisco— en su propia fila dentro de una columna). */
.modal-form label > input,
.modal-form label > select,
.modal-form label > textarea,
.card-form label > input,
.card-form label > select,
.card-form label > textarea,
.filter-form label > input,
.filter-form label > select,
.filter-form label > textarea{
  display:block;
  margin-top:6px;
}
.modal-form input,
.modal-form select,
.modal-form textarea,
.card-form input,
.card-form select,
.card-form textarea,
.filter-form input,
.filter-form select,
.filter-form textarea{
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--c-ink);
  outline: none;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus,
.card-form input:focus,
.card-form select:focus,
.card-form textarea:focus,
.filter-form input:focus,
.filter-form select:focus,
.filter-form textarea:focus{ border-color: var(--c-accent); }
.modal-form textarea,
.card-form textarea{ min-height: 80px; resize: vertical; }

/* Formulario de página completa, dentro de una .card (no modal): mismos
   inputs/labels con estilo que .modal-form, para páginas como configuración
   o captura de pólizas. */
.card-form{ display:flex; flex-direction: column; gap: 14px; }

/* Barra de filtros en línea (selects que auto-envían al cambiar): mismo
   input/select con borde, pero compacto y en fila. */
.filter-form{ display:flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filter-form select,
.filter-form input{ padding: 8px 10px; font-size: 0.85rem; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-row > *{ min-width: 0; }

/* ── Secciones de formulario agrupadas en tarjeta (con encabezado e ícono) ──
   Patrón reutilizable en cualquier modal: envuelve un grupo de campos
   relacionados en una tarjeta con fondo suave, para que un formulario largo
   se lea organizado en vez de una sola lista plana de campos. */
.modal-eyebrow{
  display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--c-accent, #2F6FED); margin-bottom:2px;
}
.form-section{
  display:flex; flex-direction:column; gap:14px;
  background:var(--c-bg); border:1px solid var(--c-line);
  border-radius:var(--radius-sm, 10px); padding:16px 18px;
}
.form-section-head{
  display:flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:700; letter-spacing:0.03em;
  color:var(--c-ink);
}
.form-section-icono{ font-size:0.95rem; line-height:1; }
.form-section-opcional{
  margin-left:auto; font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--c-ink-soft); background:var(--c-surface);
  border:1px solid var(--c-line); padding:2px 8px; border-radius:99px;
}
.form-section-ayuda{ font-size:0.76rem; color:var(--c-ink-soft); margin:-4px 0 0; }
.form-section .modal-form label,
.form-section label{ color:var(--c-ink-soft); }
.form-section input,
.form-section select{ background:var(--c-surface); }

.participant-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 12px;
}
.participant-check{
  display:flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
}
.participant-check input[type="checkbox"]{
  width: auto;
  margin: 0;
}
.participant-depto{
  font-size: 0.72rem;
  color: var(--c-ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}

.modal-actions{
  display:flex; justify-content:flex-end; gap: 10px; margin-top: 6px;
}

.salas-grid{ grid-template-columns: minmax(0,1fr) 360px; }

.calendar-card{ padding: 26px; }

.calendar-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  margin-bottom: 18px;
}
.calendar-head h2{
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
}
.calendar-hint{
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  margin-top: 4px;
}
.calendar-nav{ display:flex; gap: 8px; }
.calendar-nav .icon-btn{ width: 38px; height: 38px; font-size: 1.2rem; }

.cal-weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.cal-weekdays span{
  text-align:center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding-bottom: 6px;
}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-cell{
  aspect-ratio: 1 / 0.85;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-cell:hover{ background: var(--c-accent-soft); border-color: var(--c-accent); }
.cal-cell.empty{ border: none; cursor: default; }
.cal-cell.empty:hover{ background: transparent; }

.cal-day-num{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.cal-cell.has-event{ border-color: var(--c-accent); background: var(--c-accent-soft); }

.cal-dot{
  align-self: flex-start;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 6px;
}

.calendar-legend{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--c-ink-soft);
}
.legend-dot{
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c-accent);
  display:inline-block;
}

.day-view .calendar-head{ align-items: flex-start; }
.day-view #dayBackBtn{ margin-bottom: 8px; }
.day-view #dayViewLabel{ margin-top: 2px; }

.day-timeline{
  display:flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
  margin-top: 10px;
}

.day-slot{
  display:flex;
  gap: 14px;
  border-bottom: 1px solid var(--c-line);
  padding: 10px 0;
  min-height: 48px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.day-slot:hover{ background: var(--c-bg); }
.day-slot .day-event{ cursor: default; }
.day-slot-time{
  flex: none;
  width: 56px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-ink-soft);
  padding-top: 2px;
}
.day-slot-content{
  flex: 1;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.day-event{
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-radius: 10px;
  padding: 10px 12px;
  display:flex;
  flex-direction: column;
  gap: 2px;
}
.day-event-time{
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.day-event-title{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.day-event-sub{
  font-size: 0.78rem;
  color: var(--c-ink-soft);
}
.day-event-desc{
  font-size: 0.8rem;
  color: var(--c-ink);
  margin-top: 4px;
}

.day-empty{
  text-align:center;
  padding: 20px;
  color: var(--c-ink-soft);
  font-size: 0.85rem;
}


/* Lista de salas */
.room-list{ list-style:none; display:flex; flex-direction: column; gap: 14px; }
.room-list li{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
}
.room-info{ display:flex; flex-direction: column; gap: 2px; }
.room-name{ font-size: 0.88rem; font-weight: 600; }
.room-sub{ font-size: 0.76rem; color: var(--c-ink-soft); }
.room-tag{
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-accent2);
  margin-left: 6px;
}

.room-status{
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-free{ background: #E3F6F0; color: var(--c-accent3); }
.status-busy{ background: #FBE7EE; color: var(--c-accent4); }
.status-maint{ background: #FBF1E0; color: var(--c-accent2); }

.dept-grid{ grid-template-columns: minmax(0,1fr) 340px; }

.pill{
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.pill-accent{ background: var(--c-accent-soft); color: var(--c-accent); }
.pill-warning{ background: #FBF1E0; color: var(--c-accent2); }

/* Data tables */
.data-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.data-table th{
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 700;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.data-table td{
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.data-table tr:last-child td{ border-bottom: none; }
.data-table .mono{ font-family: var(--f-mono); font-size: 0.78rem; color: var(--c-ink-soft); }

.cell-person{ display:flex; align-items:center; gap: 10px; font-weight: 500; }

/* Tags / status */
.tag{
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-pending{ background: #FBF1E0; color: var(--c-accent2); }
.tag-approved{ background: #E3F6F0; color: var(--c-accent3); }
.tag-ok{ background: #E3F6F0; color: var(--c-accent3); }
.tag-low{ background: #FBE7EE; color: var(--c-accent4); }
.tag-process{ background: var(--c-accent-soft); color: var(--c-accent); }

/* People grid (RH directory) */
.people-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.person-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
}
.person-info{ display:flex; flex-direction: column; gap: 2px; }
.person-name{ font-size: 0.85rem; font-weight: 600; }
.person-role{ font-size: 0.74rem; color: var(--c-ink-soft); }

/* Stat list */
.stat-list{ list-style:none; display:flex; flex-direction: column; gap: 12px; }
.stat-list li{
  display:flex; justify-content: space-between; align-items:baseline;
  font-size: 0.85rem; color: var(--c-ink-soft);
}
.stat-list strong{ color: var(--c-ink); font-family: var(--f-display); }

/* Activity list */
.activity-list{ list-style:none; display:flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.activity-list li{
  display:flex; align-items:flex-start; gap: 10px;
  font-size: 0.86rem; color: var(--c-ink);
  position: relative;
  padding-right: 70px;
}
.activity-icon{ font-size: 1rem; flex: none; }
.activity-time{
  position: absolute; right: 0; top: 1px;
  font-size: 0.74rem; color: var(--c-ink-soft);
  white-space: nowrap;
}

/* Status grid list (Sistemas) */
.status-grid-list{ list-style:none; display:flex; flex-direction: column; gap: 12px; margin-top: 14px; font-size: 0.86rem; }
.status-grid-list li{ display:flex; align-items:center; gap: 10px; }
.status-dot{ width: 10px; height: 10px; border-radius: 50%; flex:none; }
.dot-ok{ background: var(--c-accent3); }
.dot-warning{ background: var(--c-accent2); }
.dot-error{ background: var(--c-accent4); }

/* Gallery (Festejos) */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.gallery-item{
  background: var(--c-bg);
  border: 1px dashed var(--c-line);
  border-radius: 10px;
  padding: 28px 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-ink-soft);
  font-weight: 600;
}

/* KPI row (Administración) */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kpi{ display:flex; flex-direction: column; gap: 6px; }
.kpi-label{ font-size: 0.78rem; color: var(--c-ink-soft); font-weight: 600; }
.kpi-value{ font-family: var(--f-display); font-size: 1.8rem; font-weight: 800; }
.kpi-delta{ font-size: 0.78rem; font-weight: 600; }
.delta-up{ color: var(--c-accent3); }
.delta-down{ color: var(--c-accent4); }
.delta-neutral{ color: var(--c-ink-soft); }

/* Bar list (gastos por departamento) */
.bar-list{ list-style:none; display:flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.bar-list li{ display:grid; grid-template-columns: 140px 1fr 90px; align-items:center; gap: 12px; }
.bar-label{ font-size: 0.84rem; font-weight: 600; }
.bar-track{ height: 8px; background: var(--c-bg); border-radius: 999px; overflow: hidden; }
.bar-fill{ height: 100%; border-radius: 999px; }
.bar-value{ font-family: var(--f-mono); font-size: 0.8rem; color: var(--c-ink-soft); text-align: right; }

@media (max-width: 1080px){
  .kpi-row{ grid-template-columns: 1fr; gap: 16px; }
  .bar-list li{ grid-template-columns: 100px 1fr 70px; }
}

.user-menu{ position: relative; }

.user-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  cursor: pointer;
  font-family: var(--f-body);
}
.user-pill-info{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.user-pill-name{ font-size: 0.84rem; font-weight: 700; color: var(--c-ink); }
.user-pill-role{ font-size: 0.72rem; color: var(--c-ink-soft); }
.user-pill-caret{ color: var(--c-ink-soft); font-size: 0.8rem; margin-left: 2px; }

.user-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.user-dropdown.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}
.user-dropdown-name{ display:block; font-size: 0.88rem; font-weight: 700; }
.user-dropdown-dept{ display:block; font-size: 0.76rem; color: var(--c-ink-soft); margin-top: 2px; }

.user-dropdown-logout{
  display:flex;
  align-items:center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-accent4);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 9px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.user-dropdown-logout:hover{ background: #FBE7EE; }

.notif-menu{ position: relative; }

.notif-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-height: 420px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.notif-dropdown.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notif-dropdown-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c-line);
}
.notif-dropdown-head h3{
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
}
.notif-mark-all{
  border:none;
  background: transparent;
  color: var(--c-accent);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f-body);
  white-space: nowrap;
}
.notif-mark-all:hover{ text-decoration: underline; }

.notif-tabs{
  display:flex;
  gap: 4px;
  margin-bottom: 8px;
}
.notif-tab{
  border:none;
  background: transparent;
  color: var(--c-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--f-body);
  padding: 5px 10px;
  border-radius: 999px;
}
.notif-tab:hover{ background: var(--c-bg); }
.notif-tab.active{ background: var(--c-accent-soft); color: var(--c-accent); }

.notif-sent-item{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
}
.notif-sent-check{ font-size: 1rem; flex: none; margin-top: 1px; }
.notif-sent-check.leida{ color: var(--c-accent3, #2FAE8C); }
.notif-sent-check.no-leida{ color: var(--c-ink-soft); opacity: 0.5; }
.notif-sent-to{ font-size: 0.76rem; color: var(--c-ink-soft); }

.notif-desktop-banner{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--c-accent-soft);
  font-size: 0.76rem;
  color: var(--c-ink);
  line-height: 1.35;
}
.notif-desktop-banner button{ flex: none; white-space: nowrap; }

.notif-list{
  display:flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 360px;
}

.notif-item{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.notif-item{ cursor: pointer; }
.notif-item:hover{ background: var(--c-bg); }
.notif-item.unread{ background: var(--c-accent-soft); }
.notif-item.unread:hover{ background: var(--c-accent-soft); filter: brightness(0.97); }

.notif-icon{ font-size: 1.1rem; flex: none; margin-top: 1px; }

.notif-body{ display:flex; flex-direction: column; gap: 2px; flex: 1; }
.notif-title{ font-size: 0.84rem; font-weight: 700; }
.notif-msg{ font-size: 0.8rem; color: var(--c-ink-soft); line-height: 1.4; }
.notif-time{ font-size: 0.7rem; color: var(--c-ink-soft); margin-top: 2px; }

.notif-unread-dot{
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  margin-top: 6px;
}

.notif-empty{
  text-align:center;
  padding: 28px 10px;
  color: var(--c-ink-soft);
  font-size: 0.85rem;
}

.auth-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 100vh;
  background: linear-gradient(135deg, #16202B 0%, #1F2D3D 55%, #2F6FED 130%);
  padding: 24px;
}

.auth-wrap{ width: 100%; max-width: 420px; }

.auth-card{
  background: var(--c-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-pop);
  padding: 36px 32px;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 24px;
}
.auth-brand .brand-text{ display:flex; flex-direction: column; }

.auth-title{
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.auth-subtitle{
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin-bottom: 22px;
}

.auth-error{
  background: #FBE7EE;
  color: var(--c-accent4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.auth-aviso{
  background: #EFF6FF;
  color: #1D4ED8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.auth-form{ display:flex; flex-direction: column; gap: 16px; }
.auth-form label{
  display:flex; flex-direction: column; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--c-ink-soft);
}
.auth-form input{
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--f-body);
  font-size: 0.92rem;
  outline: none;
}
.auth-form input:focus{ border-color: var(--c-accent); }

.auth-submit{ margin-top: 6px; width: 100%; padding: 12px; font-size: 0.92rem; }

.auth-hint{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-ink-soft);
}
.auth-hint strong{ color: var(--c-ink); }
.auth-hint ul{ list-style: none; margin-top: 8px; display:flex; flex-direction: column; gap: 4px; }
.auth-hint code{
  font-family: var(--f-mono);
  background: var(--c-bg);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.78rem;
}

/* ── Rail group / submenú desplegable ────────────────────────────────────── */
.rail-group{ display:flex; flex-direction:column; }

.rail-group-toggle{
  background:none; border:none; width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:10px;
  font-size:0.875rem; font-weight:500;
  color:rgba(255,255,255,0.55);
  transition:background 0.15s,color 0.15s;
  font-family:var(--f-body,inherit);
}
.rail-group-toggle:hover{ background:var(--c-rail-hover); color:#fff; }
.rail-group-toggle.active{ background:rgba(255,255,255,0.10); color:#fff; }

/* Flecha: invisible en rail colapsado, visible al expandir */
.rail-caret{
  margin-left:auto; font-size:0.85rem; line-height:1;
  opacity:0; transition:transform 0.22s ease,opacity 0.15s;
  display:inline-block; color:rgba(255,255,255,0.4);
}
.rail:hover .rail-caret,
.rail-trigger:hover ~ .rail .rail-caret{ opacity:1; }
.rail-group.open .rail-caret{ transform:rotate(90deg); }

/* Submenú: colapsado por defecto */
.rail-sub{
  display:flex; flex-direction:column; gap:1px;
  max-height:0; overflow:hidden;
  transition:max-height 0.28s ease;
}
/* Expandir solo cuando el rail ES visible Y el grupo está abierto */
.rail:hover .rail-group.open .rail-sub,
.rail-trigger:hover ~ .rail .rail-group.open .rail-sub{ max-height:1200px; }

.rail-sub-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 14px 7px 40px; border-radius:9px;
  font-size:0.82rem; font-weight:500;
  color:rgba(255,255,255,0.5);
  text-decoration:none;
  transition:background 0.14s,color 0.14s;
  white-space:nowrap; overflow:hidden;
}
.rail-sub-item:hover{ background:var(--c-rail-hover); color:#fff; }
.rail-sub-item.active{ background:rgba(47,111,237,0.25); color:#fff; font-weight:600; }
.rail-sub-icon{ font-size:0.9rem; width:18px; text-align:center; flex-shrink:0; }

/* Encabezado de categoría dentro de un submenú (p. ej. "Contabilidad",
   "Cuentas por Pagar" dentro de Finanzas). Es un botón desplegable:
   colapsa/expande los ítems reales que agrupa, en vez de mostrarlos
   siempre todos sueltos. */
.rail-subgroup{ display:flex; flex-direction:column; margin-top:6px; }
.rail-subgroup:first-child{ margin-top:0; }

.rail-sub-caption{
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  width:calc(100% - 16px); margin:0 8px;
  padding:8px 10px 8px 32px;
  border-radius:9px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  white-space:nowrap; overflow:hidden;
  opacity:0; transition:opacity 0.15s,color 0.15s,background 0.15s;
  font-family:var(--f-body,inherit);
}
.rail-sub-caption:hover{ background:var(--c-rail-hover); color:rgba(255,255,255,0.85); }
.rail:hover .rail-sub-caption,
.rail-trigger:hover ~ .rail .rail-sub-caption{ opacity:1; }

/* Categoría abierta: se resalta en el color de acento para que salte a
   la vista cuál sección está desplegada entre varias colapsadas. */
.rail-subgroup.open > .rail-sub-caption{
  color: var(--c-accent2, #E0A33E);
  background: rgba(255,255,255,0.07);
}

.rail-subgroup-label{ flex:1; text-align:left; }
.rail-subgroup-caret{
  font-size:0.72rem; line-height:1;
  transition:transform 0.2s ease,color 0.15s;
  color:rgba(255,255,255,0.32);
}
.rail-sub-caption:hover .rail-subgroup-caret{ color:rgba(255,255,255,0.75); }
.rail-subgroup.open > .rail-sub-caption .rail-subgroup-caret{
  transform:rotate(90deg);
  color: var(--c-accent2, #E0A33E);
}

.rail-subgroup-items{
  display:flex; flex-direction:column; gap:1px;
  max-height:0; overflow:hidden;
  transition:max-height 0.22s ease;
}
.rail-subgroup.open > .rail-subgroup-items{ max-height:600px; }

/* Etiquetas ocultas en rail colapsado */
.rail-sub-label{ opacity:0; transition:opacity 0.15s; white-space:nowrap; }
.rail:hover .rail-sub-label,
.rail-trigger:hover ~ .rail .rail-sub-label{ opacity:1; }

@media (max-width: 1080px){
  .content-grid{ grid-template-columns: 1fr; }
  .side{ position: static; }
}

@media (max-width: 640px){
  .main{ padding: 20px 16px 48px; }
  .form-row{ grid-template-columns: 1fr; }
  .search{ min-width: 0; }
  :root{ --rail-collapsed: 0px; }

  /* El menú lateral en escritorio se abre con :hover; en pantallas
     táctiles no hay "hover", así que aquí se convierte en un cajón
     (off-canvas) que se abre con el botón ☰ del topbar. */
  .rail{
    width: var(--rail-expanded);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000;
  }
  body.rail-open .rail{ transform: translateX(0); }
  .rail-trigger{ display: none; } /* franja de hover de escritorio, no aplica aquí */
  .rail-backdrop{
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999;
  }
  body.rail-open .rail-backdrop{ display: block; }
  body.rail-open{ overflow: hidden; }

  .main{ margin-left: 0; }
  .btn-menu-movil{ display: inline-flex; }
  .user-pill-info{ display: none; }
  .user-pill{ padding: 6px; }
  .topbar-actions{ gap: 8px; }

  /* Tablas: scroll horizontal automático en vez de desbordar la pantalla. */
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody{ display: table; width: 100%; }

  /* Cámara flotante del checador: nunca más ancha que la pantalla. */
  #camaraChecador{ width: calc(100vw - 32px) !important; max-width: 320px; }
}

body.dark-mode {
  --c-bg: #121212;
  --c-surface: #1E1E1E;
  --c-ink: #E0E0E0;
  --c-ink-soft: #A0A0A0;
  --c-line: #333333;
  --c-rail: #0D1117;
  --c-rail-hover: #1A1F24;

  --c-accent: #2F6FED;      /* azul principal */
  --c-accent-soft: #1a3a6e;
  --c-accent2: #E0A33E;     /* ámbar - RH */
  --c-accent3: #2FAE8C;     /* verde - Sistemas */
  --c-accent4: #D6608C;     /* rosa - Festejos */
  --c-accent5: #8C6FED;     /* morado - Compras */
}

/* ── Inputs, textareas y selects en modo oscuro ─────────────────────────── */
/* El navegador aplica fondo blanco nativo a estos elementos;
   hay que sobreescribirlo explícitamente. */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--c-bg);
  color: var(--c-ink);
  border-color: var(--c-line);
  color-scheme: dark; /* evita el blanco en date/time pickers */
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--c-ink-soft);
}

/* Composer: el textarea no tiene borde propio, hereda de .card */
body.dark-mode .composer-head textarea {
  background-color: transparent;
  color: var(--c-ink);
}

/* Chips del composer (select de departamento) */
body.dark-mode select.chip {
  background-color: var(--c-bg);
  color: var(--c-ink-soft);
  border-color: var(--c-line);
}

/* Inputs dentro de los modales */
body.dark-mode .modal-form input,
body.dark-mode .modal-form select,
body.dark-mode .modal-form textarea {
  background-color: var(--c-bg);
  color: var(--c-ink);
  border-color: var(--c-line);
}

/* Buscador de participantes (inline styles en JS, este los pisa) */
body.dark-mode #participantSearch,
body.dark-mode #editParticipantSearch,
body.dark-mode #encPregunta,
body.dark-mode #encLinkTitulo,
body.dark-mode #encLinkUrl,
body.dark-mode .enc-opcion input {
  background-color: var(--c-bg);
  color: var(--c-ink);
  border-color: var(--c-line);
}

/* Dropdown de resultados de búsqueda */
body.dark-mode #searchResultsDropdown,
body.dark-mode #editSearchResultsDropdown {
  background: var(--c-surface);
  border-color: var(--c-line);
}

/* Input de búsqueda general (topbar) */
body.dark-mode .search input {
  background: transparent;
  color: var(--c-ink);
}

/* Input de comentarios */
body.dark-mode .comment-input input {
  background-color: var(--c-bg);
  color: var(--c-ink);
}

/* Auth form inputs */
body.dark-mode .auth-form input {
  background-color: var(--c-bg);
  color: var(--c-ink);
  border-color: var(--c-line);
}

/* Botón cerrar modal */
body.dark-mode .modal-close {
  background: var(--c-bg);
  color: var(--c-ink-soft);
}

/* Tabs de encuesta (fondo blanco del tab activo) */
body.dark-mode .enc-tab[style*="background: #fff"],
body.dark-mode .enc-tab[style*="background:#fff"] {
  background: var(--c-surface) !important;
  color: var(--c-accent) !important;
}

/* Chips de participantes seleccionados */
body.dark-mode #selectedParticipantsChips span,
body.dark-mode #editSelectedParticipantsChips span {
  background: var(--c-bg);
  border-color: var(--c-line);
}

/* Contador de participantes en reposo */
body.dark-mode #participantCounter,
body.dark-mode #editParticipantCounter {
  background: var(--c-bg);
  color: var(--c-ink-soft);
}