/* ═══════════════════════════════════════════════════════════
   ORBBI · Overrides para la demo pública + UX general
   - Inputs y selects con ancho mínimo legible
   - Áreas de identificación de colegio más cómodas
   - Ocultar módulos no relevantes a la demo (Food Service, etc.)
   - Pulir tipografía y espaciado de formularios
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Inputs y selects: ancho mínimo decente ─────────── */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input[type="date"],
form input[type="url"],
form select,
form textarea {
  min-width: 18em;
  max-width: 100%;
  padding: 7px 11px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Inputs cortos legítimos (códigos, cantidades) — no aplica el min-width */
form input[size="1"],
form input[size="2"],
form input[size="3"],
form input[size="4"],
form input[size="5"],
form input.cell-small {
  min-width: 4em !important;
  width: auto !important;
}

form textarea {
  min-width: 28em;
  min-height: 5em;
}

/* Formularios de "School Setup" — direcciones, identificación: aún más cómodos */
.school-setup-form input[type="text"],
form input[name*="ADDRESS"],
form input[name*="address"],
form input[name*="STREET"],
form input[name*="street"],
form input[name*="EMAIL"],
form input[name*="email"],
form input[name*="TITLE"],
form input[name*="title"],
form input[name*="NAME"],
form input[name*="name"] {
  min-width: 24em;
}

/* Labels alineados arriba en formularios de admin */
form table.cell-divider td > label {
  display: inline-block;
  font-weight: 500;
  margin-right: 8px;
}

/* Espacio entre filas de formulario */
form table.cell-divider td {
  padding: 9px 8px;
}

/* ── 2. Ocultar menús/módulos no relevantes a la demo ──── */
/* Activado solo cuando body tiene class .demo-mode (lo agrega Warehouse cuando DEMO_MODE=1) */
body.demo-mode #menu .item.Food_Service,
body.demo-mode #menu .item.Eligibility,
body.demo-mode #menu .item.Discipline,
body.demo-mode #menu .item.Accounting,
body.demo-mode #menu .item.Student_Billing,
body.demo-mode .module-icon.Food_Service,
body.demo-mode .module-icon.Eligibility,
body.demo-mode .module-icon.Discipline,
body.demo-mode .module-icon.Accounting,
body.demo-mode .module-icon.Student_Billing,
body.demo-mode a[href*="modname=food_service"],
body.demo-mode a[href*="modname=Food_Service"],
body.demo-mode a[href*="modname=eligibility"],
body.demo-mode a[href*="modname=Eligibility"],
body.demo-mode a[href*="modname=discipline"],
body.demo-mode a[href*="modname=Discipline"],
body.demo-mode a[href*="modname=accounting"],
body.demo-mode a[href*="modname=Accounting"],
body.demo-mode a[href*="modname=student_billing"],
body.demo-mode a[href*="modname=Student_Billing"] {
  display: none !important;
}

/* Banner sutil indicando "Modo demo" en la parte superior */
body.demo-mode::before {
  content: "MODO DEMO — Profesora demo · datos de ejemplo · cambios no persisten";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #A8553D;
  color: #F0EEE6;
  text-align: center;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  z-index: 9999;
  font-weight: 500;
}

body.demo-mode #header,
body.demo-mode .header {
  margin-top: 28px;
}

/* ── 3. Tipografía global más limpia en formularios ────── */
form table.cell-divider {
  border-collapse: separate;
  border-spacing: 0 6px;
}

/* Botones de acción más visibles */
form button[type="submit"],
form input[type="submit"],
form button.button {
  padding: 9px 18px;
  font-weight: 500;
  border-radius: 6px;
}

/* Tablas con bordes más suaves */
table.color-row tr td,
table.cell-divider tr td {
  border-color: rgba(26, 26, 26, 0.06);
}