/* =====================================================================
   Estilo "di" – Reinscripción / Réinscription
   Lycée franco-argentin Jean Mermoz
   Basado en el manual de estilo del formulario de autorizaciones:
   misma tipografía, colores, cajas y botones.
   Todas las reglas empiezan con .di para no chocar con el resto del sitio
   (salvo html/body, que se pintan con el fondo de la página).
   ===================================================================== */

/* Fuente Marianne. Los archivos van en la carpeta "fonts" (al lado de "css"):
   Marianne-Regular, Marianne-Regular_Italic, Marianne-Bold, Marianne-Bold_Italic (.woff2 y .woff) */
@font-face{font-family:"Marianne";src:url("../fonts/Marianne-Regular.woff2") format("woff2"),url("../fonts/Marianne-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Marianne";src:url("../fonts/Marianne-Regular_Italic.woff2") format("woff2"),url("../fonts/Marianne-Regular_Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Marianne";src:url("../fonts/Marianne-Bold.woff2") format("woff2"),url("../fonts/Marianne-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Marianne";src:url("../fonts/Marianne-Bold_Italic.woff2") format("woff2"),url("../fonts/Marianne-Bold_Italic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}

html,body{margin:0;padding:0;background:#f5f6f8}
@media (prefers-color-scheme:dark){html,body{background:#14171d}}

.di{
  --di-bg:#f5f6f8; --di-card:#ffffff; --di-text:#1d2433; --di-muted:#5b6578;
  --di-line:#d9deea; --di-line-strong:#b7c0d3;
  --di-accent:#0b2a5b; --di-accent-bg:#e6edf9;
  --di-danger:#b3261e; --di-ok-bg:#e4f4e8; --di-ok:#1e6b34; --di-radius:10px;
  --di-input-bg:#ffffff; --di-readonly-bg:#f5f6f8;
  max-width:800px; margin:0 auto; padding:24px 16px 48px;
  background:var(--di-bg); color:var(--di-text);
  font-family:Marianne,"Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5;
  box-sizing:border-box; text-align:left;
}
.di *,.di *::before,.di *::after{box-sizing:border-box}
.di p{margin:0}
.di a{color:var(--di-accent)}

@media (prefers-color-scheme:dark){
  .di{
    --di-bg:#14171d; --di-card:#1d222c; --di-text:#eceff5; --di-muted:#a3adc0;
    --di-line:#323a4a; --di-line-strong:#4a556b;
    --di-accent:#9db8ec; --di-accent-bg:#23324f;
    --di-danger:#ff8a80; --di-ok-bg:#1d3a28; --di-ok:#8fd6a5;
    --di-input-bg:#14171d; --di-readonly-bg:#262c38;
  }
}

/* Segunda línea en francés (textos que NO son títulos) */
.di .di__fr{display:block;font-weight:400;font-style:italic;color:var(--di-muted)}

/* Encabezado de la página */
.di .di__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.di .di__brand{font-size:13px;font-weight:700;color:var(--di-muted);letter-spacing:.02em;margin:0}
.di .di__nav{font-size:13px}
.di .di__nav a{text-decoration:none;font-weight:700}
.di .di__nav a:hover{text-decoration:underline}

/* Título de la página (h1): español y francés con la MISMA jerarquía */
.di .di__title{font-size:22px;font-weight:700;color:var(--di-accent);margin:0 0 8px;line-height:1.25}
.di .di__title span{display:block}

/* Título de sección (h2): español y francés con la MISMA jerarquía */
.di .di__sec{margin:32px 0 0}
.di .di__sec-title{
  font-size:19px;font-weight:700;color:var(--di-accent);margin:0 0 14px;line-height:1.3;
  padding-bottom:8px;border-bottom:2px solid var(--di-accent);
}
.di .di__sec-title span{display:block}

/* Caja (tarjeta) */
.di .di__q{
  min-width:0; background:var(--di-card); border:1px solid var(--di-line);
  border-radius:var(--di-radius); padding:14px 16px; margin:0 0 12px;
}
.di .di__q-title{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--di-accent);padding:0}
.di .di__q-title .di__fr{font-size:13.5px;font-weight:700;font-style:normal}
.di .di__q-desc{margin:8px 0 12px;font-size:13px;color:var(--di-muted)}
.di .di__q-desc span{display:block;font-style:italic}
.di .di__q-desc span+span{margin-top:3px;opacity:.85}

/* Leyenda / bloque informativo celeste */
.di .di__legend{background:var(--di-accent-bg);border-radius:var(--di-radius);padding:14px 16px;margin:0 0 16px;font-size:13.5px}
.di .di__legend p+p{margin-top:12px}
.di .di__legend strong{color:var(--di-accent)}
.di .di__legend .di__fr{font-size:12.5px;margin-top:2px}

/* ---------- Campos de formulario ---------- */
.di .di__grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.di .di__grid2 > .di__q{margin:0}
.di .di__field{margin:0 0 12px}
.di .di__field:last-child{margin-bottom:0}
.di .di__label{display:block;font-size:13.5px;font-weight:700;margin:0 0 4px;line-height:1.3}
.di .di__label .di__fr{font-size:12.5px;font-weight:400}
.di .di__req{color:var(--di-danger);font-weight:700}

.di .di__input{
  display:block;width:100%;font:inherit;font-size:14px;line-height:1.3;color:var(--di-text);
  background:var(--di-input-bg);border:1px solid var(--di-line-strong);border-radius:8px;
  padding:8px 10px;margin:0;min-height:38px;
}
.di select.di__input{padding-right:6px}
.di .di__input:focus{outline:none;border-color:var(--di-accent);box-shadow:0 0 0 3px var(--di-accent-bg)}
.di .di__input:disabled{background:var(--di-readonly-bg);color:var(--di-muted);border-color:var(--di-line);cursor:not-allowed}

/* Filas de campos cortos (fecha, número/piso/dpto/CP, contactos) */
.di .di__row{display:grid;gap:8px;align-items:end}
.di .di__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.di .di__row--4{grid-template-columns:2fr 1fr 1fr 1.4fr}
.di .di__row--contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.di .di__mini{display:block;font-size:12px;color:var(--di-muted);margin:0 0 3px}
.di .di__mini .di__fr{display:inline;font-size:11.5px}

/* Opciones (casillas y botones de opción) */
.di .di__opts{display:flex;flex-wrap:wrap;gap:8px}
.di .di__opt{
  display:flex;align-items:center;gap:8px;border:1px solid var(--di-line-strong);
  border-radius:var(--di-radius);padding:8px 12px;font-size:14px;line-height:1.3;
  cursor:pointer;background:transparent;color:var(--di-text);
}
.di .di__opt:hover{background:var(--di-bg)}
.di .di__opt--on{border-color:var(--di-accent);background:var(--di-accent-bg);color:var(--di-accent)}
.di .di__opt .di__fr{font-size:12px;color:inherit;opacity:.75}
.di .di__opt input{margin:0;width:16px;height:16px;flex:none;accent-color:var(--di-accent)}

/* Mensajes */
.di .di__alert{border:2px solid var(--di-danger);color:var(--di-danger);background:var(--di-card);border-radius:var(--di-radius);padding:10px 14px;margin:0 0 14px;font-size:14px}
.di .di__alert .di__fr{color:inherit;opacity:.85}

/* Barra de envío y botón */
.di .di__bar{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.di .di__btn{
  font:inherit;font-weight:700;background:var(--di-accent);color:var(--di-card);
  border:0;border-radius:var(--di-radius);padding:10px 22px;cursor:pointer;
  text-align:center;line-height:1.25;
}
.di .di__btn:hover{opacity:.9}
.di .di__btn .di__fr{font-size:12px;font-weight:400;color:inherit;opacity:.8}
.di .di__prog{font-size:13px;color:var(--di-muted)}

/* Login: caja angosta centrada */
.di .di__narrow{max-width:420px;margin:0 auto}

/* Pie de página */
.di .di__foot{margin-top:40px;padding-top:14px;border-top:1px solid var(--di-line);font-size:12.5px;color:var(--di-muted)}
.di .di__foot a{color:var(--di-muted);text-decoration:none}
.di .di__foot a:hover{text-decoration:underline}

@media (max-width:620px){
  .di .di__grid2{grid-template-columns:1fr}
  .di .di__row--contact{grid-template-columns:1fr}
}
@media (max-width:420px){
  .di .di__row--4{grid-template-columns:1fr 1fr}
}

/* ---------- Barra superior con logos (todo el ancho) ----------
   Va FUERA de .di. Fondo blanco también en modo oscuro, para que los logos se vean. */
.di-top{background:#ffffff;border-bottom:1px solid #d9deea;font-family:Marianne,"Segoe UI",system-ui,sans-serif}
.di-top__in{max-width:800px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.di-top__logos{display:flex;align-items:center;gap:18px;flex:none}
.di-top__logos a{display:block;line-height:0}
.di-top__logos img{display:block;height:52px;width:auto}
.di-top__logos img.di-top__aefe{height:40px}
.di-top__title{margin:0;text-align:right;color:#0b2a5b;font-size:15px;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.05em}
.di-top__title span{display:block}
@media (max-width:480px){
  .di-top__in{gap:10px}
  .di-top__logos{gap:10px}
  .di-top__logos img{height:38px}
  .di-top__logos img.di-top__aefe{height:28px}
  .di-top__title{font-size:12.5px;letter-spacing:.03em}
}

/* Campo de contraseña con ojo para mostrarla */
.di .di__pass{position:relative}
.di .di__pass .di__input{padding-right:44px}
.di .di__eye{position:absolute;top:0;right:0;height:100%;width:42px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:0 8px 8px 0;color:var(--di-muted);cursor:pointer;padding:0}
.di .di__eye:hover{color:var(--di-accent)}
.di .di__eye:focus-visible{outline:2px solid var(--di-accent);outline-offset:-2px}
.di .di__eye .di__eye-off{display:none}
.di .di__eye[aria-pressed="true"]{color:var(--di-accent)}
.di .di__eye[aria-pressed="true"] .di__eye-on{display:none}
.di .di__eye[aria-pressed="true"] .di__eye-off{display:block}

/* Si falta el archivo de un logo: se oculta la imagen rota y se muestra el nombre en texto */
.di-top__logos img{max-width:320px;overflow:hidden;font-size:11px}
.di-top__alt{display:none;color:#0b2a5b;font-weight:700;font-size:13px;line-height:1.15;text-decoration:none;white-space:nowrap}
.di-top__alt--aefe{font-size:20px;letter-spacing:-.02em}
.di-top__logos a{text-decoration:none}
.di-top__title span{white-space:nowrap}

/* ---------- Ficha del alumno/a y autorizaciones (reinscription2) ---------- */
.di fieldset{min-width:0}
.di .di__alu + .di__alu{margin-top:48px}
.di .di__sub{font-size:17px;font-weight:700;color:var(--di-accent);margin:26px 0 12px;line-height:1.3;padding-bottom:6px;border-bottom:1px solid var(--di-accent)}
.di .di__sub span{display:block}
.di .di__data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.di .di__sub-q{border:0;margin:0 0 14px;padding:0}
.di .di__sub-q .di__label{margin-bottom:6px}
.di .di__input.di__otro{display:inline-block;width:auto;flex:1 1 180px;min-width:160px}
.di .di__note{font-size:13px;margin-top:4px}
.di .di__note .di__fr{font-size:12.5px}

/* Leyenda de usos en 2 columnas (manual) */
.di .di__legend dl{margin:0;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:10px 16px}
.di .di__legend dt{font-weight:700;color:var(--di-accent);margin:0}
.di .di__legend dt .di__fr{font-weight:400}
.di .di__legend dd{margin:0}

/* Texto de autorización, error y mensaje obligatorio (manual) */
.di .di__q-text{margin:0 0 12px;font-size:14.5px}
.di .di__q-text span{display:block}
.di .di__q-text .di__fr{margin-top:4px;font-size:13px}
.di .di__q--err{border:2px solid var(--di-danger);padding:13px 15px}
.di .di__msg{display:none;font-size:13px;color:var(--di-danger);margin-top:10px}
.di .di__q--err .di__msg{display:block}

/* Botón secundario (Atrás) */
.di .di__btn--sec{background:transparent;color:var(--di-accent);border:1px solid var(--di-accent)}

@media (max-width:620px){
  .di .di__data{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .di .di__legend dl{grid-template-columns:1fr;gap:2px}
  .di .di__legend dd{margin-bottom:10px}
}
@media (max-width:420px){
  .di .di__data{grid-template-columns:1fr}
}

/* Reglamento interno: el francés con el mismo tamaño y estilo que el español */
.di .di__reg span{display:block;font-size:14.5px;font-style:normal;color:var(--di-text);margin:0}
.di .di__reg span + span{margin-top:6px}
.di .di__reg a{font-weight:700}
.di .di__reg-q .di__opt{font-size:14.5px}
.di .di__reg-q .di__opt .di__fr{font-size:14.5px;font-style:normal;opacity:1;margin-top:4px}

/* ---------- Visor de PDF (lo arma js/reinscripcion.js) con los colores del manual ---------- */
body #visorPdf{background:rgba(11,42,91,.55)}
body #visorPdf .visorCaja{border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
body #visorPdf .visorBarra{background:#ffffff;border-bottom:1px solid #d9deea;padding:10px 12px;font-family:Marianne,"Segoe UI",system-ui,sans-serif}
body #visorPdf .visorTitulo{color:#0b2a5b;font-size:14px}
body #visorPdf .visorDescargar{color:#0b2a5b;font-size:13px;font-weight:700}
body #visorPdf iframe{background:#f5f6f8}
body #visorPdf .botonCeleste{font:inherit;font-size:14px;font-weight:700;background:#0b2a5b;color:#ffffff;border:0;border-radius:10px;padding:9px 16px;cursor:pointer;line-height:1.2}
body #visorPdf .botonCeleste:hover{opacity:.9}
@media screen and (max-width:820px){
  body #visorPdf .visorCaja{border-radius:0}
  body #visorPdf .visorBarra .botonCeleste{min-height:44px;font-size:15px}
}

/* reinscription2: título de la ficha y, debajo, el nombre del alumno resaltado.
   Al desplazarse queda fijo arriba solo el nombre (al llegar al siguiente alumno, lo reemplaza). */
.di .di__alu-title{margin-bottom:10px}
.di .di__alu-name{
  position:-webkit-sticky; position:sticky; top:0; z-index:20;
  margin:0 0 14px; padding:10px 16px;
  background:var(--di-accent); color:var(--di-card);
  font-size:18px; font-weight:700; line-height:1.3; border-radius:0 0 var(--di-radius) var(--di-radius);
  border-top-left-radius:var(--di-radius); border-top-right-radius:var(--di-radius);
  box-shadow:0 4px 10px -4px rgba(11,42,91,.45);
}
@media (max-width:620px){
  .di .di__alu-name{font-size:16px}
}

/* ---------- reinscription3 (Intendencia) y páginas finales ---------- */
.di .di__data--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.di .di__row--cuit{grid-template-columns:96px minmax(0,1fr)}
.di .di__decl{margin-top:12px;font-size:14px}
.di .di__decl p + p{margin-top:10px}
.di .di__wait{display:none;margin-top:16px;padding:12px 14px;border-radius:var(--di-radius);background:var(--di-accent-bg);color:var(--di-accent);font-weight:700;font-size:14px}
.di .di__wait .di__fr{color:inherit;opacity:.85}
.di a.di__btn{display:inline-block;text-decoration:none}
.di .di__btn:disabled{opacity:.55;cursor:wait}
.di .di__done{text-align:center;padding-top:16px}
.di .di__done .di__q,.di .di__done .di__bar{text-align:left}
.di .di__done .di__bar{justify-content:center}
.di .di__ok-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--di-ok-bg);color:var(--di-ok);font-size:30px;font-weight:700;line-height:56px;text-align:center}
@media (max-width:620px){
  .di .di__data--2{grid-template-columns:1fr}
}

/* ---------- Barra superior FIJA: logo a la izquierda, nombre centrado ---------- */
.di-top{position:-webkit-sticky;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px -4px rgba(11,42,91,.25)}
.di-top__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding-top:0;padding-bottom:0}
.di-top__logos{justify-self:start}
.di-top__logos img{height:44px}
.di-top__title{text-align:center;text-transform:none;letter-spacing:0;font-size:16px;white-space:nowrap}
.di-top__title span{display:inline;white-space:nowrap}
.di-top__sep{color:#b7c0d3;font-weight:400;margin:0 2px}
.di-top__sub{color:#0b2a5b}
/* el nombre del alumno (reinscription2) queda fijo justo debajo de la barra */
.di .di__alu-name{top:64px}
@media (max-width:760px){
  .di-top__in{grid-template-columns:auto 1fr;height:56px;gap:12px}
  .di-top__logos img{height:36px}
  .di-top__title{text-align:right;font-size:13px;line-height:1.25;white-space:normal}
  .di-top__title .di-top__sep{display:none}
  .di-top__title .di-top__sub{display:block}
  .di .di__alu-name{top:56px}
}


/* ---------- Campos no modificables: candado a la derecha ---------- */
.di .di__input:disabled{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235b6578'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px 15px;
  padding-right:32px;
}
.di select.di__input:disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none}
@media (prefers-color-scheme:dark){
  .di .di__input:disabled{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a3adc0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E")}
}

/* En computadora el candado va más chico, fino y claro (en el celular queda como está) */
@media (min-width:761px){
  .di .di__input:disabled{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238f98aa'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E");background-size:12px 12px;background-position:right 11px center;padding-right:28px}
}
@media (min-width:761px) and (prefers-color-scheme:dark){
  .di .di__input:disabled{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237c869a'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E")}
}

/* reinscription5 y yareinscripto: el francés del mismo tamaño que el español (sigue gris y en cursiva) */
.di .di__done .di__q-text .di__fr,
.di .di__done .di__note .di__fr{font-size:inherit;margin-top:10px}

/* comunicarse.php: ícono informativo (azul en lugar de verde) */
.di .di__info-icon{background:var(--di-accent-bg);color:var(--di-accent);font-family:Georgia,"Times New Roman",serif;font-style:italic}
.di .di__cal-icon{font-style:normal}
.di .di__cal-icon svg{display:inline-block;margin-top:-3px}

/* ---------- Panel de resultados (reinsresultado / reinsresultadonoreins) ---------- */
.di.di--ancho{max-width:1280px}
.di .di__tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--di-line)}
.di .di__tab{padding:8px 14px;font-size:14px;font-weight:700;color:var(--di-muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.di .di__tab:hover{color:var(--di-accent)}
.di .di__tab--on{color:var(--di-accent);border-bottom-color:var(--di-accent)}
.di .di__tabs-user{margin-left:auto;font-size:13px;color:var(--di-muted);padding:8px 0}
.di .di__tabla-wrap{overflow-x:auto;background:var(--di-card);border:1px solid var(--di-line);border-radius:var(--di-radius)}
.di .di__tabla{width:100%;border-collapse:collapse;font-size:13px;line-height:1.35}
.di .di__tabla th{position:sticky;top:0;background:var(--di-accent);color:var(--di-card);text-align:left;font-weight:700;padding:9px 10px;white-space:nowrap}
.di .di__tabla td{padding:8px 10px;border-top:1px solid var(--di-line);vertical-align:top}
.di .di__tabla tbody tr:nth-child(even) td{background:var(--di-bg)}
.di .di__tabla tbody tr:hover td{background:var(--di-accent-bg)}
.di .di__tabla a{font-weight:700;white-space:nowrap}
.di .di__nowrap{white-space:nowrap}
.di .di__vacio{text-align:center;color:var(--di-muted);padding:18px}
.di .di__total{margin-top:10px;font-size:14px}

/* Panel de resultados: la tabla usa todo el ancho de la pantalla y entran todas las columnas */
.di.di--ancho{max-width:none}
.di .di__tabla{font-size:12.5px}
.di .di__tabla th{white-space:normal;padding:8px 8px;vertical-align:bottom}
.di .di__tabla td{padding:7px 8px}
.di .di__tabla .di__mail{word-break:break-all;min-width:120px}
.di .di__tabla td a{white-space:normal}

/* Buscador del panel de resultados */
.di .di__buscar{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 6px;max-width:560px}
.di .di__buscar svg{position:absolute;left:11px;color:var(--di-muted);pointer-events:none}
.di .di__buscar .di__input{padding-left:36px;font-size:15px}
.di .di__buscar-cant{white-space:nowrap;font-size:13px;color:var(--di-muted);min-width:70px}