/* ================================================
   SEP7UM — Portal Privada Única
   CSS Base del Sistema de Diseño
   ================================================ */

/* ------------------------------------------------
   Variables / Tokens
   ------------------------------------------------ */
:root {
  --sep-purple-dark:   #4A1A6B;
  --sep-purple-mid:    #7B3FA0;
  --sep-purple-light:  #C89FD4;
  --sep-purple-pale:   #F3EBF8;
  --sep-gold:          #D4A017;
  --sep-gold-light:    #FDF3D0;
  --sep-white:         #FFFFFF;
  --sep-gray-100:      #F8F7FA;
  --sep-gray-200:      #EEECF2;
  --sep-gray-400:      #B8B2C4;
  --sep-gray-600:      #6B6478;
  --sep-text:          #1E0A2E;
  --sep-text-muted:    #6B6478;
  --sep-text-secondary:#6B6478;
  --sep-bg-secondary:  #F8F7FA;
  --sep-success-bg:    #EAF3DE;
  --sep-success-text:  #3B6D11;
  --sep-danger-bg:     #FCEBEB;
  --sep-danger-text:   #791F1F;
  --sep-warning-bg:    #FDF3D0;
  --sep-warning-text:  #854F0B;
  --sep-info-bg:       #F3EBF8;
  --sep-info-text:     #4A1A6B;
  --sep-radius-sm:     6px;
  --sep-radius-md:     8px;
  --sep-radius-lg:     12px;
  --sep-radius-xl:     16px;
  --sep-shadow:        0 1px 3px rgba(74,26,107,.08);
  --sep-border:        0.5px solid #EEECF2;
  --sep-sidebar-w:     240px;
}

/* ------------------------------------------------
   Reset
   ------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sep-text);
  background: var(--sep-gray-100);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--sep-purple-mid); text-decoration: none; }
a:hover { color: var(--sep-purple-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------
   Layout principal
   ------------------------------------------------ */
.sep-wrapper { display: flex; min-height: 100vh; }

/* Sidebar scrollbar */
.sep-sidebar::-webkit-scrollbar { width: 4px; }
.sep-sidebar::-webkit-scrollbar-track { background: transparent; }
.sep-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
.sep-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

.sep-sidebar {
  width: var(--sep-sidebar-w);
  height: 100vh;
  background: var(--sep-purple-dark);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.sep-main {
  margin-left: var(--sep-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
}

.sep-content {
  padding: 24px;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* ------------------------------------------------
   Topbar
   ------------------------------------------------ */
.sep-topbar {
  background: var(--sep-white);
  border-bottom: var(--sep-border);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 99;
}

.sep-topbar-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--sep-purple-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sep-topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

/* ------------------------------------------------
   Sidebar — logo
   ------------------------------------------------ */
.sep-logo {
  padding: 20px 20px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}

.sep-logo-text { font-size: 20px; font-weight: 500; color: var(--sep-white); letter-spacing: .02em; }
.sep-logo-text span.num { color: var(--sep-purple-light); }
.sep-logo-sub { font-size: 10px; color: var(--sep-gold); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

/* ------------------------------------------------
   Sidebar — nav
   ------------------------------------------------ */
.sep-nav { padding: 16px 0; flex: 1; }
.sep-nav-section { padding: 0 12px; margin-bottom: 4px; }
.sep-nav-label { font-size: 10px; font-weight: 500; color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase; padding: 8px 8px 4px; }

.sep-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--sep-radius-md);
  color: rgba(255,255,255,.75);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.sep-nav-item:hover { background: rgba(255,255,255,.08); color: var(--sep-white); text-decoration: none; }
.sep-nav-item.active { background: rgba(255,255,255,.12); color: var(--sep-white); border-left: 3px solid var(--sep-gold); }
.sep-nav-item i { font-size: 17px; width: 20px; flex-shrink: 0; }

/* ------------------------------------------------
   Sidebar — footer
   ------------------------------------------------ */
.sep-sidebar-footer {
  padding: 16px;
  border-top: 0.5px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sep-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sep-purple-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--sep-white);
  flex-shrink: 0;
}

.sep-avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.sep-sidebar-user-name { font-size: 12px; font-weight: 500; color: var(--sep-white); line-height: 1.3; word-break: break-word; }
.sep-sidebar-user-role { font-size: 10px; color: var(--sep-gold); }

/* ------------------------------------------------
   Cards
   ------------------------------------------------ */
.sep-card {
  background: var(--sep-white);
  border: var(--sep-border);
  border-radius: var(--sep-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.sep-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: var(--sep-border);
  gap: 8px;
  flex-wrap: wrap;
}

.sep-card-title { font-size: 14px; font-weight: 500; color: var(--sep-purple-dark); display: flex; align-items: center; gap: 8px; }
.sep-card-title i { color: var(--sep-gold); font-size: 18px; }

/* ------------------------------------------------
   KPI
   ------------------------------------------------ */
.sep-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.sep-kpi {
  background: var(--sep-white);
  border: 0.5px solid var(--sep-gray-200);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.sep-kpi-label { font-size: 12px; color: var(--sep-gray-600); margin-bottom: 8px; }
.sep-kpi-value { font-size: 24px; font-weight: 700; color: var(--sep-purple-dark); line-height: 1.2; word-break: break-all; }
.sep-kpi-value.gold    { color: var(--sep-gold); }
.sep-kpi-value.danger  { color: var(--sep-danger-text); }
.sep-kpi-value.success { color: var(--sep-success-text); }

/* ------------------------------------------------
   Botones
   ------------------------------------------------ */
.btn-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--sep-radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-sep:hover  { opacity: .88; text-decoration: none; }
.btn-sep:active { transform: scale(.98); }

.btn-sep-primary   { background: var(--sep-purple-dark); color: var(--sep-white); }
.btn-sep-gold      { background: var(--sep-gold); color: var(--sep-text); }
.btn-sep-outline   { background: transparent; color: var(--sep-purple-dark); border: 0.5px solid var(--sep-purple-dark); }
.btn-sep-danger    { background: #791F1F; color: #fff; border: none; }
.btn-sep-danger:hover { background: #5C1717; color: #fff; }
.btn-sep-success   { background: var(--sep-success-bg); color: var(--sep-success-text); }
.btn-sep-secondary { background: #7B3FA0; color: #fff; border: none; }
.btn-sep-secondary:hover { background: #4A1A6B; color: #fff; }
.btn-sep-sm  { padding: 5px 12px; font-size: 12px; }
.btn-sep-lg  { padding: 11px 24px; font-size: 15px; }

/* ------------------------------------------------
   Badges
   ------------------------------------------------ */
.sep-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.sep-badge-purple  { background: var(--sep-info-bg);    color: var(--sep-info-text); }
.sep-badge-gold    { background: var(--sep-warning-bg);  color: var(--sep-warning-text); }
.sep-badge-success { background: var(--sep-success-bg);  color: var(--sep-success-text); }
.sep-badge-danger  { background: var(--sep-danger-bg);   color: var(--sep-danger-text); }
.sep-badge-warning { background: var(--sep-warning-bg);  color: var(--sep-warning-text); }
.sep-badge-info    { background: #E6F1FB; color: #0C447C; }
.sep-badge-gray    { background: var(--sep-gray-200);    color: var(--sep-gray-600); }

/* ------------------------------------------------
   Tablas
   ------------------------------------------------ */
.sep-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.sep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sep-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sep-gray-600);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--sep-gray-200);
  background: var(--sep-gray-100);
  white-space: nowrap;
}

.sep-table td {
  padding: 11px 12px;
  border-bottom: 0.5px solid var(--sep-gray-200);
  color: var(--sep-text);
  vertical-align: middle;
}

.sep-table tr:last-child td { border-bottom: none; }
.sep-table tbody tr:hover td { background: var(--sep-gray-100); }

/*
  CLASES PARA OCULTAR COLUMNAS EN MOVIL
  Agrega estas clases a <th> y <td> en las vistas
  para controlar qué columnas se ocultan en pantallas pequeñas
*/

/* Ocultar en tablet (< 1024px) */
.col-hide-tablet { /* se aplica en media query */ }

/* Ocultar en móvil (< 768px) */
.col-hide-mobile { /* se aplica en media query */ }

/* Ocultar en móvil pequeño (< 480px) */
.col-hide-xs { /* se aplica en media query */ }

/* ------------------------------------------------
   Formularios
   ------------------------------------------------ */
.sep-form-group { margin-bottom: 16px; }

.sep-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sep-gray-600);
  margin-bottom: 6px;
}

.sep-input,
.sep-select,
.sep-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 0.5px solid var(--sep-gray-400);
  border-radius: var(--sep-radius-md);
  font-size: 13px;
  color: var(--sep-text);
  background: var(--sep-white);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}

.sep-input:focus,
.sep-select:focus,
.sep-textarea:focus {
  outline: none;
  border-color: var(--sep-purple-mid);
  box-shadow: 0 0 0 3px rgba(123,63,160,.12);
}

.sep-input.error, .sep-select.error { border-color: var(--sep-danger-text); }
.sep-help-text  { font-size: 11px; color: var(--sep-gray-600); margin-top: 4px; }
.sep-error-text { font-size: 11px; color: var(--sep-danger-text); margin-top: 4px; }

/* ------------------------------------------------
   Alertas
   ------------------------------------------------ */
.sep-alert {
  padding: 12px 16px;
  border-radius: var(--sep-radius-md);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sep-alert i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.sep-alert-success { background: var(--sep-success-bg); color: var(--sep-success-text); border: 0.5px solid #3B6D11; }
.sep-alert-danger  { background: var(--sep-danger-bg);  color: var(--sep-danger-text);  border: 0.5px solid #F09595; }
.sep-alert-warning { background: var(--sep-warning-bg); color: var(--sep-warning-text); border: 0.5px solid #D4A017; }
.sep-alert-info    { background: var(--sep-info-bg);    color: var(--sep-info-text);    border: 0.5px solid #C89FD4; }

/* ------------------------------------------------
   Page header
   ------------------------------------------------ */
.sep-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.sep-page-title { font-size: 18px; font-weight: 500; color: var(--sep-purple-dark); margin-bottom: 4px; }
.sep-page-subtitle { font-size: 13px; color: var(--sep-gray-600); margin-bottom: 0; }

/* ------------------------------------------------
   Detail grid
   ------------------------------------------------ */
.sep-detail-grid { display: flex; flex-direction: column; gap: 0; }

.sep-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--sep-gray-200);
  font-size: 13px;
  gap: 12px;
}

.sep-detail-row:last-child { border-bottom: none; }
.sep-detail-label { color: var(--sep-text-muted); font-size: 12px; flex-shrink: 0; }
.sep-detail-value { font-weight: 500; text-align: right; word-break: break-word; }

/* ------------------------------------------------
   Resident card
   ------------------------------------------------ */
.sep-resident-card { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.sep-resident-info { flex: 1; min-width: 0; }
.sep-resident-name { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.sep-resident-meta { font-size: 12px; color: var(--sep-text-muted); margin-bottom: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* ------------------------------------------------
   Empty state
   ------------------------------------------------ */
.sep-empty-state { text-align: center; padding: 24px 0; color: var(--sep-text-muted); }
.sep-empty-state i { font-size: 32px; opacity: .4; display: block; margin-bottom: 8px; }
.sep-empty-state p { font-size: 13px; margin-bottom: 12px; }

/* ------------------------------------------------
   Calendario
   ------------------------------------------------ */
.sep-cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.sep-cal-day-name { font-size: 10px; font-weight: 500; color: var(--sep-gray-600); text-align: center; padding: 4px 0; }
.sep-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sep-cal-day { font-size: 12px; text-align: center; padding: 6px 4px; border-radius: var(--sep-radius-sm); color: var(--sep-text); cursor: pointer; transition: background .12s; }
.sep-cal-day:hover    { background: var(--sep-gray-200); }
.sep-cal-day.hoy      { background: var(--sep-purple-dark); color: var(--sep-white); font-weight: 500; }
.sep-cal-day.reservado{ background: var(--sep-purple-pale); color: var(--sep-purple-mid); }
.sep-cal-day.mi-reserva { background: var(--sep-gold-light); color: var(--sep-warning-text); font-weight: 500; }
.sep-cal-day.cerrado  { background: var(--sep-danger-bg); color: var(--sep-danger-text); cursor: not-allowed; }
.sep-cal-day.inactivo { color: var(--sep-gray-400); cursor: default; }

/* ------------------------------------------------
   Login
   ------------------------------------------------ */
.sep-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sep-gray-100);
  padding: 16px;
}

.sep-login-card {
  background: var(--sep-white);
  border: var(--sep-border);
  border-radius: var(--sep-radius-xl);
  padding: 40px;
  width: 100%;
  max-width: 400px;
}

.sep-login-logo { text-align: center; margin-bottom: 28px; }
.sep-login-logo-text { font-size: 28px; font-weight: 500; color: var(--sep-purple-dark); }
.sep-login-logo-text .num { color: var(--sep-purple-light); }
.sep-login-logo-sub { font-size: 11px; color: var(--sep-gold); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }

/* ------------------------------------------------
   Utilidades
   ------------------------------------------------ */
.sep-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sep-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sep-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.sep-flex         { display: flex; }
.sep-flex-center  { display: flex; align-items: center; }
.sep-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sep-gap-8  { gap: 8px; }
.sep-gap-12 { gap: 12px; }
.sep-gap-16 { gap: 16px; }

.sep-mt-8  { margin-top: 8px; }
.sep-mt-16 { margin-top: 16px; }
.sep-mt-24 { margin-top: 24px; }
.sep-mb-8  { margin-bottom: 8px; }
.sep-mb-16 { margin-bottom: 16px; }
.sep-mb-24 { margin-bottom: 24px; }

.sep-text-muted    { color: var(--sep-gray-600); }
.sep-text-purple   { color: var(--sep-purple-dark); }
.sep-text-gold     { color: var(--sep-gold); }
.sep-text-danger   { color: var(--sep-danger-text); }
.sep-text-success  { color: var(--sep-success-text); }
.sep-text-sm  { font-size: 12px; }
.sep-text-xs  { font-size: 11px; }

.sep-divider { border: none; border-top: 0.5px solid var(--sep-gray-200); margin: 16px 0; }

/* ------------------------------------------------
   Mobile toggle / overlay
   ------------------------------------------------ */
.sep-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--sep-purple-dark);
  font-size: 24px;
}

.sep-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
}

.sep-overlay.active { display: block; }

/* ================================================
   RESPONSIVE TABLET — 1024px
   ================================================ */
@media (max-width: 1024px) {
  .sep-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .col-hide-tablet { display: none !important; }
}

/* ================================================
   RESPONSIVE MOBILE — 768px
   ================================================ */
@media (max-width: 768px) {

  /* Sidebar */
  .sep-sidebar {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .25s ease;
        transition: transform .25s ease;
        z-index: 100;
        height: 100%;
    }

    .sep-sidebar.open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

  .sep-main { margin-left: 0; width: 100%; }
  .sep-menu-toggle { display: flex; align-items: center; justify-content: center; }
  .sep-topbar { padding: 0 16px; }
  .sep-content { padding: 12px; }

  /* KPIs */
  .sep-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .sep-kpi { padding: 12px; }
  .sep-kpi-label { font-size: 10px; }
  .sep-kpi-value { font-size: 18px; }

  /* Cards */
  .sep-card { padding: 12px; margin-bottom: 10px; }
  .sep-card-header { flex-wrap: wrap; gap: 6px; }

  /* Page header */
  .sep-page-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .sep-page-title { font-size: 15px; }
  .sep-page-subtitle { font-size: 12px; }

  /* Grids — forzar 1 columna */
  .sep-grid-2,
  .sep-grid-3,
  .sep-grid-4 { grid-template-columns: 1fr !important; }

  /* Botones */
  .btn-sep { padding: 7px 12px; font-size: 12px; }
  .btn-sep-sm { padding: 4px 8px; font-size: 11px; }
  .btn-sep-lg { padding: 9px 16px; font-size: 13px; }

  /* Detail grid */
  .sep-detail-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sep-detail-value { text-align: left; }

  /* Login */
  .sep-login-card { padding: 24px 16px; }

  /* Footer */
  footer { flex-direction: column !important; gap: 4px; text-align: center; }

  /* Ocultar columnas secundarias en móvil */
  .col-hide-mobile { display: none !important; }

  /* ─── TABLAS — scroll controlado ─── */
  .sep-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sep-radius-md);
  }

  /* Tablas con pocas columnas — no necesitan scroll */
  .sep-table { font-size: 12px; }
  .sep-table th { padding: 8px 8px; font-size: 10px; }
  .sep-table td { padding: 8px 8px; }

  /* Acciones de tabla — botones iconos */
  .sep-table .sep-actions { white-space: nowrap; }

  /* ─── MÓDULO LOTES ─── */
  .sep-resident-card { flex-direction: column; gap: 8px; }

  /* ─── MÓDULO VISITAS — ocultar col placa ─── */
  .visita-col-placa { display: none; }

  /* ─── MÓDULO CÓDIGOS QR — mostrar compacto ─── */
  .codigo-col-vigencia { display: none; }

  /* ─── MÓDULO MULTAS ─── */
  .multa-col-categoria { display: none; }

  /* ─── MÓDULO TICKETS ─── */
  .ticket-col-tipo { display: none; }

  /* ─── MÓDULO RESERVAS ─── */
  .reserva-col-horario { display: none; }

  /* ─── MÓDULO PAGOS ─── */
  .pago-col-fecha-limite { display: none; }

  /* ─── DASHBOARD — grids de 2 cols → 1 ─── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 320px"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ─── ALBERCA — slots 4 columnas ─── */
  .alberca-slots {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* ─── INICIO RESIDENTE — hero ─── */
  .sep-hero-logo { display: none; }

  /* ─── CÓDIGOS QR — acortar código ─── */
  code { font-size: 10px; word-break: break-all; max-width: 120px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ─── LOTES — botones acción ─── */
  .lote-actions { display: flex; flex-direction: column; gap: 4px; }
  .lote-actions a, .lote-actions form, .lote-actions button { width: 100%; }
}

/* ================================================
   RESPONSIVE SMALL MOBILE — 480px
   ================================================ */
@media (max-width: 480px) {

  .sep-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .sep-kpi { padding: 10px; }
  .sep-kpi-label { font-size: 10px; }
  .sep-kpi-value { font-size: 15px; }

  .sep-page-title { font-size: 14px; }
  .sep-content { padding: 8px; }

  /* Ocultar columnas en móvil pequeño */
  .col-hide-xs { display: none !important; }

  /* Tablas más compactas */
  .sep-table { font-size: 11px; }
  .sep-table th { padding: 6px 6px; font-size: 9px; }
  .sep-table td { padding: 6px 6px; }

  /* Alberca — 3 columnas */
  .alberca-slots { grid-template-columns: repeat(3, 1fr) !important; }

  /* Modales — casi full screen */
  [style*="width:480px"],
  [style*="max-width:680px"],
  [style*="max-width:720px"],
  [style*="max-width:500px"] {
    width: 98vw !important;
    max-width: 98vw !important;
  }

  /* Login */
  .sep-login-card { margin: 8px; padding: 20px 14px; }

  /* Botones de acción en formularios */
  div[style*="display:flex;gap"] > .btn-sep,
  div[style*="display:flex; gap"] > .btn-sep {
    flex: 1;
  }

  /* Badge compactos */
  .sep-badge { padding: 2px 6px; font-size: 10px; }
}

/* ================================================
   UTILIDADES ADICIONALES RESPONSIVE
   ================================================ */

/* Scroll suave horizontal en contenedores */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Texto que no rompe en móvil */
.no-wrap { white-space: nowrap; }

/* Forzar wrap en móvil */
@media (max-width: 768px) {
  .mobile-wrap { flex-wrap: wrap !important; }
  .mobile-col  { flex-direction: column !important; }
  .mobile-full { width: 100% !important; }
  .mobile-hide { display: none !important; }
  .mobile-show { display: block !important; }
}
/* ─── CALENDARIO COMUNITARIO ─────────────────────────────── */

/* Grid días — desktop */
#vistaMes [style*="min-height:90px"] {
    min-height: 90px;
}

@media (max-width: 768px) {
    /* En móvil arrancar en lista */
    #vistaMes  { display: none !important; }
    #vistaLista { display: block !important; }

    /* Ajustar botones toggle */
    #btnVistaMes {
        background: transparent !important;
        color: #6B6478 !important;
    }
    #btnVistaLista {
        background: #4A1A6B !important;
        color: #fff !important;
    }

    /* Celdas del grid más compactas */
    #vistaMes [style*="min-height:90px"] {
        min-height: 60px !important;
        padding: 2px !important;
    }

    /* Eventos en celda — solo icono */
    #vistaMes [style*="border-left:2px solid"] {
        font-size: 0 !important;
        padding: 4px !important;
        justify-content: center !important;
    }

    #vistaMes [style*="border-left:2px solid"] i {
        font-size: 11px !important;
    }

    /* Número de día más pequeño */
    #vistaMes [style*="width:24px;height:24px"] {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    /* Modal crear evento — scroll */
    #modalCrearEvento > div {
        max-height: 92vh;
        overflow-y: auto;
    }

    /* Eventos de hoy — stack vertical */
    #vistaMes + div [style*="display:flex;flex-wrap:wrap"] {
        flex-direction: column;
    }

    /* Leyenda de tipos — más compacta */
    .sep-content > div[style*="flex-wrap:wrap;gap:6px"] {
        gap: 4px !important;
    }

    /* Navegación mes — centrar */
    .sep-page-header { flex-direction: column; }
}

@media (max-width: 480px) {
    /* Encabezados días — solo inicial */
    #vistaMes [style*="letter-spacing:.06em"] {
        font-size: 9px !important;
        padding: 6px 2px !important;
    }
}