/* ═══════════════════════════════════════════════════════════
   Ausencias Escolares v2 – Frontend + Admin
   ═══════════════════════════════════════════════════════════ */

:root {
  --ae-blue:    #1a6faf;
  --ae-blue-dk: #135a90;
  --ae-green:   #1a7a4a;
  --ae-red:     #c0392b;
  --ae-border:  #d5dce6;
  --ae-bg:      #f4f7fa;
  --ae-card:    #ffffff;
  --ae-text:    #1e2124;
  --ae-muted:   #6b7685;
  --ae-r:       8px;
  --ae-font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.ae-wrap {
  max-width: 660px;
  margin: 1.5rem auto;
  font-family: var(--ae-font);
  font-size: .95rem;
  color: var(--ae-text);
}

/* ── Grid 2 columnas ─────────────────────────────────────── */
.ae-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem .9rem;
  margin-bottom: .6rem;
}
@media (max-width: 520px) { .ae-grid-2 { grid-template-columns: 1fr; } }

/* ── Campo ───────────────────────────────────────────────── */
.ae-field { display: flex; flex-direction: column; gap: .25rem; }

.ae-field label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ae-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.ae-field input {
  padding: .55rem .7rem;
  border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r);
  font-size: .95rem;
  font-family: var(--ae-font);
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
}
.ae-field input:focus {
  outline: none;
  border-color: var(--ae-blue);
  box-shadow: 0 0 0 3px rgba(26,111,175,.12);
}
.ae-field.ae-err input { border-color: var(--ae-red); }
.ae-err-msg { font-size: .78rem; color: var(--ae-red); }

/* ── Secciones por grupo ─────────────────────────────────── */
.ae-sections-wrap {
  border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r);
  overflow: hidden;
  margin: .6rem 0;
  background: #fff;
}

.ae-sec-label {
  padding: .55rem .85rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ae-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  background: var(--ae-bg);
  border-bottom: 1px solid var(--ae-border);
}
.ae-sec-hint { font-weight: 400; font-size: .75rem; }

/* ── Acordeón <details> ──────────────────────────────────── */
.ae-group { border-bottom: 1px solid var(--ae-border); }
.ae-group:last-child { border-bottom: none; }

.ae-group-summary {
  list-style: none;
  padding: .55rem .85rem;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  user-select: none;
  transition: background .12s;
}
.ae-group-summary:hover { background: var(--ae-bg); }
.ae-group[open] .ae-group-summary { color: var(--ae-blue); }
.ae-group-summary::before { content: '▶'; font-size: .65rem; transition: transform .15s; }
.ae-group[open] .ae-group-summary::before { transform: rotate(90deg); }
.ae-count { font-weight: 400; color: var(--ae-muted); font-size: .8rem; margin-left: auto; }

/* ── Grid de checkboxes ──────────────────────────────────── */
.ae-checks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .3rem .5rem;
  padding: .5rem .85rem .7rem;
  background: #fafbfc;
}

.ae-chk-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  cursor: pointer;
  padding: .25rem .4rem;
  border-radius: 4px;
  transition: background .1s;
}
.ae-chk-label:hover { background: #eef3f8; }
.ae-chk-label input[type="checkbox"] {
  width: 1rem; height: 1rem;
  accent-color: var(--ae-blue);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Nota / Observación ──────────────────────────────────── */
.ae-notes-wrap {
  margin: .5rem 0;
  border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r);
  overflow: hidden;
}
.ae-notes-wrap > summary {
  padding: .5rem .85rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--ae-muted);
  background: #fff;
  list-style: none;
}
.ae-notes-wrap > summary:hover { background: var(--ae-bg); }
.ae-notes-wrap textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-top: 1px solid var(--ae-border);
  padding: .5rem .85rem;
  font-size: .9rem;
  font-family: var(--ae-font);
  resize: vertical;
  background: #fafbfc;
}
.ae-notes-wrap textarea:focus { outline: none; background: #fff; }

/* ── Footer del form ─────────────────────────────────────── */
.ae-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.ae-privacy {
  font-size: .75rem;
  color: var(--ae-muted);
  margin: 0;
}

/* ── Botones ─────────────────────────────────────────────── */
.ae-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem 1.3rem;
  border-radius: var(--ae-r);
  font-size: .95rem;
  font-weight: 600;
  font-family: var(--ae-font);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.ae-btn-primary { background: var(--ae-blue); color: #fff; }
.ae-btn-primary:hover { background: var(--ae-blue-dk); color: #fff; transform: translateY(-1px); }
.ae-btn-sec { background: var(--ae-bg); color: var(--ae-blue); border: 1.5px solid var(--ae-blue); }
.ae-btn-sec:hover { background: #dde8f5; color: var(--ae-blue); }

/* ── Notice ──────────────────────────────────────────────── */
.ae-notice {
  padding: .65rem .9rem;
  border-radius: var(--ae-r);
  margin-bottom: .75rem;
  font-size: .88rem;
}
.ae-error { background: #fdf0ef; border-left: 4px solid var(--ae-red); color: var(--ae-red); }

/* ── Pantalla éxito ──────────────────────────────────────── */
.ae-ok { padding: 2rem 1.5rem; background:#fff; border:1.5px solid var(--ae-border); border-radius:var(--ae-r); text-align:center; }
.ae-ok-icon { font-size:3rem; margin-bottom:.5rem; }
.ae-ok h2 { color:var(--ae-green); margin-bottom:1rem; }
.ae-ok-sub { font-size:.8em; font-weight:400; color:var(--ae-muted); }
.ae-ok-summary { text-align:left; border:1.5px solid var(--ae-border); border-radius:var(--ae-r); overflow:hidden; margin:1rem 0; }
.ae-ok-row { display:flex; align-items:flex-start; gap:1rem; padding:.6rem .9rem; border-bottom:1px solid var(--ae-border); font-size:.9rem; }
.ae-ok-row:last-child { border-bottom:none; }
.ae-ok-lbl { min-width:140px; color:var(--ae-muted); font-size:.8rem; flex-shrink:0; }
.ae-ok-list { margin:0; padding-left:1.1rem; }
.ae-ok-list li { margin:.15rem 0; }
.ae-ok-nosec { color:var(--ae-red); margin:0; font-size:.85rem; }
.ae-ok-copy { color:var(--ae-muted); font-size:.85rem; margin:.75rem 0 1rem; }


/* ═══════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════ */

.ae-admin h1 { margin-bottom: 1.25rem; }

.ae-admin-card {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: var(--ae-r);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.ae-admin-card h2 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: .9rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--ae-blue);
  color: var(--ae-blue);
}

/* Toolbar grupos */
.ae-groups-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.ae-groups-toolbar h2 { margin-bottom: 0; border: none; padding: 0; }

/* Tarjeta de grupo */
.ae-group-card {
  border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r);
  margin-bottom: .85rem;
  overflow: hidden;
}

.ae-group-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  background: var(--ae-bg);
  border-bottom: 1px solid var(--ae-border);
  flex-wrap: wrap;
}
.ae-drag { color: #aaa; cursor: grab; font-size: 1.1rem; }
.ae-group-name-input {
  flex: 1;
  min-width: 160px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .3rem .5rem;
  font-size: .95rem;
  background: transparent;
}
.ae-group-name-input:focus {
  outline: none;
  border-color: var(--ae-blue);
  background: #fff;
}
.ae-group-actions { display: flex; gap: .4rem; margin-left: auto; }

/* Panel generador */
.ae-gen-panel {
  background: #fffbea;
  border-bottom: 1px solid #e8d96a;
  padding: .85rem 1rem;
}
.ae-gen-inner strong { display: block; margin-bottom: .6rem; font-size: .9rem; }
.ae-gen-fields {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem .9rem;
  align-items: flex-end;
}
.ae-gen-fields label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ae-muted);
}
.ae-gen-fields input {
  padding: .35rem .5rem;
  border: 1px solid var(--ae-border);
  border-radius: 4px;
}
.ae-gen-preview-box {
  margin-top: .75rem;
  padding: .6rem .85rem;
  background: #fff;
  border: 1px solid #ddc;
  border-radius: 5px;
  font-size: .85rem;
  line-height: 1.6;
}

/* Tabla secciones */
.ae-sec-table { width: 100%; border-collapse: collapse; }
.ae-sec-table th {
  background: #f7f9fb;
  padding: .4rem .65rem;
  font-size: .78rem;
  font-weight: 700;
  text-align: left;
  color: var(--ae-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--ae-border);
}
.ae-sec-table td {
  padding: .35rem .5rem;
  border-bottom: 1px solid #edf0f4;
  vertical-align: middle;
}
.ae-sec-table tr:last-child td { border-bottom: none; }
.ae-sec-field {
  width: 100%;
  padding: .3rem .45rem;
  border: 1px solid var(--ae-border);
  border-radius: 4px;
  font-size: .88rem;
  box-sizing: border-box;
}
.ae-sec-field:focus { outline: none; border-color: var(--ae-blue); }
.ae-del-sec { line-height: 1; }
.ae-empty { text-align: center; color: var(--ae-muted); font-style: italic; padding: .75rem; }

.ae-add-sec-btn {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 0;
  border-top: 1px solid var(--ae-border);
  background: #f9fbfd;
}
.ae-add-sec-btn:hover { background: #eef3f8 !important; }

/* Info card */
.ae-info-card { background: #eef5ff; border-color: #b3ccee; }
.ae-shortcode {
  background: var(--ae-blue);
  color: #fff;
  padding: .3rem .75rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: .95rem;
}

.ae-empty-msg { color: var(--ae-muted); font-style: italic; text-align: center; padding: 1rem; }

/* ── Radio (selección única) ─────────────────────────────── */
.ae-radio-label input[type="radio"] {
  accent-color: var(--ae-blue);
  width: 1rem; height: 1rem;
}
.ae-radio-grid { background: #fdf8ff; }

/* ── Admin: toggle selección única ──────────────────────── */
.ae-single-toggle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ae-muted);
  cursor: pointer;
  white-space: nowrap;
  margin-left: .5rem;
}
.ae-single-toggle input { accent-color: var(--ae-blue); cursor: pointer; }