/* ========== TOKENS / BREAKPOINTS ========== */
:root{
  --sm: 640px; --md: 768px; --lg: 992px;
  --gap: 12px; --radius: 12px;
}

/* ========== CONTAINERS ========== */
.container,
.form-card,
.card { max-width: 1200px; }

/* ========== TIPOGRAFIA & INPUTS ========== */
.form-card input,.form-card select,.form-card textarea { font-size:16px; } /* evita zoom iOS */
@media (max-width: var(--sm)){
  h1,.card h1{font-size:1.35rem}
  h2,.card h2{font-size:1.25rem}
  h3,.card h3{font-size:1.05rem}
}

/* ========== FORM GRID UNIFICADA ========== */
/* Wrapper de grelha nos formulários */
.form-grid{
  display:grid;
  grid-template-columns: repeat(var(--cols,4), minmax(0,1fr));
  gap: var(--gap);
}
.form-grid.cols-4{ --cols:4; }
.form-grid.cols-3{ --cols:3; }
.form-grid.cols-2{ --cols:2; }

.field{ grid-column: span 1; }
.span-2{ grid-column: span 2; }
.span-3{ grid-column: span 3; }
.span-4{ grid-column: span 4; }
.form-grid.cols-6{ --cols: 6; }


/* Tablet: reduz colunas */
@media (max-width: var(--lg)){
  .form-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field{ grid-column: span 1; }
}
/* Mobile: 1 coluna sempre */
@media (max-width: var(--sm)){
  .form-grid{ grid-template-columns: 1fr !important; }
  .field, .span-2, .span-3, .span-4{ grid-column: 1 / -1 !important; }
}

/* ========== FILTROS/BARRAS DE AÇÕES ========== */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
@media (max-width: var(--sm)){ .filter-row>*{ flex:1 1 180px; } }

/* ========== TABELAS (DEFAULT: SCROLL NO MOBILE) ========== */
@media (max-width: var(--md)){
  .table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; }
  .table th,.table td{ padding:8px 10px; }
  .table td.actions{ white-space:normal; }
}
/* Ações compactas */
@media (max-width: var(--sm)){
  .table td.actions a,.table td.actions button{ font-size:13px; padding:6px 10px; height:auto; border-radius:8px; display:inline-block; margin:2px 0; }
}
@media (max-width: 480px){
  .table td.actions a,.table td.actions button{ display:block; width:100%; text-align:center; }
}

/* Esconder colunas não críticas — por tabela */
@media (max-width: var(--sm)){
  /* ALUMNOS: 2=Fecha nac., 5=Tel.2 (ajusta se necessário) */
  .table.alumnos th:nth-child(2), .table.alumnos td:nth-child(2),
  .table.alumnos th:nth-child(5), .table.alumnos td:nth-child(5){ display:none; }

  /* CLASES: 3=Sala, 6=Profesor/a */
  .table.clases th:nth-child(3), .table.clases td:nth-child(3),
  .table.clases th:nth-child(6), .table.clases td:nth-child(6){ display:none; }

  /* INSCRIPCIONES: 3=Curso (se quisermos libertar espaço) */
  .table.inscripciones th:nth-child(3), .table.inscripciones td:nth-child(3){ display:none; }
}

/* ========== TABELA -> CARDS (OPCIONAL) ========== */
@media (max-width: var(--sm)){
  .table.stack-mobile{ display:block; width:100%; border:0; }
  .table.stack-mobile thead{ display:none; }
  .table.stack-mobile tbody{ display:block; }
  .table.stack-mobile tr{
    display:block; border:1px solid #eaecef; border-radius:12px; padding:8px 0; margin:10px 0; background:#fff;
  }
  .table.stack-mobile td{
    display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid #f2f2f3;
  }
  .table.stack-mobile td:last-child{ border-bottom:0; }
  .table.stack-mobile td::before{
    content: attr(data-label); font-weight:600; color:#444; margin-right:12px;
  }
  .table.stack-mobile td.actions{ display:block; }
  .table.stack-mobile td.actions a,.table.stack-mobile td.actions button{
    display:block; width:100%; text-align:center; margin:4px 0; padding:8px 10px; border-radius:10px;
  }
}

/* ========== UTILITÁRIOS ==========
   (usar no markup em vez de estilos inline) */
.hide-sm{ }
@media (max-width: var(--sm)){ .hide-sm{ display:none !important; } }

/* ========== AJUSTES VER ALUMNO ==========
   (botões quebram bem; dl mais legível no mobile) */
@media (max-width: var(--md)){
  .form-card > div[style*="justify-content:space-between"]{ gap:8px; flex-wrap:wrap; }
  .form-card > div[style*="justify-content:space-between"] > div{ display:flex; gap:8px; flex-wrap:wrap; }
}
@media (max-width: var(--sm)){
  .dl > div{ display:block; }
  .dl dt{ font-weight:600; margin-bottom:2px; }
  .dl dd{ margin:0 0 10px 0; word-break:break-word; }
}
/* === FORCE GRID SITEWIDE (desktop) === */
.form-grid { 
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 colunas largas */
  gap: 14px !important;
}
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.field { display: flex; flex-direction: column; }
.field.span-2 { grid-column: span 2; }
.field.span-3 { grid-column: span 3; }
.field.span-4 { grid-column: span 4; }

/* tablet */
@media (max-width: 1024px) {
  .form-grid,
  .form-grid.cols-2,
  .form-grid.cols-3,
  .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* mobile */
@media (max-width: 680px) {
  .form-grid,
  .form-grid.cols-2,
  .form-grid.cols-3,
  .form-grid.cols-4 { grid-template-columns: 1fr !important; }
  .field.span-2, .field.span-3, .field.span-4 { grid-column: 1 / -1; }
}
/* ==== GRID GENÉRICA PARA FORMULÁRIOS ==== */
.form-grid { 
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* desktop: 2 colunas largas */
  gap: 14px !important;
}
.field { display:flex; flex-direction:column; }
.field.span-2 { grid-column: span 2; }

/* tablet mantém 2 colunas */
@media (max-width: 1024px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* mobile: 1 coluna */
@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .field.span-2 { grid-column: 1 / -1; }
}

/* Tabelas responsivas: nunca quebram, têm scroll suave */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { min-width: 720px; } /* ajusta se precisares */



/* Cartões na ficha do aluno */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colunas por defeito (desktop) */
  gap: 18px;
  margin-top: 14px;
}

/* Em ecrãs pequenos, vira coluna única */
@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- Inscripciones: grelhas dos seletores ---------- */
.insc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr)); /* desktop */
  gap: 12px;
  align-items: end;
}
.insc-grid .field { display:flex; flex-direction:column; }
.insc-grid .field > * { width:100%; }

/* no mobile/tablet fica 1 coluna */
@media (max-width: 900px) {
  .insc-grid {
    grid-template-columns: 1fr;
  }
  .insc-grid .field:last-child button { width:100%; } /* botão ocupa toda a largura */
}
/* Inscripciones: empilhar seletores no mobile sem tocar no desktop */
@media (max-width: 900px) {
  /* Apanha o form OU um div interno com esse data-role */
  [data-role="insc-create"],
  [data-role="insc-filters"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Cada “campo” ocupa a largura toda,
     quer uses <div class="field"> quer não */
  [data-role="insc-create"] > *,
  [data-role="insc-filters"] > * {
    width: 100% !important;
  }

  /* Inputs/selects/botões a 100% para não “pisarem” texto */
  [data-role="insc-create"] select,
  [data-role="insc-create"] input,
  [data-role="insc-create"] button,
  [data-role="insc-filters"] select,
  [data-role="insc-filters"] input,
  [data-role="insc-filters"] button {
    width: 100% !important;
  }
}
/* === Clase Editar (mobile) === */
@media (max-width: 576px) {
  #page-clase_editar .days-inline { gap: 6px; }
  #page-clase_editar input[type="time"] { min-width: 0; } /* deixa ocupar 100% quando empilha */
}