/* ============================================================
   Alauda Studio · Sistema visual «profundidad y capas»
   ------------------------------------------------------------
   Lenguaje común de toda la aplicación (intro, portada, editores).
   Idea: la interfaz no es plana. Hay un FONDO con luz propia y, por
   encima, PLANOS que flotan a distintas alturas: cristal esmerilado,
   borde superior iluminado (la luz viene de arriba) y sombra doble
   (una difusa de ambiente + una de contacto). La profundidad se
   consigue con luz y escala, no con sombras duras.

   Se carga DESPUÉS del CSS propio de cada página: aporta variables y
   utilidades, y afina lo justo. No sustituye a nada.

   La hoja A4 (.hoja / .documento) NO se toca nunca: es lo que se
   imprime y debe verse como el papel real.
   ============================================================ */

:root{
  /* --- Elevación: sombra de ambiente + sombra de contacto --- */
  --elev-1: 0 1px 2px rgba(10,14,20,.06), 0 4px 12px rgba(10,14,20,.06);
  --elev-2: 0 2px 6px rgba(10,14,20,.08), 0 14px 34px rgba(10,14,20,.10);
  --elev-3: 0 6px 14px rgba(10,14,20,.10), 0 30px 70px rgba(10,14,20,.16);

  /* --- Radios (generosos: superficies físicas, no cajas) --- */
  --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 30px;

  /* --- Cristal sobre fondo CLARO (editores) --- */
  --glass:        rgba(255,255,255,.72);
  --glass-fuerte: rgba(255,255,255,.88);
  --glass-borde:  rgba(255,255,255,.9);
  --glass-filo:   rgba(16,22,34,.08);
  --blur: 18px;

  /* --- Movimiento --- */
  --curva: cubic-bezier(.22,.8,.3,1);
  --rapido: .18s; --medio: .32s;

  /* --- Zona táctil mínima cómoda (iPad) --- */
  --toque: 44px;
}

/* Cristal sobre fondo OSCURO (intro y portada) */
.oscuro{
  --glass:        rgba(255,255,255,.07);
  --glass-fuerte: rgba(255,255,255,.11);
  --glass-borde:  rgba(255,255,255,.16);
  --glass-filo:   rgba(0,0,0,.5);
  --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.34);
  --elev-2: 0 3px 8px rgba(0,0,0,.36), 0 18px 44px rgba(0,0,0,.44);
  --elev-3: 0 8px 18px rgba(0,0,0,.4), 0 40px 90px rgba(0,0,0,.55);
}

/* ============================================================
   Plano flotante: la pieza básica del lenguaje
   ============================================================ */
.plano{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-borde);
  border-radius:var(--r-l);
  box-shadow:var(--elev-2);
  backdrop-filter:blur(var(--blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);
}
/* filo superior iluminado: la luz cae desde arriba */
.plano::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%);
  mix-blend-mode:screen;
}
.plano--alto{box-shadow:var(--elev-3)}
.plano--bajo{box-shadow:var(--elev-1);border-radius:var(--r-m)}

/* Reacción al puntero: sube un poco, la luz aumenta */
.elevable{transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva)}
@media (hover:hover){
  .elevable:hover{transform:translateY(-4px);box-shadow:var(--elev-3)}
}

/* ============================================================
   EL ESCUDO, LEGIBLE SIEMPRE
   ------------------------------------------------------------
   El escudo del colegio es azul marino con verde: sobre fondo
   oscuro desaparecía. La solución encaja con el propio lenguaje:
   se apoya en un PLANO CLARO que flota, como una placa de cristal
   iluminada. Deja de ser un logo pegado y pasa a ser un objeto.
   ============================================================ */
.placa-escudo{
  display:inline-grid;place-items:center;
  background:linear-gradient(160deg,#ffffff,#f2f3f0);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-m);
  box-shadow:var(--elev-2), 0 0 0 1px rgba(16,22,34,.05) inset;
  padding:12px;
}
.placa-escudo img{display:block;width:100%;height:auto}
.placa-escudo--redonda{border-radius:50%;padding:14px}

/* ============================================================
   Accesibilidad y tacto
   ============================================================ */
/* Foco visible y coherente en todo el producto (teclado) */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #7cc97d;
  outline-offset:2px;
  border-radius:6px;
}

/* En pantallas táctiles, los controles pequeños crecen hasta ser
   cómodos de pulsar sin cambiar su aspecto en escritorio. */
@media (pointer:coarse){
  .btn, .btn--mini, .bib-item__acts button, .nb-item__a button,
  .rep-del, .crit-chip, .topbar__actions button, .topbar__actions a{
    min-height:var(--toque);
  }
  .btn--mini{min-width:38px}
  input, select, textarea{font-size:16px}   /* evita el zoom automático de iOS */
}

@media (prefers-reduced-motion:reduce){
  .elevable, .plano{transition:none}
  .elevable:hover{transform:none}
}

/* ============================================================
   iPad y tablet: el punto que faltaba
   ------------------------------------------------------------
   Antes la programación mantenía dos columnas hasta 1000px y el
   cuadernillo hasta 1050px: en iPad apaisado (1024px) cada
   herramienta se comportaba de una manera. Se unifica el corte y
   se aprovecha la pantalla en vez de apilarlo todo.
   ============================================================ */

/* iPad apaisado (1024) y similares: dos columnas, pero con el
   formulario más estrecho y la vista previa mandando. */
@media (min-width:820px) and (max-width:1180px){
  .layout{grid-template-columns:minmax(340px,42%) 1fr !important;height:auto}
  .form-pane{height:auto;max-height:none}
  .preview-pane{border-left:1px solid var(--filete);border-top:0;height:auto;position:sticky;top:0}
}

/* iPad vertical (768) y móviles grandes: una columna, y la vista
   previa se queda anclada arriba para no perderla de vista. */
@media (max-width:819px){
  .layout{grid-template-columns:1fr !important;height:auto}
  .form-pane{height:auto}
  .preview-pane{border-left:0;border-top:1px solid var(--filete);height:auto}
  .topbar{flex-wrap:wrap;gap:10px}
  .topbar__actions{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar__actions::-webkit-scrollbar{display:none}
  .topbar__actions .btn{white-space:nowrap;flex:none}
}

/* El aviso «mejor desde un ordenador» sobraba en tablet: en iPad
   se trabaja perfectamente. Solo se mantiene en móvil de verdad. */
@media (min-width:600px){ .solo-movil-aviso{display:none !important} }

/* ============================================================
   Los editores, con el mismo lenguaje
   ------------------------------------------------------------
   Mismo principio que en la portada: superficies que flotan sobre
   un lienzo, con luz cenital. Aquí en clave clara.
   NO se toca la hoja A4 (.hoja / .documento): es el papel.
   ============================================================ */

/* Barra superior: cristal, pero contenido. Un desenfoque grande aquí se
   recalcula en CADA fotograma del scroll (la barra está fija sobre un
   formulario largo) y hacía que desplazarse fuera a tirones. 14px da el
   mismo efecto a simple vista por una fracción del coste. */
.topbar{
  background:rgba(252,253,255,.82);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 1px 0 rgba(16,22,34,.05), 0 6px 24px rgba(16,22,34,.05);
}

/* Tarjetas del formulario: planos con elevación y radios generosos */
.card{
  border-radius:var(--r-l);
  box-shadow:var(--elev-1);
  border-color:rgba(16,22,34,.07);
  transition:box-shadow var(--medio) var(--curva);
}
.card:focus-within{ box-shadow:var(--elev-2) }

/* El asistente es el copiloto: se le da un punto más de presencia */
.asis{ border-radius:var(--r-l); box-shadow:var(--elev-2) }

/* Lienzo de la vista previa: ligeramente hundido, para que la hoja
   parezca apoyada encima y no pegada al fondo */
.preview-pane{
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(16,22,34,.05), transparent 60%),
    var(--papel);
}

/* Paneles flotantes (biblioteca, nube, exportar, perfil, diálogos) */
.bib-panel,.nb-panel,.exp-panel,.pf-panel{
  border-radius:var(--r-l);
  box-shadow:var(--elev-3);
}

@media (prefers-color-scheme: dark){
  .topbar{ background:rgba(18,20,26,.84); box-shadow:0 1px 0 rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.3) }
  .card{ border-color:rgba(255,255,255,.06) }
  .preview-pane{ background:radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.04), transparent 60%), #0b0d11 }
}