/* Panel de familia de Tribusfera.
 *
 * Misma identidad visual que el dashboard del kiosk (ver frontend/mockup.html):
 * paleta de azulejo espanol, Space Grotesk para titulares e Inter para datos, tema
 * de dia y de noche, y la inicial en un circulo de color como retrato de cada
 * persona. Se comparte a proposito: quien administra la familia y quien mira
 * la pantalla de la cocina tienen que sentir que es el mismo producto.
 */

* { box-sizing: border-box; }

/* Sin esto, cualquier regla con `display` gana al [hidden] del navegador y
 * el elemento sigue viendose. Pasa con .acceso, que es flex: al entrar se
 * pintaban a la vez la tarjeta de acceso y el panel. */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  transition: background .5s ease, color .5s ease;
}

/* El unico efecto ambiental del producto: un degradado que respira. El resto
 * del movimiento responde a acciones, no decora. */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================== ACCESO ============================== */
.acceso {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tarjeta-acceso {
  width: 100%; max-width: 26rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 40px 34px 30px;
}
.marca {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.5px;
  margin: 0;
}
.lema { color: var(--ink-soft); margin: 4px 0 28px; font-size: 15px; }

.tarjeta-acceso label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.pie-acceso {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* =============================== PANEL ============================== */
.panel {
  position: relative; z-index: 1;
  max-width: 62rem;
  margin: 0 auto;
  padding: 34px 28px 60px;
}

.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.familia {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}
.familia-sub { color: var(--ink-soft); font-size: 14px; margin: 6px 0 0; }

.yo { display: flex; align-items: center; gap: 12px; }
.yo-texto { display: flex; flex-direction: column; line-height: 1.3; margin-right: 6px; }
.yo-nombre { font-weight: 600; font-size: 14px; }
.yo-rol { font-size: 12px; color: var(--ink-soft); }

/* La inicial en un circulo, como en el dashboard: mas legible de lejos y
 * mas discreto ante visitas que el nombre completo. */
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  /* Ver la nota del avatar del kiosk: de noche el azulejo es claro. */
  color: var(--sobre-azulejo);
  background: var(--azulejo);
  flex-shrink: 0;
}
.avatar.pequeno { width: 30px; height: 30px; font-size: 13px; }

/* ============================== BLOQUES ============================= */
/* ==================================================================
 * SECCIONES DEL PANEL (N3)
 * ==================================================================
 * Antes: seis tarjetas en una rejilla con areas con nombre. Funcionaba
 * mientras eran cortas; con Ajustes creciendo, el panel no cabia en ninguna
 * pantalla y Musica acababa colgada a media pagina. Ahora una seccion cada
 * vez: barra lateral en escritorio, pestañas deslizables en movil.
 */
.panel-cuerpo {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 32px;
  margin-top: 22px;
  align-items: start;
}
.secciones {
  position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.secciones a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
}
.secciones a:hover { background: var(--bg-panel); }
.secciones a:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 1px; }
.secciones a.activa { background: var(--azulejo); color: var(--sobre-azulejo); }
.nav-cuenta { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }

.secciones-contenido { min-width: 0; }
.seccion-titulo {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  margin: 0 0 16px; outline: none;
}
.seccion > .bloque + .bloque { margin-top: 20px; }

@media (max-width: 56rem) {
  .panel-cuerpo { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  /* Pestañas que se deslizan, pegadas arriba al hacer scroll. */
  .secciones {
    top: 0; z-index: 5;
    flex-direction: row; overflow-x: auto; gap: 6px;
    margin: 0 -16px; padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .secciones::-webkit-scrollbar { display: none; }
  .secciones a { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
  .seccion-titulo { font-size: 22px; }
}

/* La suscripcion en la cabecera. */
.estado-suscripcion {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid currentColor;
}
.estado-suscripcion.es-ok { color: var(--salvia-texto); }
.estado-suscripcion.es-aviso { color: var(--ocre-texto); }
.estado-suscripcion.es-alerta { color: var(--arcilla-texto); }

/* ------------------------------------------------------- resumen */
.resumen-pendiente { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.resumen-pendiente:empty { display: none; }
.pendiente {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-panel); border-left: 4px solid var(--ocre);
  font-size: 14.5px;
}
.pendiente.urgente { border-left-color: var(--arcilla-texto); }
.pendiente a { color: var(--azulejo-texto); font-weight: 600; white-space: nowrap; }
.resumen-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 14px; }
.tarjeta-resumen {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--bg-panel); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.tarjeta-resumen:hover { border-color: var(--azulejo); }
.tarjeta-resumen:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.tarjeta-resumen .cifra { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.tarjeta-resumen .cifra.texto { font-size: 19px; line-height: 1.25; }
.tarjeta-resumen .que { font-size: 13px; color: var(--ink-soft); }
.tarjeta-resumen .detalle { font-size: 13.5px; }

/* --------------------------------------------- ajustes y ayudas */
.grupo-ajustes { border: 0; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.grupo-ajustes:last-of-type { border-bottom: 0; }
.grupo-ajustes legend { font-family: var(--font-display); font-size: 17px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.pista-corta { font-size: 13px; color: var(--ink-soft); margin: 6px 0 12px; line-height: 1.45; }
.pista-corta code { font-family: ui-monospace, monospace; background: var(--bg); padding: 1px 5px; border-radius: 3px; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 30rem) { .dos-campos { grid-template-columns: 1fr; } }
details.ayuda { margin: 6px 0 14px; font-size: 13px; color: var(--ink-soft); }
details.ayuda summary { cursor: pointer; color: var(--azulejo-texto); font-weight: 500; width: fit-content; }
details.ayuda p { margin: 6px 0 0; line-height: 1.5; }
/* Guardar siempre a mano: el formulario es largo en un movil. */
.guardar-fijo {
  position: sticky; bottom: 0; z-index: 2;
  padding: 12px 0 4px; margin-top: 4px;
  background: linear-gradient(to bottom, transparent, var(--bg-panel) 30%);
}

/* ------------------------------------------------------- copia */
.aviso-datos {
  margin: 12px 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg); border-left: 4px solid var(--arcilla-texto);
  font-size: 14px; line-height: 1.5;
}
.copia-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.copia-acciones .btn { width: auto; margin-top: 0; }

@media (max-width: 30rem) {
  .panel { padding: 20px 16px 48px; }
  .familia { font-size: 30px; }
  /* Selector, nombre, Noche y Salir no caben en una fila de 390 px: se
   * parten, y el nombre (que ya dice el selector) se esconde. */
  .yo { flex-wrap: wrap; gap: 8px; }
  .yo-texto { display: none; }
}

.bloque {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px 22px;
}
.bloque-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bloque-cab h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0;
}
.contador { font-size: 13px; color: var(--ink-soft); }

/* =============================== LISTAS ============================= */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
/* El bloque de texto no baja de esto antes de que la fila se parta en dos
 * lineas: mas estrecho, el correo se corta en "lourdes@ejem...". */
.lista .crece { flex: 1 1 10rem; min-width: 0; }

/* Pastilla y boton van juntos y envuelven como una unidad. Sueltos, cada
 * uno se iba a su propia linea en cuanto la columna se estrechaba. */
.lista .acciones {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.lista li:last-child { border-bottom: none; }
.lista .principal { font-weight: 500; }
.lista .secundario {
  font-size: 12.5px; color: var(--ink-soft);
  /* Se parte en dos lineas antes que recortar: un correo cortado a
   * "Julio@giraldocrespo...." no le sirve a nadie. */
  overflow-wrap: anywhere;
}
.vacio { color: var(--ink-soft); font-size: 13.5px; padding: 10px 0; margin: 0; }

/* ============================= ETIQUETAS ============================ */
.pastilla {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
/* Son texto de color, asi que van con las variantes que contrastan: el ocre
 * dorado como texto da 1.93:1 sobre el panel. */
.pastilla.ok      { color: var(--salvia-texto);  border-color: var(--salvia); }
.pastilla.aviso   { color: var(--ocre-texto);    border-color: var(--ocre); }
.pastilla.alerta  { color: var(--arcilla-texto); border-color: var(--arcilla); }

/* ============================== CONTROLES =========================== */
input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 13px;
  width: 100%;
}
textarea {
  /* Una linea por texto que ocultar: se escribe corto y se relee, asi que
   * ni redimensionable en horizontal ni con la altura del navegador. */
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.5;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azulejo);
  outline-offset: 1px;
  border-color: transparent;
}

.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  padding: 11px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: default; }
/* Los "botones" que en realidad son enlaces (vincular lleva a OAuth, que es
 * una navegacion de verdad, no una llamada de API). */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

.btn-primario { background: var(--azulejo); color: var(--sobre-azulejo); width: 100%; margin-top: 14px; }
.btn-primario:not(:disabled):hover { filter: brightness(1.1); }
.btn-secundario {
  background: transparent; color: var(--azulejo);
  border-color: var(--azulejo);
  padding: 7px 14px; font-size: 13px;
}
.btn-secundario:not(:disabled):hover { background: var(--azulejo); color: var(--sobre-azulejo); }

.btn-fantasma {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line);
  padding: 7px 14px; font-size: 13px;
}
.btn-fantasma:hover { border-color: var(--azulejo); color: var(--azulejo); }

.btn-peligro {
  background: transparent; color: var(--arcilla-texto);
  border-color: transparent;
  padding: 6px 10px; font-size: 12.5px;
}
.btn-peligro:hover { border-color: var(--arcilla); }

.form-linea {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}
.form-linea .btn-primario { width: auto; margin-top: 0; }
@media (max-width: 30rem) {
  .form-linea { grid-template-columns: 1fr; }
}

/* Texto de apoyo bajo un campo: explica el porque sin robar atencion. */
.pista {
  font-size: 12.5px; color: var(--ink-soft);
  margin: 6px 0 16px; line-height: 1.45;
}
.pista code {
  font-family: ui-monospace, monospace;
  background: var(--bg); padding: 1px 5px; border-radius: 3px;
}
/* Aviso de menores (F6): una pista con mas presencia. */
.pista.aviso-menores {
  padding: 10px 12px; border-radius: 8px; color: var(--ink);
  border-left: 4px solid var(--ocre); background: var(--bg);
}
#form-ajustes label {
  display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px;
}

/* ============================== MENSAJES ============================ */
.mensaje {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 4px;
  border-left: 3px solid var(--azulejo);
  background: color-mix(in oklab, var(--azulejo) 8%, transparent);
}
.mensaje.error { border-left-color: var(--arcilla); background: color-mix(in oklab, var(--arcilla) 9%, transparent); }
.mensaje.ok    { border-left-color: var(--salvia);  background: color-mix(in oklab, var(--salvia) 10%, transparent); }

.aviso {
  margin-top: 18px;
  padding: 13px 18px;
  border-left: 3px solid var(--arcilla);
  background: var(--bg-panel);
  border-radius: 4px;
  font-size: 14.5px;
}

/* =============================== CODIGO ============================= */
.codigo-caja {
  text-align: center;
  padding: 18px;
  margin-bottom: 8px;
  border: 1px dashed var(--azulejo);
  border-radius: 6px;
  background: color-mix(in oklab, var(--azulejo) 6%, transparent);
}
.codigo-instruccion { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.codigo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: 4px;
  margin: 0;
  color: var(--azulejo);
  font-variant-numeric: tabular-nums;
}
.codigo-caduca { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* ================================ DATOS ============================= */
.datos {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  /* Fila holgada: la pastilla del estado tiene borde y padding, y con un
   * gap corto rozaba el texto de la fila siguiente. */
  gap: 14px 18px;
  align-items: center;
}
.datos dt { color: var(--ink-soft); font-size: 13.5px; }
.datos dd { margin: 0; font-weight: 500; font-size: 14px; }

/* ================================= PIE ============================== */
.pie {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.pie-ayuda a { color: var(--azulejo-texto); font-weight: 600; text-underline-offset: 2px; }

.cargando {
  position: fixed; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 14px;
}
.cargando[hidden] { display: none; }

/* ============================== DIALOGO ============================= */
/* Confirmar un borrado. Es la unica accion del panel sin vuelta atras, y
 * por eso no la despacha un confirm(): hay que poder LEER lo que se va a
 * perder antes de decidir. */
.dialogo {
  max-width: 26rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  padding: 26px 26px 20px;
}
.dialogo::backdrop {
  /* Negro y no un token: el backdrop esta FUERA del arbol del documento, asi
   * que no hereda las variables del :root. */
  background: rgba(12, 18, 21, 0.55);
}
.dialogo h2 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  margin: 0 0 10px;
}
.dialogo-aviso {
  margin: 0 0 16px;
  font-size: 14px; line-height: 1.5;
  color: var(--arcilla-texto);
}
.dialogo-lista {
  margin: 0 0 22px; padding: 14px 16px 14px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.dialogo-lista:empty { display: none; }
.dialogo-lista li + li { margin-top: 6px; }
.dialogo-botones { display: flex; gap: 10px; justify-content: flex-end; }

/* Un borrado irreversible se anuncia con relleno, no con un borde discreto
 * como `.btn-peligro` (que es el de revocar, y revocar se puede repetir). */
.btn-destructivo {
  background: var(--arcilla-texto);
  color: var(--sobre-arcilla);
  padding: 11px 18px;
}
.btn-destructivo:not(:disabled):hover { filter: brightness(1.1); }

/* El selector de rol vive dentro de una fila de la lista, asi que va mas
 * apretado que un campo de formulario y no estira la fila. */
select.rol {
  width: auto;
  padding: 6px 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-color: var(--line);
}
select.rol:hover { color: var(--ink); border-color: var(--azulejo); }

/* `.btn-primario` es de ancho completo con margen arriba, que en la fila de
 * botones del dialogo lo descoloca. */
.btn-en-dialogo { width: auto; margin-top: 0; }

/* Un campo que ocupa toda la anchura de `.form-linea`, que es de dos
 * columnas. */
.form-linea .ancho-total { grid-column: 1 / -1; }
#inv-fusion-pista { margin-top: 0; }

/* =============================== ICONOS ============================= */
.icono {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================ ROL Y MENU ============================ */
/* La pastilla se dimensiona con su texto, asi que no se trunca por largo
 * que sea el nombre del rol. Sustituye al desplegable, donde "Administra"
 * salia cortado. */
.rol-pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rol-pastilla.rol-admin { color: var(--azulejo-texto); border-color: var(--azulejo); }
.rol-pastilla.rol-menor { color: var(--ocre-texto);    border-color: var(--ocre); }

.con-menu { position: relative; display: inline-flex; }

.btn-menu {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-menu:hover { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn-menu[aria-expanded="true"] { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn-menu .icono { width: 17px; height: 17px; }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 13.5rem;
  padding: 5px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 7px;
  /* Sombra y no solo borde: el menu flota sobre otra tarjeta, y sin
   * profundidad se lee como parte de la fila de debajo. */
  box-shadow: 0 8px 24px rgba(12, 18, 21, 0.16);
}
.menu-titulo {
  margin: 4px 8px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0; border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-panel); outline: none; }
.menu-item.peligro { color: var(--arcilla-texto); }
.menu-item.marcado { cursor: default; }
.menu-item .crece { flex: 1 1 auto; }
.menu-item .visto { color: var(--salvia-texto); font-weight: 600; }
/* Separa lo reversible de lo que no lo es. */
.menu-item.separado {
  margin-top: 5px; padding-top: 11px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 5px 5px;
}

/* ====================== NOMBRE EDITABLE EN LINEA ==================== */
.principal.editable {
  cursor: text;
  border-radius: 4px;
  /* Un margen negativo para que el fondo del hover no descuadre la fila. */
  margin: -2px -6px;
  padding: 2px 6px;
}
.principal.editable:hover { background: var(--bg); }
.principal.editable:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 0; }
.nombre-inline {
  width: 100%;
  padding: 2px 6px;
  margin: -2px -6px;
  font-size: inherit;
  font-weight: inherit;
  border-radius: 4px;
}

/* ==================== NAVEGADOR DE CARPETAS DE FOTOS ================ */
.dialogo-ancho { max-width: 34rem; width: calc(100vw - 3rem); }
.dialogo-ancho label {
  display: block;
  font-size: 13px; color: var(--ink-soft);
  margin: 14px 0 6px;
}
.dialogo-ancho h2 { margin-bottom: 4px; }

/* Migas de pan: donde estoy y como volver. */
.ruta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 16px 0 8px;
  font-size: 13px;
}
.ruta button {
  background: transparent; border: 0;
  padding: 3px 6px; border-radius: 4px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--azulejo-texto);
  cursor: pointer;
}
.ruta button:hover { background: var(--bg-panel); }
.ruta button:disabled { color: var(--ink); cursor: default; font-weight: 600; }
.ruta .separador { color: var(--ink-soft); }

.lista-carpetas {
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
.lista-carpetas li { padding: 0; border-bottom: 1px solid var(--line); }
.lista-carpetas li:last-child { border-bottom: 0; }
.lista-carpetas button.carpeta {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  padding: 10px 13px;
  background: transparent; border: 0;
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.lista-carpetas button.carpeta:hover { background: var(--bg-panel); }
.lista-carpetas .cuantas { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
.lista-carpetas .vacio { padding: 14px; }

/* Lo que hay AQUI mismo: es el dato con el que se decide. */
.aqui-hay {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.aqui-hay b { color: var(--ink); }

.origen-actual {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg);
}
.origen-texto { flex: 1 1 auto; font-size: 14px; overflow-wrap: anywhere; }
/* Sin ninguna carpeta elegida el texto va vacio, y una caja vacia con un
 * borde parece un fallo. Se esconde sola. */
.origen-texto:empty { display: none; }

/* ------------------------------- las carpetas elegidas del album
 * Una lista, porque desde la migracion 013 pueden ser varias y de cuentas
 * distintas. */
.lista-origenes {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  margin-bottom: 8px;
}
.lista-origenes:empty { display: none; }
.origen-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
}
.origen-fila:last-child { border-bottom: 0; }
/* El nombre se lleva el hueco y se parte si hace falta: una ruta de
 * SharePoint con tres niveles no cabe en una linea. */
.origen-nombre { flex: 1 1 auto; font-size: 14px; overflow-wrap: anywhere; }

.casilla {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
/* Los enlaces a los documentos legales, con el color de la paleta y no con el
 * azul del navegador. Es el unico sitio del panel donde hay enlaces de texto
 * —todo lo demas son botones— asi que no habia regla para `a` y salian en el
 * azul de serie, que canta al lado de esta paleta. */
.datos a, .legal-pendiente a { color: var(--azulejo-texto); }

/* Terminos y privacidad pendientes de aceptar, dentro de la tarjeta de la
 * suscripcion. Se separa con una linea porque no es un dato mas de la lista
 * de arriba: es algo que hay que HACER. */
.legal-pendiente {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legal-texto { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
/* Aqui la casilla lleva dos lineas de texto con enlaces, asi que se alinea
 * arriba: centrada, el cuadrito queda a la altura del hueco entre lineas. */
.legal-pendiente .casilla { align-items: flex-start; margin-bottom: 12px; }
.legal-pendiente .casilla input { margin-top: 3px; }
.legal-pendiente .casilla span { line-height: 1.45; }

/* El cupon, al pie de la tarjeta y separado como lo pendiente de aceptar:
 * tampoco es un dato, es algo que se hace. */
.cupon { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 0; }
.cupon .btn-secundario { width: auto; margin-top: 0; }
.casilla input { width: auto; margin: 0; }
/* Dentro de una fila de la lista va mas discreta y no se parte. */
.casilla-en-fila { flex: 0 0 auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.casilla-en-fila:hover { color: var(--ink); }

/* ========================= IDEAS DE REGALO ========================== */
#form-idea { grid-template-columns: 1fr auto; margin: 4px 0 14px; }
#lista-ideas { max-height: 16rem; overflow-y: auto; }
#lista-ideas .principal.comprada {
  text-decoration: line-through;
  color: var(--ink-soft);
}
.idea-check {
  width: auto;
  margin: 0 2px 0 0;
  accent-color: var(--azulejo);
  cursor: pointer;
}

/* ============================ PAGO (F1c) ============================ */
.pago-texto { margin: 0 0 14px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 14px; margin-bottom: 14px; }
.plan {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg);
}
.plan h3 { margin: 0; font-family: var(--font-display); font-size: 16px; }
.plan-precio { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.plan-detalle { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.plan .btn { align-self: flex-start; }
.plan-proximamente { border-style: dashed; }
.plan-proximamente .plan-precio { font-size: 17px; color: var(--ink-soft); }

/* ========================= NOVEDADES (F1f) ========================= */
.novedades { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); }
.novedades-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.novedades-cab h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.lista-novedades { list-style: none; margin: 0; padding: 0; }
.lista-novedades li { padding: 10px 0; border-top: 1px solid var(--line); }
.lista-novedades li:first-child { border-top: 0; }
.novedad-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.novedad-fecha { font-size: 12.5px; color: var(--ink-soft); }
.lista-novedades p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* Invitar a otra familia (F6b): el enlace y su boton en una fila; en el
 * movil, uno debajo del otro. */
.invitar-enlace { display: flex; gap: 10px; align-items: stretch; margin: 12px 0 8px; }
.invitar-enlace input { flex: 1; min-width: 0; font-size: 14px; }
.invitar-enlace .btn-primario { width: auto; margin-top: 0; }
.invitar-cifras { margin: 6px 0; font-weight: 600; }
.invitar-nota { margin: 6px 0 10px; color: var(--ink-soft); font-size: 13.5px; }
@media (max-width: 520px) {
  .invitar-enlace { flex-direction: column; }
  .invitar-enlace .btn-primario { width: 100%; }
}

/* Actividades que os ofrece un organizador (F7). */
.ofertas { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ofertas h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; }
.ofertas-org { margin: 12px 0 6px; font-size: 14px; color: var(--ink-soft); }
.lista-ofertas { list-style: none; margin: 0; padding: 0; }
.oferta { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.oferta-detalle { color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.oferta-apuntada { font-size: 13px; font-weight: 600; color: var(--azulejo); white-space: nowrap; }
@media (max-width: 520px) {
  .oferta { flex-direction: column; align-items: flex-start; }
}

/* Ordenar las tarjetas del Resumen (F5). */
.orden-acciones { margin-top: 12px; }
.orden-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.orden-barra .btn-primario { width: auto; margin-top: 0; }
.orden-ayuda { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); min-height: 1em; }
.resumen-tarjetas.ordenando .tarjeta-resumen { cursor: default; position: relative; }
.resumen-tarjetas.ordenando .tarjeta-resumen:not(.fija) { border-style: dashed; border-color: var(--azulejo); }
.tarjeta-resumen.arrastrando { opacity: .55; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.orden-fija { font-size: 12.5px; color: var(--ink-soft); }
/* Mientras se ordena, columnas algo mas anchas: los tres botones (44 px,
 * para el dedo) tienen que caber dentro de la tarjeta. */
.resumen-tarjetas.ordenando { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.orden-controles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.orden-controles button {
  min-width: 44px; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--line-input); background: var(--bg-card); color: var(--ink);
  font: inherit; font-size: 18px; cursor: pointer;
}
.orden-controles button:disabled { opacity: .35; cursor: default; }
.orden-controles button:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
/* El asa no deja que el dedo desplace la pagina mientras arrastra. */
.orden-controles .orden-mover { cursor: grab; touch-action: none; }
.arrastrando .orden-mover { cursor: grabbing; }

/* Cuenta que hay que volver a vincular (F8): dentro de la fila de la
 * persona, en ocre de aviso, con el boton al lado. */
.revincular {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin-top: 8px; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ocre) 16%, transparent); border-left: 3px solid var(--ocre);
  color: var(--ink); font-size: 13.5px;
}
.revincular .btn { margin: 0; }

/* ------------------------------------------------ horario escolar (F9a) */
.dialogo-horario { max-width: 58rem; width: calc(100vw - 2rem); }
.dialogo-horario .subtitulo, #bloque-cole .subtitulo { margin: 20px 0 4px; font-family: var(--font-display); font-size: 15px; }
.horario-curso { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; }
.horario-curso label { margin: 0; }
.horario-curso input { width: 7rem; }

/* Colores de asignatura: el NOMBRE de un token, mezclado con el fondo para
 * que el texto se lea en los dos temas. */
.asig-neutro  { --asig: var(--line-input); }
.asig-arcilla { --asig: var(--arcilla); }
.asig-salvia  { --asig: var(--salvia); }
.asig-ocre    { --asig: var(--ocre); }
.asig-azulejo { --asig: var(--azulejo); }
.asig-libre   { --asig: transparent; }

.chips-asignaturas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.chip-asig {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-left: 6px solid var(--asig);
  border-radius: 999px; background: color-mix(in srgb, var(--asig) 14%, var(--bg-card));
}
.chip-asig button { border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; min-height: 36px; }
.chip-asig-nombre { padding: 4px 6px 4px 10px; font-size: 14px; }
.chip-asig-quitar { padding: 4px 10px 4px 6px; font-size: 18px; color: var(--ink-soft); }

.horario-rejilla-caja { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.horario-rejilla { border-collapse: collapse; width: 100%; min-width: 46rem; }
.horario-rejilla th, .horario-rejilla td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: middle; text-align: left; }
.horario-rejilla thead th { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.horario-rejilla .franja { width: 11rem; font-weight: 500; font-size: 13px; }
.franja-horas { display: flex; gap: 4px; align-items: center; }
.franja-horas input { width: 4.2rem; padding: 6px; }
.franja-opciones { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.franja-opciones .casilla { margin: 0; font-size: 13px; }
.horario-rejilla select, .horario-rejilla td input { width: 100%; min-width: 6rem; padding: 6px; font-size: 14px; }
.celda-asig { border-left: 6px solid var(--asig); background: color-mix(in srgb, var(--asig) 12%, var(--bg-card)); }
.fila-recreo { background: color-mix(in srgb, var(--ocre) 10%, transparent); }
.fila-llevar th { color: var(--ink-soft); }

.chips-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip-idea {
  border: 1px solid var(--line-input); border-radius: 999px; background: var(--bg-card);
  color: var(--ink); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 36px;
}
.chip-idea:hover { border-color: var(--azulejo); }

.fila-extra { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fila-extra > div { flex: 1; min-width: 0; }
.fila-extra .secundario { color: var(--ink-soft); font-size: 13px; }
/* En el movil la cuadricula se desplaza de lado dentro de su caja; la
 * columna de las franjas se queda fija y mas estrecha, con las horas una
 * encima de otra. */
@media (max-width: 640px) {
  .horario-rejilla { min-width: 38rem; }
  .horario-rejilla .franja { width: 6.2rem; position: sticky; left: 0; z-index: 1; background: var(--bg-card); }
  .fila-recreo .franja { background: color-mix(in srgb, var(--ocre) 10%, var(--bg-card)); }
  .franja-horas { flex-direction: column; align-items: stretch; gap: 2px; }
  .franja-horas span { display: none; }
  .franja-horas input { width: 100%; }
  .franja-opciones { flex-direction: column; align-items: flex-start; gap: 2px; }
  .horario-rejilla select, .horario-rejilla td input { min-width: 6.5rem; }
}