/* =========================
   styles.css (header + login)
   ========================= */

/* ---- Variables globales ---- */
:root{
  --agora-blau:#39A9E2;
  --gris-fosc:#333333;
  --blanc:#FFFFFF;
  --gris-clar:#F4F4F4;
  --buttons:#16BAC5;
  --gris-mitja:#666666;
  --gris-suau:#ECECEC;
  --blau-mitja:#01151F;
  --blau-fosc:#1C9EE0;
  --button-hover:#14CFDB;
  --turquesa-clar:#14CFDB;
  --groc:#EAB308;

  --radius-campo:8px;
  --sombra-suave:0 4px 10px rgba(0,0,0,.06);
  --sombra-media:0 8px 20px rgba(0,0,0,.08);

  /* Altura de header para cálculos de layout */
  --header-height:80px;

  --ok-color:   #14CFDB33;
  --warn-color: #FF3D2F33;
/* ---- Reset simple ---- */
*{ box-sizing:border-box; }

/* ---- Helpers visibles en todo el sitio ---- */
.desktop-only{ display:block; }
.mobile-only{ display:none; }

/* ---- Tipografía base ---- */
body{
  padding-top:var(--header-height); /* sitio para el header fijo */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--gris-fosc);
  background:var(--blanc);
}


/* =========================================
   HEADER (logo, idioma, menú, developed-by)
   ========================================= */

header{
  position:fixed;
  top:0; left:0; width:100%;
  z-index:999;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--blanc);
  padding:1rem 2rem;
  border-bottom:0; /* limpiamos borde dudoso */
  box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.05);
}

.header-left{ display:flex; align-items:center; gap:.625rem; }
.logo-icon{ width:4.875rem; height:auto; margin-right:.5rem; }

.site-title{
  font-weight:700;
  font-size:1.2rem;
  margin-left:.5rem;
}

/* Enlace “home” sin subrayado */
.header-left .home-link{
  display:flex; align-items:center;
  text-decoration:none;
  color:inherit;
}
.header-left .home-link:hover{ opacity:.85; }

#account-summary{
  display:inline-flex;
  align-items:center;
  gap:1rem;
}
#nav-plan{ color:#000; }
#account-summary .nav-link.disabled{ color:#000; }


#account-summary .nav-link.disabled,
#account-summary .nav-link--withicon{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1;

}

/* tamaño y centrado del SVG, sin tocar otros .nav-link del sitio */
#account-summary .nav-link.disabled .icon,
#account-summary .nav-link--withicon .nav-icon{
  width:1.15em;
  height:1.15em;
  display:inline-flex;
  flex:0 0 auto;
  line-height:0;
}
#account-summary .nav-link.disabled .icon svg,
#account-summary .nav-link--withicon .nav-icon svg{
  width:100%;
  height:100%;
  display:block;
}

#account-summary .nav-link--withicon .nav-icon{
  width:2.3em;   /* prueba 1.35–1.6em según te guste */
  height:2.3em;
}

/* (opcional) ajusta la separación texto–icono si queda muy pegado */
#account-summary .nav-link--withicon{ gap:.5rem; }

#nav-plan{
  display:inline-flex;          /* texto + link en línea */
  align-items:baseline;
  gap:.5rem;                    /* separa lo justo; ajusta si quieres */
}
.nav-link--inline{
  display:inline;               /* no bloque */
  padding:0;                    /* sin padding lateral de .nav-link */
  margin:0;
  line-height:inherit;
}


.header-right{ display:flex; align-items:center; gap:2rem; }

/* Botones/iconos del header */
.icon-btn{ background:none; border:none; cursor:pointer; }

/* Menú principal (botón) */
.menu-btn{
  background:var(--buttons);
  color:var(--blanc);
  border:none;
  padding:.5rem 1rem;
  border-radius:1.25rem;
  cursor:pointer;
  display:flex; align-items:center; gap:.3125rem;
}
.menu-btn .menu-icon{ display:none; } /* icono solo en móvil */
.menu-btn .menu-text,
.menu-btn .arrow-down{ display:inline; }

/* Dropdown del menú (desktop) */
.menu-dropdown{
  display:none;
  position:absolute;
  top:100%; /* bajo el botón */
  right:5rem;
  background:var(--agora-blau);
  border-radius:.75rem;
  padding:.75rem 1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  z-index:1000;
  min-width:220px;
}
.menu-dropdown.open{ display:block; }
.menu-dropdown a{
   display:block; color:#fff; text-decoration:none;
   padding:.5rem 0;
   font-weight:700;
   text-align:right;
   transition:opacity .15s ease-in-out;
}
 .menu-dropdown a:hover{ opacity:.9; }
/* que el form no meta márgenes raros */
.menu-dropdown .logout-form{ margin:0; }

/* ajusta el botón rojo para que alinee con los <a> */
.menu-dropdown .menu-logout{
    display:block;
    width:100%;
    padding:.5rem 0;
    background:transparent;
    color:#fff;
    border:0;
    text-align:right;
    font-weight:700;
    cursor:pointer;
}
.menu-dropdown .menu-logout::before{
    content:"✕";
    margin-right:.5rem;
    font-weight:700;
}


/* Selector de idioma */
.lang-switcher{ position:relative; margin-right:.75rem; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; border:1px solid white; border-radius:4px;
  background:#fff; cursor:pointer;
}
.lang-btn .arrow{ font-size:.75rem; opacity:.7; }
.lang-menu{
  position:absolute; right:0; top:calc(100% + .4rem);
  background:#fff; border:1px solid #e5e7eb; border-radius:.5rem;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding:.4rem; min-width:160px; display:none; z-index:1050;
}
.lang-menu a{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .6rem; border-radius:.4rem;
  text-decoration:none; color:#111;
}
.lang-menu a:hover{ background:#f3f4f6; }

/* Oculto por defecto */
#lang-desktop .lang-menu { display: none; }
/* Visible cuando el contenedor tiene la clase open */
#lang-desktop.open .lang-menu { display: block; }

/* Sello “Desenvolupada per …” */
.developed-by{
  position:fixed; right:1.5rem; bottom:1.5rem;
  background:var(--blanc);
  border-radius:2rem;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:.5rem 1rem;
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; color:var(--gris-fosc);
  font-style:normal; font-weight:600; line-height:21px;
  z-index:1000;
}
.developed-by svg{ height:2rem; width:auto; }

/* =========================
   BOTONES reutilizables
   ========================= */
.btn-primary{
  display:block;
  margin:1.125rem auto .625rem;
  padding:.75rem 1.75rem;
  border-radius:1.25rem;
  background:var(--blanc);
  color:var(--gris-fosc);
  border:none;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:var(--sombra-media);
  cursor:pointer;
  text-transform:uppercase;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  width:80%;
  max-width:320px;
  text-align:center;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.1); }
.btn-primary:active{ transform:translateY(0); opacity:.9; }

a.btn-primary{ text-decoration:none; color:inherit; } /* <a> con look de botón */

/* Variante “lleno” (turquesa) usada en varias pantallas */
.btn-filled{ background:var(--buttons); color:var(--blanc); }
.btn-filled:hover{ background:var(--button-hover); }

.card{
  width:100%;
  max-width:520px;
  background:var(--blanc);
  border:1px solid var(--gris-suau);
  border-radius:14px;
  box-shadow:var(--sombra-suave);
  padding:1.1rem clamp(1.6rem, 4vw, 2.2rem);
}
.card-title{
  margin:0;
  font-size:1.3rem;
  font-weight:700;
  color:var(--gris-fosc);
}

/* Tarjeta de plan */
.card--plan{
  display:flex;
  flex-direction:column;
}
.plan-rows{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:2rem;
  row-gap:.5rem;
  margin-top:.4rem;
  margin-bottom:.75rem;
}
.row{ display:contents; }
.row-label{ font-size:.95rem; color:var(--gris-fosc); }
.row-value{ font-size:.95rem; color:var(--gris-fosc); justify-self:end; padding-right:.25rem; }

/* Botón centrado en la tarjeta de plan (usa tu .btn-primary existente) */
.card--plan .btn-primary{ align-self:center; margin-top:.4rem; }
/* Tamaño pequeño del botón si no lo tuvieras */
.btn-small{ min-width:190px; }


/* =========================
   LOGIN / AUTH layouts
   ========================= */

.auth{
  min-height:calc(100vh - var(--header-height));
  display:flex; justify-content:center; align-items:flex-start;
  padding-top:2.5rem; padding-left:1rem; padding-right:1rem;
  background-color:var(--buttons);
}
.auth-card{
  width:100%; max-width:640px;
  display:flex; flex-direction:column; align-items:center;
}

/* Marca Login */
.brand{
  display:flex; flex-direction:column; align-items:center;
  gap:.5rem; margin-bottom:2rem;
}
.brand-text{ font-weight:700; font-size:1.75rem; color:var(--blanc); }

/* Título */
.form-title{
  margin:.6rem 0 1.2rem;
  color:var(--gris-fosc);
  font-size:1.5rem; font-weight:600;
}

/* Formulario e inputs */
.form{ width:100%; max-width:560px; }

.input-group{
  position:relative; display:flex; align-items:center;
  background:var(--blanc);
  border-radius:var(--radius-campo);
  box-shadow:var(--sombra-suave);
  margin:.625rem 0;
  border:1px solid var(--gris-suau);
  overflow:hidden;
}
.input-group .icon{
  position:absolute; left:.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:.75; background:none;
}
.input-group input{
  width:100%; border:none; outline:none; background:transparent;
  font-size:.875rem; color:var(--gris-fosc);
  height:1.75rem; padding-left:2rem; /* sitio para icono */
}
.input-group input::placeholder{ color:var(--gris-mitja); }

.input-group select{
  width:100%;
  border:none;
  background:transparent;
  font-size:0.875rem;
  color:var(--gris-fosc);
  height:1.75rem;
  padding:0 0.875rem;
  appearance:none;
}

/* Enlaces inferiores */
.alt-link{
  text-align:center; color:var(--gris-mitja);
  font-size:.8125rem; margin-top:.25rem;
}
.alt-link a{ color:var(--blanc); text-decoration:none; }
.alt-link a:hover{ opacity:.9; }

.input-group--telefono .icon{ display:none; }      /* oculta icono interno */
.input-group--telefono .iti{ width:100%; }         /* ancho completo del widget */

/* Evita que el menú de países quede tapado por contenedores con overflow */
.input-group{ position:relative; overflow:visible; }
.input-group--telefono .iti__flag-container{ z-index:5; }
.iti__country-list{ z-index:9999; }

.page-recupera .brand{ margin-bottom:2rem; }
.page-recupera .form{ max-width:560px; }

body.page-plan,
body.page-perfil,
body.page-contacto{
	background: var(--gris-suau);
}

/* Anula el turquesa de .auth en esas páginas */
body.page-plan .auth,
body.page-perfil .auth,
body.page-contacto .auth{
	background: transparent;
}

:root{
  /* Anchos por defecto (puedes ajustarlos donde lo importes) */
  --col-date: 140px;
  --col-doc: minmax(0, 1fr);
  --col-sent: 80px;
  --col-ok:   32px;
  --col-warn: 32px;

  --history-gap: .5rem;
  --history-xpad: .5rem;

  /* Colores de estado (usa tu paleta global para el resto) */
  --ok-color:   var(--blau-fosc, #1C9EE0);
  --warn-color: #E05353;
}

/* --- Botón / cabecera del historial --- */




/* ======= HISTORIAL: ancho y paddings consistentes en todas las páginas ======= */

.card--history{
  /* columnas/espaciados */
  --col-date: 140px;
  --col-doc: minmax(0, 1fr);
  --col-sent: 80px;
  --col-ok:   32px;
  --col-warn: 32px;
  --history-gap:  .5rem;
  --history-xpad: .5rem;
  --hx-pad:       4rem;            /* sangrado lateral título/toggle */

  /* colores estado */
  --ok-color:   var(--blau-fosc, #1C9EE0);
  --warn-color: #E05353;


  max-width:520px;
  margin-inline:auto;
  margin-top:1rem;
  padding-top:1rem;
  border-radius:16px;
    border:1px solid var(--gris-mitja);
    margin-bottom: 1rem;
}

/* Cabecera del bloque */
.card--history .card-head{ padding:12px var(--hx-pad) 6px; }
.card--history .card-title{ margin:0; font-size:1.1rem; }

/* Botón toggle (Desplega…) */
.card--history .history-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  width:100%;
  padding:0;                 /* mismo sangrado que el título */
  background:transparent;
  border:0;
  outline:0;
  cursor:pointer;
  text-align:left;
}
.card--history .history-hint{ margin-left:5rem; line-height:1.4; color:var(--gris-fosc); font-size:1.3rem;}
@media (max-width: 768px){
    .card--history .history-hint{ margin-left:1rem; line-height:1.4; color:var(--gris-fosc); font-size:1rem;}
    .card--history .card-head{ padding:5px; }
}



/* Flecha y animación */
.card--history .history-toggle .chevron{
  flex:0 0 auto;
  transform:rotate(0deg);
  transition:transform .2s ease;
}
.card--history .history-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

section.card.card--history {
  background:#14CFDB33;; /* tu celeste corporativo */
  color: #fff;                   /* texto en blanco para contraste */
  border-radius: 12px;           /* opcional, para suavizar esquinas */
  padding: 1rem;                 /* mantén algo de aire dentro */
}

/* Panel (contenedor de cabecera de columnas + filas) */
.history-panel{ width:100%; max-width:520px; margin:.5rem auto 0;
  --col-date: 140px;
  --col-doc:  minmax(0, 1fr);   /* ocupa el sobrante, no empuja */
  --col-sent: 80px;
  --col-ok:   32px;
  --col-warn: 32px;
}
.history-panel[hidden]{ display:none !important; }


/* Rejilla de columnas (se reutiliza en cabecera y filas) */
.history-cols{
  display:grid;
  grid-template-columns:
    var(--col-date)
    var(--col-doc)
    var(--col-sent)
    var(--col-ok)
    var(--col-warn);
  align-items:center;
  column-gap:var(--history-gap);
  width:100%;
}
.w-date{ grid-column:1; }
.w-doc{ grid-column:2; min-width:0; max-width:100%; }
.w-doc > a,
.w-doc > span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.history-headbar .hcell.w-doc{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.w-sent{ grid-column:3; text-align:center; }
.w-ok  { grid-column:4; text-align:center; }
.w-warn{ grid-column:5; text-align:center; }

/* Cabecera de columnas */
.history-headbar{
  background:var(--blanc);
  border:1px solid var(--gris-mitja);
  border-radius:12px;
  box-shadow:var(--sombra-media);
  padding:.55rem var(--history-xpad);
  padding-top:.5rem;
  padding-bottom:.5rem;

}
.history-headbar .hcell{
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  text-align:center;
}

/* “Desplega…” barra (si se usa) y paddings equivalentes */
.card--history .history-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:0 var(--hx-pad) 12px;
  border-radius:16px;
}
.card--history .t-head,
.card--history .history-table-head{ padding:8px var(--hx-pad); }
.card--history .t-body,
.card--history .history-table-body{ padding:0 var(--hx-pad) 10px; }

/* Lista y filas */
.history-list{
  display:grid;
  grid-auto-rows:min-content;
  row-gap:8px;
  padding:8px;
  background:var(--blanc);
  border:1px solid var(--gris-mitja);
  border-radius:12px;
  box-shadow:var(--sombra-suave);
  overflow:visible !important;
  margin-top:1rem;
  margin-bottom:5rem;


}
.hrow{
  padding:.6rem var(--history-xpad);
  font-size:.9rem;
  color:var(--gris-fosc);
  border-radius:10px;
  min-height:2rem;
}
.hrow a{ color:var(--agora-blau); text-decoration:none; }
.hrow a:hover{ text-decoration:underline; }

/* Estados */
.row-ok  { background:#14CFDB33; }
.row-warn { background-color: #FF3D2F33; }
.row-empty{ text-align:center; color:var(--gris-mitja); padding:.6rem var(--history-xpad); }

/* Colores por estado */
.history-list .w-ok{ color:var(--ok-color) !important; font-weight:600; }
.history-list .w-warn{ color:var(--gris-fosc); font-weight:500; }
.history-list .row-warn .w-warn{ color:var(--warn-color) !important; font-weight:700; }
.history-list .row-ok   .w-doc a{ color:var(--ok-color);   font-weight:600; }
.history-list .row-warn .w-doc a{ color:var(--warn-color); font-weight:600; }

.card-title{ font-size:1.1rem; }

/* === HISTORIAL HOME (tabla grande, aislado) =================== */
#history-homepanel{
  /* columnas propias (no colisionan con la card pequeña) */
  --hh-gap:.5rem;
  --hh-xpad:.6rem;

  --hh-col-doc:   minmax(180px, 1.2fr);
  --hh-col-date:  minmax(18ch, 22ch);  
  --hh-col-int:   minmax(20ch, 26ch);
  --hh-col-pages: 7ch;
  --hh-col-ok:    36px;
  --hh-col-warn:  36px;
  --hh-col-estat: minmax(120px,.7fr);
  --hh-col-accio: minmax(200px, 1.1fr);

  max-width: 1800px;
  margin-inline:auto;
}

#history-homepanel[hidden]{ display:none !important; }

/* Rejilla de columnas (header + filas) */
#history-homepanel .home-cols{
  display:grid;
  grid-template-columns:
    var(--hh-col-doc)
    var(--hh-col-date)
    var(--hh-col-pages)
    var(--hh-col-int)
    var(--hh-col-ok)
    var(--hh-col-warn)
    var(--hh-col-estat)
    var(--hh-col-accio);
  align-items:center;
  column-gap:var(--hh-gap);
  width:100%;
}

/* Headbar */
#history-homepanel .history-headbar{
  background:var(--blanc);
  border:1px solid var(--gris-mitja);
  border-radius:12px;
  box-shadow:var(--sombra-media);
  padding:.6rem var(--hh-xpad);


}
#history-homepanel .hcell{
  font-weight:700;
  font-size:.92rem;
  white-space:nowrap;
  text-align:center;

}

/* Celdas – colocación */
#history-homepanel .hh-doc   { grid-column:1; min-width:0; }
#history-homepanel .hh-date  { grid-column:2; text-align:center; white-space:nowrap; }
#history-homepanel .hh-pages { grid-column:3; text-align:center; font-variant-numeric:tabular-nums; }
#history-homepanel .hh-int   { grid-column:4; text-align:center; white-space:nowrap;min-width:0; }
#history-homepanel .hh-ok    { grid-column:5; text-align:center; font-variant-numeric:tabular-nums; }
#history-homepanel .hh-warn  { grid-column:6; text-align:center; font-variant-numeric:tabular-nums; }
#history-homepanel .hh-estat { grid-column:7; text-align:center; }
#history-homepanel .hh-accio { grid-column:8; text-align:center;display:flex; gap:.35rem; flex-wrap:wrap; }
#history-homepanel .history-headbar .hh-accio { display:block; text-align:center; }

/* Elipsis donde puede crecer el texto */
#history-homepanel .hh-doc > a,
#history-homepanel .hh-doc > span,
#history-homepanel .hh-int > span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* Lista + filas */
#history-homepanel .history-list{
  display:grid;
  grid-auto-rows:min-content;
  row-gap:8px;
  padding:8px;
  background:var(--blanc);
  border:1px solid var(--gris-mitja);
  border-radius:12px;
  box-shadow:var(--sombra-suave);
  margin-top:.8rem;
}
#history-homepanel .hrow{
  padding:.65rem var(--hh-xpad);
  font-size:.9rem;
  color:var(--gris-fosc);
  border-radius:10px;
}
#history-homepanel .hrow a{ color:var(--agora-blau); text-decoration:none; }
#history-homepanel .hrow a:hover{ text-decoration:underline; }

/* Estados (scoped) */
#history-homepanel .row-ok   { background:#EAF6FF; }
#history-homepanel .row-warn { background:#ffecec; }
#history-homepanel .row-empty{ text-align:center; color:var(--gris-mitja); padding:.6rem var(--hh-xpad); }

/* Botones de acciones (píldoras sencillas) */
#history-homepanel .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .5rem; border-radius:999px;
  border:1px solid var(--agora-blau); color:var(--agora-blau);
  font-weight:600; font-size:.85rem;
}
#history-homepanel .btn--run{ border-color:#39A9E2; color:#39A9E2; }


/* ====== Panel grande (#history-homepanel) — estilos por estado ====== */


/* Estado: título del documento */
#history-homepanel .history-list .hrow.row-ok     .hh-doc .doc-title { color: var(--agora-blau); font-weight:600; }
#history-homepanel .history-list .hrow.row-warn   .hh-doc .doc-title { color: #e74c3c;            font-weight:600; } /* rojo */
#history-homepanel .history-list .hrow.row-partial .hh-doc .doc-title { color: #d48806;           font-weight:600; } /* amarillo-ocre */
#history-homepanel .history-list .hrow:not(.row-ok):not(.row-warn):not(.row-partial) .hh-doc .doc-title { color: var(--gris-fosc); }

/* Estado: texto de “Estat” */
#history-homepanel .history-list .hrow.row-ok     .hh-estat { color: var(--agora-blau); font-weight:600; }
#history-homepanel .history-list .hrow.row-warn   .hh-estat { color: #e74c3c;            font-weight:600; }
#history-homepanel .history-list .hrow.row-partial .hh-estat { color: #d48806;           font-weight:600; }

/* Págines en negrita cuando hay OK, WARN o PARTIAL */
#history-homepanel .history-list .hrow.row-ok     .hh-pages,
#history-homepanel .history-list .hrow.row-warn   .hh-pages,
#history-homepanel .history-list .hrow.row-partial .hh-pages { font-weight:700; }

/* ✔ SIEMPRE azul ✖ rojo; si 0 → gris */
#history-homepanel .history-list .hh-ok   { color: var(--agora-blau); font-variant-numeric: tabular-nums; }
#history-homepanel .history-list .hh-warn { color: #e74c3c;           font-variant-numeric: tabular-nums; }
#history-homepanel .history-list .hh-warn[data-n="0"] { color: var(--gris-mitja); }


/* Estat: icono más grande y centrado */
#history-homepanel .history-list .hh-estat{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1;
  flex-direction: column;
}

#history-homepanel .history-list .hh-estat .icon{
  width:1.25em;   /* ⇦ súbelo si lo quieres aún mayor: 1.3–1.4em */
  height:1.25em;
  display:inline-block;
  flex:0 0 auto;
  line-height:0;
}

#history-homepanel .history-list .hh-estat .icon svg{
  width:100%;
  height:100%;
  display:block;
  transform:none; /* quitamos el ajuste vertical anterior */
}

/* (opcional) si tu SVG es de trazo y queda muy fino, engrosa un poco el stroke */
#history-homepanel .history-list .hh-estat .icon svg *{
  stroke-width:1.75; /* prueba 1.5–2 según el diseño */
}

/* Botón único de descarga con menú */
.download-menu { position: relative; display: inline-flex; }
.download-toggle {
  background: transparent; border: 0; padding: 0; line-height: 0;
  display: inline-flex; align-items: center; cursor: pointer;
}
.download-toggle:focus-visible { outline: 2px solid #39A9E2; outline-offset: 2px; }

.download-pop {
  position: absolute; top: 100%; left: 0;
  margin-top: .35rem; min-width: 140px;
  background: #fff; border: 1px solid #dfe7ef; border-radius: .5rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  padding: .25rem; z-index: 30;
}
.download-item {
  display: block; padding: .45rem .65rem; border-radius: .35rem;
  text-decoration: none; color: #1074a6; font-weight: 600;
}
.download-item:hover, .download-item:focus {
  background: #f2f8fd; outline: none;
}

#history-homepanel .action--delete,
#history-homepanel .action--delete:disabled,
#history-homepanel .action button.action--delete {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  line-height: 0;   /* para que abrace justo al SVG */
}


/* === CTA de Plan: aislar estilo del resto de botones === */

.auth.mi-plan{
  min-height:calc(100vh - 80px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:clamp(2rem, 12vh, 6rem);
  padding-left:1rem;
  padding-right:1rem;
  background:var(--gris-clar)
}

.auth.mi-plan .auth-card{
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding-top:.1px; /* anti-colapso de márgenes */
}

.auth.mi-plan .form-title{
  margin:.4rem 0 1.2rem;
  font-size:1.25rem;
  font-weight:600;
}

/* ===== Tarjetas ===== */
.auth.mi-plan .card{
  width:100%;
  max-width:520px;
  background:var(--blanc);

  border-radius:1rem;
  box-shadow:var(--sombra-media);
  padding:1.1rem clamp(1.6rem, 4vw, 2.2rem);
}

.auth.mi-plan .card-title{
  margin:0;
  font-size:1.3rem;
  font-weight:700;
  color:var(--gris-fosc);
}

.auth.mi-plan .card--plan{
  display:flex;
  flex-direction:column;
  box-shadow:var(--sombra-media);
  border:1px solid var(--gris-mitja);
}

.auth.mi-plan .plan-rows{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:2rem;
  row-gap:.5rem;
  margin-top:.4rem;
  margin-bottom:.75rem;
}
.auth.mi-plan .row{ display:contents; }
.auth.mi-plan .row-label{ font-size:.95rem; color:var(--gris-fosc); }
.auth.mi-plan .row-value{ font-size:.95rem; color:var(--gris-fosc); justify-self:end; padding-right:.25rem; }

/* Botones del plan */
.auth.mi-plan .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem 1.1rem;
  border:none;
  border-radius:9999px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--sombra-media);
  background:var(--blanc);
  color:var(--gris-fosc);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, opacity .12s ease;
  text-transform:none;
}
.auth.mi-plan .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.1); }
.auth.mi-plan .btn-primary:active{ transform:translateY(0); opacity:.95; }
.auth.mi-plan .btn-filled{ background:var(--buttons); color:var(--blanc); }
.auth.mi-plan .btn-filled:hover{ background:var(--button-hover); }
.auth.mi-plan .btn-small{ min-width:190px; }

/* Centrado del botón dentro de la tarjeta de plan */
.auth.mi-plan .card--plan .btn-primary{
  align-self:center;
  margin-top:.4rem;
}

.auth.mi-plan a.btn-primary{
  text-decoration:none;
}

/* =========================
   CONTACTO (page-contacto)
   ========================= */

/* Lienzo */
.page-contacto .contact-page{
  /* ocupa pantalla útil teniendo en cuenta el header fijo */
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--gris-suau);
}

/* Tarjeta / contenedor del formulario */
.page-contacto .form-container{
  width: 100%;
  max-width: 720px;
  background: var(--blanc);
  border: 1px solid var(--gris-suau);
  border-radius: 16px;
  box-shadow: var(--sombra-suave);
  padding: 1.25rem clamp(1.25rem, 4vw, 2rem);
}

/* Título */
.page-contacto .form-container h1{
  text-align:center;
  margin-bottom: 1rem;
}

/* Campos */
.page-contacto .form-container input,
.page-contacto .form-container select,
.page-contacto .form-container textarea{
  width: 100%;
  font-size: 1rem;
  color: var(--gris-fosc);
  background: #fff;
  border: 1px solid var(--gris-suau);
  border-radius: .5rem;
  padding: .75rem .875rem;
  margin-bottom: 1rem;
  outline: 0;
}
.page-contacto .form-container textarea{
  min-height: 7rem;
  resize: vertical;
}

/* Filas y grupos (2 columnas en desktop) */
.page-contacto .form-row{ display:flex; gap:1rem; }
.page-contacto .form-group{ flex:1; }

/* Botón (reutiliza tus utilidades de botones) */
.page-contacto .form-container .btn-primary{
  width: auto;
  max-width: none;
  margin: .25rem auto 0;              /* centrado */
}
.page-contacto .form-container .btn-filled:hover{
  background: var(--button-hover);
}

/* =========================
   CARGA (page-carga) — ancho amplio
   ========================= */

/* Fondo gris y anular el turquesa de .auth aquí */
.auth.page-carga {
  background: var(--gris-suau);
  padding-top: clamp(2rem, 12vh, 6rem);
}

.auth.page-carga .auth-card{
  width: 100% !important;
  max-width: 1120px !important;     /* ancho objetivo del diseño */
  margin-inline: auto !important;
  padding-inline: clamp(12px, 4vw, 48px);
  gap: 1.25rem;
}

.auth.page-carga .card{
  width: 100% !important;
  max-width: none !important;
}

.auth.page-carga .card.card--drop{
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(560px, 60vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--blanc);
  border-radius: 16px;
  box-shadow: var(--sombra-media);
}

/* Bloque interior (icono + textos + botón): centrado y con ancho legible */
.auth.page-carga .card--drop .uploader{
  width: 100%;
  max-width: 560px;           /* solo limita el bloque interior, no la tarjeta */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  border-radius: 14px;
  outline: 1.5px dashed transparent;
  transition: outline-color .15s ease, box-shadow .15s ease;
}

#dropzone .uploader .btn-row{
  display: flex;
  flex-direction: column-reverse; /* invierte: filename arriba, botón abajo */
  align-items: center;             /* o flex-start si lo quieres alineado a la izq. */
  gap: .5rem;
  margin-top: .75rem;              /* separa del texto anterior */
}

#dropzone .uploader .filename{
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
  font-size: .95rem;
}

#dropzone .uploader .btn-row{ flex-direction: column-reverse !important; }

/* Tipografías dentro del uploader */
.auth.page-carga .upload-ico{ margin-bottom: .6rem; display: inline-flex; }
.auth.page-carga .upload-title{ font-size: 1.25rem; font-weight: 700; margin-bottom: .4rem; }
.auth.page-carga .upload-sub{ font-size: .95rem; color: var(--gris-mitja); line-height: 1.35; margin-bottom: .7rem; }
.auth.page-carga .upload-types{
  display: flex; align-items: center; gap: .5rem;
  color: var(--gris-mitja); font-size: .9rem; margin-bottom: 1rem;
}
.auth.page-carga .upload-types .type{ display: inline-flex; gap: .35rem; align-items: center; }
.auth.page-carga .upload-types .sep{ opacity: .5; }

/* Botón “Tria Fitxer” */
.auth.page-carga .btn-row{ display: flex; justify-content: center; }
.auth.page-carga .btn-ghost{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: 9999px;
  border: 1px solid var(--gris-suau); background: var(--blanc);
  box-shadow: var(--sombra-media);
  font-weight: 600; color: var(--gris-fosc);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.auth.page-carga .btn-ghost:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.1); }
.auth.page-carga .btn-ghost:active{ transform: translateY(0); }
.auth.page-carga .btn-ghost:focus{ outline: 2px solid var(--button-hover); outline-offset: 2px; }

/* Accesibilidad / utilidades (déjalas globales si ya las usas en más sitios) */
.sr-only{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#id_address{ display:none !important; }
.visually-hidden{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.auth-card--wide{
  width:100%;
  max-width:1120px;              /* ajusta aquí el ancho objetivo */
  margin-inline:auto;
  padding-inline:clamp(12px,4vw,48px);
}
.auth-card--wide .card{
  width:100%;
  max-width:none;
}
.auth-card--wide .card.card--drop{
  min-height:clamp(560px,60vh,760px);
  border-radius:16px;
}
/* Ensanchar el canvas en la página de carga */
.auth.page-carga .auth-card {          /* el contenedor flex */
  max-width: 1220px !important;
  margin-inline: auto !important;
  align-items: stretch !important;     /* <— clave: que los hijos se estiren */
}

/* El formulario (flex item) debe ocupar todo el ancho disponible */
.auth.page-carga .auth-card .upload-form {
  width: 100% !important;
  flex: 1 1 100% !important;           /* que crezca en el eje principal */
  display: block;                      /* por si alguna regla lo pone inline/flex */
}

/* La tarjeta interna ocupa 100% del formulario */
.auth.page-carga .auth-card .upload-form .card {
  width: 100% !important;
  max-width: none !important;
}

/* Dropzone grande (tu estilo, por si alguna otra regla lo limita) */
.auth.page-carga .card.card--drop {
  min-height: clamp(560px, 60vh, 760px);
  border-radius: 16px;
}
.vh-file{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.uploader.is-over,
.uploader.is-over * { cursor: copy; }
.uploader.is-over { outline: 2px dashed rgba(22,186,197,.6); outline-offset: 6px; }


/* =========================
   Perfil (page-perfil)
   ========================= */
.auth.page-perfil,
 .auth.correo-change,
 .auth.email-change{
    background:var(--gris-clar)
}
.auth.page-perfil .alt-link,
.auth.page-perfil .alt-link a,
.auth.page-perfil .alt-link a:visited{
  color: var(--gris-mitja) !important;  /* usa !important por si hay reglas previas fuertes */
}

.auth.page-perfil .alt-link a:hover,
.auth.page-perfil .alt-link a:focus{
  color: var(--gris-fosc);
  text-decoration: underline;
}
/* =========================
   Selector pagina (selector-pagina)
   ========================= */


.auth.selector-pagina {
  background: var(--gris-suau);
  padding-top: clamp(2rem, 12vh, 6rem);
}


.auth.selector-pagina .auth-card{
  width: 100% !important;
  max-width: 1120px !important;     /* ancho objetivo del diseño */
  margin-inline: auto !important;
  padding-inline: clamp(12px, 4vw, 48px);
  gap: 1.25rem;
}

.auth.selector-pagina .card{
  width: 100% !important;
  max-width: none !important;
}

.auth.selector-pagina .card.card--drop{
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(560px, 60vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--blanc);
  border-radius: 16px;
  box-shadow: var(--sombra-media);
}

/* Ensanchar el canvas en la página de carga */
.auth.selector-pagina .auth-card {          /* el contenedor flex */
  max-width: 1120px !important;
  margin-inline: auto !important;
  align-items: stretch !important;     /* <— clave: que los hijos se estiren */
}

/* El formulario (flex item) debe ocupar todo el ancho disponible */
.auth.selector-pagina .auth-card .upload-form {
  width: 100% !important;
  flex: 1 1 100% !important;           /* que crezca en el eje principal */
  display: block;                      /* por si alguna regla lo pone inline/flex */
}

/* La tarjeta interna ocupa 100% del formulario */
.auth.selector-pagina .auth-card .upload-form .card {
  width: 100% !important;
  max-width: none !important;
}

.auth.selector-pagina .doc-title{
  font-size: 1.3rem;
  margin: 0 0 .25rem;
}

.auth.selector-pagina .doc-subtitle{
  margin: 0 0 1.25rem;
  color: var(--gris-mitja);
}

.auth.selector-pagina .upload-options{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin:0 0 1rem;
}

.auth.selector-pagina .select-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 320px;          /* dos columnas cuando quepa */
  min-width:260px;
}

.auth.selector-pagina .select-label{
  font-size:.95rem;
  font-weight:600;
  color:var(--gris-fosc);
  white-space:nowrap;       /* que no parta en dos líneas el texto corto */
}

.auth.selector-pagina .upload-options select.form-control{
  width:100%;
  height:44px;
  padding:0 .75rem;
  border:1px solid var(--gris-suau);
  border-radius:10px;
  background:#fff;
  appearance:none;
}

/* =========================
   Barra de acciones y lista de páginas (UX mejorada)
   ========================= */

/* Barra superior: compacta, sticky y responsive */
.auth.selector-pagina .bulk-actions{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;    
  gap: .6rem 1rem;
  margin: 0 auto 1rem;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid var(--gris-suau);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  max-width: 900px;
}

.auth.selector-pagina .bulk-actions label{
  margin: 0; 
  font-weight: 600;
}

.auth.selector-pagina .bulk-actions .sep{
  color: var(--gris-mitja);
  opacity: .9;
  margin: 0 .35rem;
}

.auth.selector-pagina .bulk-actions .btn{
  min-height: 36px;
  padding: .46rem .78rem;
  line-height: 1;
  border-radius: 10px;
}

/* Grupo de rango en línea (colapsa bien en móvil) */
.auth.selector-pagina .range-inline{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.auth.selector-pagina .range-input{
  width: 112px;               /* armonizado con el botón */
  height: 36px;
  padding: 0 .6rem;
  border: 1px solid var(--gris-suau);
  border-radius: 10px;
  background: #fff;
}

/* Accesibilidad: foco visible */
.auth.selector-pagina .bulk-actions .btn:focus,
.auth.selector-pagina .range-input:focus{
  outline: 2px solid #16BAC5;
  outline-offset: 2px;
}

/* Lista de páginas en rejilla responsive (sin tocar el HTML) */
.auth.selector-pagina ul.list-unstyled{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px 20px;
  max-width: 900px;
  margin: .85rem auto 0;
}

.auth.selector-pagina ul.list-unstyled > li{
  margin: 0;                 /* neutraliza .mb-2 del framework */
}

.auth.selector-pagina .form-check-label{
  display: flex;
  align-items: center;
  gap: .5rem .6rem;
  padding: .35rem .25rem;
}

/* Afinado del checkbox e iconos de estado */
.auth.selector-pagina .form-check-input{ accent-color: #16BAC5; }
.auth.selector-pagina .text-success{ color:#1a8e3a; font-weight:600; }
.auth.selector-pagina .text-danger { color:#d93025; font-weight:600; }

/* Títulos y subtítulos ya definidos; solo pequeño ajuste en espacios */
.auth.selector-pagina .doc-title{ margin-bottom: .2rem; }

/* Centrar título y subtítulo con el mismo ancho óptimo */
.auth.selector-pagina .doc-title,
.auth.selector-pagina .doc-subtitle{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Pequeño respiro extra bajo el subtítulo para despegar la barra */
.auth.selector-pagina .doc-subtitle{ margin-bottom: .9rem; }


/* En pantallas pequeñas, la barra se hace “en bloques” y el rango ocupa ancho completo */
@media (max-width: 720px){
  .auth.selector-pagina .bulk-actions{
    gap: .5rem .6rem;
    padding: .55rem .65rem;
  }
  .auth.selector-pagina .range-inline{
    width: 100%;
    gap: .45rem;
  }
  .auth.selector-pagina .range-input{
    flex: 1 1 130px;
    width: auto;
    max-width: none;
  }
}

/* ——— Centrado y layout limpio en Transcripción ——— */
.auth.selector-pagina .card.card--drop{
  align-items: flex-start;                  /* arranca arriba */
}

/* Limitar ancho “óptimo” y centrar bloques clave */
.auth.selector-pagina .bulk-actions,
.auth.selector-pagina ul.list-unstyled,
.auth.selector-pagina .upload-options{
  max-width: 900px;                         /* tu columna de lectura */
  margin-inline: auto;                      /* centrado horizontal */
  width: 100%;
}

/* Barra de acciones centrada y ordenada */
.auth.selector-pagina .bulk-actions{
  justify-content: center;                  /* centrado del contenido */
  gap: .5rem 1rem;
}

/* Inputs de rango un pelín más compactos */
.auth.selector-pagina .range-input{
  width: 110px;
  height: 36px;
}

/* La grilla de páginas ya es responsive; añadimos aire arriba */
.auth.selector-pagina ul.list-unstyled{
  margin-top: .75rem;
}

/* En móvil: la barra ocupa ancho completo y los rangos fluyen bien */
@media (max-width: 720px){
  .auth.selector-pagina .bulk-actions{ justify-content: flex-start; }
  .auth.selector-pagina .range-inline{ width: 100%; gap: .45rem; }
  .auth.selector-pagina .range-input{ flex: 1 1 130px; width: auto; }
}


/* =========================
   editar paginas (edit-doc)
   ========================= */

.btn-cancelar {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.btn-cancelar:hover {
  background: #ffecec;
}
.auth.edit-doc{
  background:var(--gris-suau);
  padding-top:clamp(2rem,12vh,6rem);
  --row-h: clamp(340px, 80vh, 640px);
}
.auth.edit-doc .auth-card{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(12px,4vw,48px);
}
.auth.edit-doc .auth-card h1{
  font-size:clamp(1.25rem, 2.2vw + .6rem, 2.6rem);
  line-height:1.15;
  margin-bottom:.75rem;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

/* Carrusel horizontal (scroll lateral aquí) */
.auth.edit-doc .container-miniaturas{
  display:flex;
  gap:12px;                 /* gap compacto */
  overflow-x:auto;
  padding:0 8px 10px;       /* padding compacto */
}

/* Tarjeta de página */
.auth.edit-doc .container-miniaturas > div{
  width:auto !important;                        /* anula width inline=300px */
  flex:0 0 clamp(960px, 90vw, 1200px);          /* ancho slide */
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "title  title"
    "image  editor"
    "status status"
    "aux    actions";
  grid-auto-rows:auto 1fr auto auto;
  row-gap:10px;
  column-gap:16px;
  align-items:start;
  min-width:0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px;
}

/* Título “Página N” */
.auth.edit-doc .container-miniaturas > div > p:first-of-type{
  grid-area:title;
  margin:6px 0 10px;
  font-weight:600;
  text-align:center;
  justify-self:center;
}

/* Imagen (envuelta o directa) */
.auth.edit-doc .container-miniaturas > div > .img-resize{ grid-area:image; }
.auth.edit-doc .container-miniaturas > div > img.miniatura{
  grid-area:image;
  width:100%; height:78vh; object-fit:contain;
  border:1px solid #ccc; border-radius:8px; display:block;
}
.auth.edit-doc .img-resize{
  resize: both;
  overflow: auto;
  max-width: 100%;
  max-height: 80vh;   /* ANTES 90vh: baja la altura */
  min-width: 240px;
  min-height: 180px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* La imagen se adapta al contenedor, sin forzar altura fija */
.auth.edit-doc .img-resize > img.miniatura{
  width: 100%;
  height: auto;       /* ANTES height:100%; */
  object-fit: contain;
  border: 0;
}

.auth.edit-doc .img-resize {
    overflow: auto;
    cursor: grab; /* Mano abierta */
}
.auth.edit-doc .img-resize.is-dragging {
    cursor: grabbing; /* Mano cerrada */
    user-select: none;
}
.auth.edit-doc .img-resize img {
    /* Evita que el navegador intente arrastrar la imagen como un archivo */
    pointer-events: none;
    width: 100%;
    height: auto;
}

/* Editor (textarea a la derecha) */
.auth.edit-doc .container-miniaturas textarea{
  grid-area:editor;
  width:100%; max-width:100%; height:78vh;
  resize:vertical; font-size:1.05rem; line-height:1.4;
  padding:10px; border:1px solid #ccc; border-radius:8px; box-sizing:border-box;
}
/* Solo el form del editor “se aplanará” en la grid */
.auth.edit-doc .page-editor{ display:contents; }

/* Acciones (Guardar centrado) */
.auth.edit-doc .container-miniaturas form button[type="submit"],
.auth.edit-doc .container-miniaturas form .btn-primary{
  grid-area:actions;
  justify-self:center;
  margin-top:12px;
}

/* Estado (Editado) a la izquierda */
.auth.edit-doc .container-miniaturas > div > p[style*="green"]{
  grid-area:status; justify-self:start; margin:0;
}

/* Pie de página de cada tarjeta */
.auth.edit-doc .page-footer{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:.5fr auto 1fr auto 1.5fr; /* estado | aux | gap | acciones | flex */
  align-items:center;
  margin-top:6px;
}
.auth.edit-doc .page-footer .page-status{
  grid-column:1; justify-self:start; display:flex; align-items:center; margin:0;
}
.auth.edit-doc .page-footer .page-aux{
  grid-column:2; justify-self:start; align-self:center; margin:0;
}
.auth.edit-doc .page-footer .page-actions{
  grid-column:4; justify-self:start; display:flex; align-items:center;
}
.auth.edit-doc .page-footer .page-aux .btn,
.auth.edit-doc .page-footer .page-actions .btn{
  width:auto !important; max-width:none !important; margin:0 !important; vertical-align:middle;
}

/* Variante ancha del contenedor */
.auth.edit-doc .auth-card.auth-card--wide{
  max-width:min(1380px, 98vw) !important;
  margin:8px auto !important;
  padding-inline:clamp(8px, 2vw, 16px) !important;
  padding-top:clamp(8px, 1.2vw, 16px) !important;
  padding-bottom:clamp(8px, 1.2vw, 16px) !important;
}
.auth.edit-doc .jumpbar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Botón propio, sin .btn global */
.auth.edit-doc .jumpbar-go{
  /* reset básico para evitar herencias molestas */
  all: unset;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gris-suau);
  border-radius: 10px;
  background: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;
  transition: background .15s, box-shadow .15s, border-color .15s;
}

.auth.edit-doc .jumpbar-go:hover{
  background: #f7f7f7;
  border-color: #d9d9d9;
}

.auth.edit-doc .jumpbar-go:active{
  background: #f1f1f1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.auth.edit-doc .container-miniaturas{
  position: relative; /* ancla para posicionar el tooltip */
}

/* Asegura que el tooltip no herede el estilo de los slides */
.auth.edit-doc .container-miniaturas > .scroll-hint {
  position: absolute;         /* lo sacamos del flow */
  display: inline-flex !important;
  flex: 0 0 auto !important;  /* anula el flex de los slides */
  width: auto !important;     /* que se ajuste al contenido */
  min-width: 0 !important;
  max-width: 85vw;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 5;
}
.auth.edit-doc .container-miniaturas > .scroll-hint.is-visible {
  opacity: 1;
}

.auth.edit-doc .jumpbar{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

/* Compacta el botón SOLO en la jumpbar, manteniendo el estilo .btn/.btn-primary */
.auth.edit-doc .jumpbar .btn-compact{
  /* tamaño reducido */
  padding: 6px 12px !important;
  height: 36px !important;
  line-height: 1 !important;
  font-size: .90rem !important;
  border-radius: 10px !important;

  /* no lo dejes crecer ni estirarse */
  width: auto !important;
  min-width: 0 !important;

  /* al ir junto al select, evita márgenes heredados raros */
  margin: 0 !important;

}

[id^="p-"]{
  display: grid;
  grid-template-columns: minmax(260px,34%) 1fr;
  /* la fila central (imagen+editor) mide exactamente 78vh */
  grid-template-rows: auto minmax(0,78vh) auto;
  grid-template-areas:
    "title  title"
    "image  editor"
    "footer footer";
  gap: 14px;
  min-height: 70vh;
}

/* Mapeo de hijos directos */
[id^="p-"] > p{ grid-area: title; margin: 0; }
[id^="p-"] > .img-resize{ grid-area: image; min-width: 0; }
[id^="p-"] > .page-footer{ grid-area: footer; }

/* 🔒 El wrapper es el ÚNICO ítem en la celda derecha */
[id^="p-"] > .editor-panel{
  grid-area: editor;
  display:flex;
  flex-direction:column;
  min-width:0;
}


/* Presentación interna del editor */
[id^="p-"] > .editor-panel .rte-toolbar{
  display: flex;
  gap: .5rem;
  align-items: center;
  background: #fff;
  position: sticky; top: 0; z-index: 2;
  padding: .25rem 0;
}
[id^="p-"] > .editor-panel .rte-editor{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

/* Por si alguna regla previa intenta convertir toolbar/editor en grid items del contenedor de página */
[id^="p-"] > .editor-panel .rte-toolbar,
[id^="p-"] > .editor-panel .rte-editor{
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100%;
}

/* El panel derecho apila toolbar + editor */
[id^="p-"] > .editor-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* El editor NO debe crecer por flex; su altura la fijamos por JS */
[id^="p-"] > .editor-panel .rte-editor{
  flex:0 0 auto;          /* <- importante: no crecer */
  height:auto;
  max-height:710px;
  overflow:auto;
  font-size: 0.9rem;      /* ajusta aquí: 12–14 suele ir bien */
  line-height: 1.4;
}

/* 2) La fila central (imagen + editor) usa esa altura */
.auth.edit-doc .container-miniaturas > div[id^="p-"]{
  display: grid;
  grid-template-rows: auto minmax(0, var(--row-h)) auto auto;
  /* ...resto de tu grid-template-areas... */
}

/* 3) Imagen y editor se ajustan a la fila */
.auth.edit-doc .container-miniaturas > div[id^="p-"] > img.miniatura{
  height: var(--row-h);
  max-height: var(--row-h);
  width: auto;
}

.auth.edit-doc .editor-panel{
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* NO dejar que el panel crezca más que su fila */
  height: var(--row-h);
  max-height: var(--row-h);
}

.auth.edit-doc .editor-panel .rte-editor{
  /* Rellena el panel pero sin pasarse y con scroll interno */
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* Borde SIEMPRE visible del editor */
.auth.edit-doc .editor-panel .rte-editor{
  box-sizing: border-box;
  background: #fff !important;         /* para que el borde contraste */
  border: 1.5px solid #C9CED6 !important;
  border-radius: 8px;
  padding: 12px;
  min-height: 200px;                    /* por si está vacío */
  outline: none;
}

/* Al enfocar, resaltamos sin mover el layout */
.auth.edit-doc .editor-panel .rte-editor:focus{
  border-color: #16BAC5 !important;
  box-shadow: 0 0 0 3px rgba(22,186,197,.18);  /* “halo” accesible */
}

/* Si el RTE mete su propio “border: none”, lo anulamos */
.auth.edit-doc .editor-panel .rte-editor[style*="border"]{
  border: 1.5px solid #C9CED6 !important;
}
.auth.edit-doc .editor-panel .rte-editor{
  overflow: auto;          /* imprescindible para que aparezca el grip */
  resize: both;        /* o 'both' si quieres que cambie ancho y alto */
  min-height: 150px;       /* límite inferior para que no desaparezca */
  max-height: 90vh;        /* límite superior (ajusta a tu gusto) */
}

/* por si el contenedor la estira: deja que el editor use su propio alto */
.auth.edit-doc .editor-panel{
  align-items: stretch;
}


/* ===== Toolbar estilo “Google Docs” ===== */
.rte-toolbar{
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #F8FAFC;
  width: fit-content;
  user-select: none;
}

.rte-btn{
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}

.rte-btn:hover{
  background: #EEF2F7;                       /* hover suave */
}

.rte-btn.is-active{
  background: #E3EDF8;                        /* activo */
  box-shadow: inset 0 0 0 1px #C7D7EE;
}

.rte-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px #A7D8E9;              /* anillo accesible */
}

/* Iconos tipográficos como en Docs */
.rte-icn{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #374151;
  line-height: 1;
}

.rte-icn-bold{ font-weight: 700; }
.rte-icn-italic{ font-style: italic; font-weight: 600; }
.rte-icn-underline{ text-decoration: underline; font-weight: 600; }

/* Espaciado respecto al editor */
.rte-toolbar + .rte-editor{ margin-top: 8px; }
/* La toolbar NO se estira: mide solo su contenido */
.auth.edit-doc .editor-panel .rte-toolbar{
  display: inline-flex;     /* evita que se expanda */
  flex: 0 0 auto;           /* no crecer, no encoger */
  width: auto;              /* nada de 100% */
  max-width: 100%;
  margin: 0;                /* sin márgenes extra */
  align-self: flex-start;   /* pegada a la izquierda del panel */
  justify-content: flex-start; /* por si hereda space-between */
}

/* El editor ocupa el resto del espacio vertical y NO fuerza a la toolbar */
.auth.edit-doc .editor-panel{
  display: flex;
  flex-direction: column;
}
.auth.edit-doc .editor-panel .rte-editor{
  flex: 1 1 auto;
}
.auth.edit-doc .container-miniaturas > div[id^="p-"]{
  min-height: 0 !important;     /* o: auto */
}

/* Asegura un espaciado razonable entre la página y los botones */
.auth.edit-doc .container-miniaturas{
  row-gap: 12px;                 /* ajusta a tu gusto */
}

/* Evitar márgenes extra dentro del editor */
.auth.edit-doc .rte-toolbar{ margin-bottom: 6px; }
.auth.edit-doc .rte-editor{ margin-bottom: 0; }

#editor .viewer { margin: .5rem 0 1rem; }

#editor .viewer-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
#editor .viewer-controls .btn-compact {
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
}

/* Área fija del documento con scroll */
#editor .image-line-container {
  position: relative;
  display: block;
  max-width: 100%;
  border: 1px dashed var(--gris-suau);
  border-radius: 8px;
  background: #fff;
  padding: .25rem;
}

/* “Viewport” con scroll cuando hay zoom */
#editor .image-line-container .image-container {
  position: relative;
  overflow: auto;
  max-height: 70vh; /* altura visible */
}

/* Línea de lectura */
#editor .reading-line {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 40%;
  height: 2px;
  background: rgba(20, 207, 219, 0.95);
  box-shadow: 0 0 0 2px rgba(20, 207, 219, 0.25);
  cursor: ns-resize;
  border-radius: 2px;
  pointer-events: auto;
}

/* Imagen ampliada con ancho real, no transform */
#editor .img-resize {
  transition: width .12s ease;
  display: inline-block;
}

/* Filtros por clase (solo dentro de #editor) */
#editor .filter-grayscale img.miniatura { filter: grayscale(1) contrast(1.05); }
#editor .filter-contrast img.miniatura { filter: contrast(1.25) saturate(1.05); }
#editor .filter-whitebalance img.miniatura {
  filter: brightness(1.06) saturate(1.08) sepia(0.08) hue-rotate(-5deg) contrast(1.05);
}



#editor #controls.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #f3f3f3;
  padding: 1rem;
  border-radius: 8px;
  max-width: 200px; /* igual que antiguo */
}

#editor #controls.controls label {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

#editor #controls.controls input[type="range"] { width: 100%; }

#editor #controls.controls button {
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  width: 100%;
}

#editor #controls.controls button:hover,
#editor #controls.controls button.active {
  background-color: var(--main-color);
  color: white;
}
.image-line-container { position: relative; }
.image-container { position: relative; overflow: hidden; }
#transcription-image {
  display: block;
  max-width: 100%;
  transform-origin: 0 0; /* importante para el zoom */
  cursor: grab;
}
#transcription-image.is-panning { cursor: grabbing; }


.img-resize,
.image-container { position: relative; overflow: auto; }  /* <- auto, no hidden */

.reading-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;         /* o el que quieras */
  background: red;     /* visible */
  cursor: ns-resize;
  z-index: 5;
}
.image-container {
  overflow: auto;            /* ya lo tienes/propusimos */
  scrollbar-gutter: stable both-edges;  /* <- evita el “empujón” del primer zoom */
}

.floating-controls{
  position:absolute; top:12px; left:12px; z-index:10;
  user-select:none; pointer-events:auto;

  background: transparent;   /* <- sin fondo */
  border: none;              /* <- sin borde */
  box-shadow: none;          /* <- sin sombra */

  box-sizing: border-box;
  padding: 0;                /* <- sin hueco blanco alrededor */
  display:flex; flex-direction:column; align-items:center;
  gap:8px; text-align:center;
}

/* Bloque interno de controles: centrado y a ancho completo del panel */
.floating-controls .controls,
.floating-controls #controls{
  margin:0; padding:0;
  width:100%;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}

/* Botones: ocupan todo el ancho del panel gris (tu estilo de botón gris se mantiene) */
.floating-controls .controls button,
.floating-controls #controls button{
  width:100%;
  margin:0;
}

/* El wrapper de la imagen debe poder posicionar absolutos */
.img-resize, .image-container{ position:relative; }

/* contenedor que fija el panel al viewport del contenedor con scroll */
.floating-controls-sticky{
  position: sticky;          /* clave: pegado al viewport del scroll container */
  top: 0; left: 0;
  width: 0; height: 0;       /* no ocupa layout */
  z-index: 10;
  overflow: visible;         /* que se vea lo de dentro */
  pointer-events: none;      /* eventos solo dentro del panel */
}

/* el propio panel (tu estilo actual) */
.floating-controls{
  /* tu estilo existente del panel… */
  cursor: grab;
  pointer-events: auto;      /* vuelve a permitir interacción aquí */
  /* posición por variables (se mantienen aunque haya scroll) */
  transform: translate(var(--fx, 12px), var(--fy, 12px));
}

/* feedback de arrastre */
.floating-controls.dragging{ cursor: grabbing; }

/* no “mano” en elementos interactivos del panel */
.floating-controls button,
.floating-controls input,
.floating-controls select,
.floating-controls textarea,
.floating-controls label,
.floating-controls a { cursor: auto; }

/* Raíz sticky pegada al viewport del contenedor con scroll */
.overlay-fixed {
  position: sticky;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 10;
  overflow: visible;
  pointer-events: none; /* los eventos solo los recibe el panel */
}

/* Panel (sin fondo blanco extra) — usa el estilo que ya tengas */
.floating-controls {
  pointer-events: auto;
  transform: translate(var(--fx, 12px), var(--fy, 12px)); /* posición elegida */
  cursor: grab;
}
.floating-controls.dragging { cursor: grabbing; }

/* Evitar “mano” en elementos interactivos */
.floating-controls button,
.floating-controls input,
.floating-controls select,
.floating-controls textarea,
.floating-controls label,
.floating-controls a { cursor: auto; }

/* ——— Panel más compacto ——— */
#editor #controls.controls{
  gap: 6px;                 /* menos separación interna */
  padding: .6rem;           /* menos padding */
  border-radius: 10px;
  max-width: 160px;         /* panel más estrecho (antes 200px) */
}

.floating-controls{ gap: 6px; }  /* separaciones externas del dock */

#editor #controls.controls label{
  font-size: 1rem;          /* título más pequeño (antes 1.2rem) */
}

/* ——— Slider más corto y fino ——— */
#editor #controls.controls input[type="range"]{
  width: 130px;             /* acorta la barra del slider */
  height: 4px;              /* grosor base (para Firefox) */
}

/* WebKit (Chrome/Edge/Safari) */
#editor #controls.controls input[type="range"]::-webkit-slider-runnable-track{ height: 4px; }
#editor #controls.controls input[type="range"]::-webkit-slider-thumb{
  width: 14px; height: 14px;
  margin-top: -5px;         /* centra el thumb sobre la pista de 4px */
}

/* Firefox */
#editor #controls.controls input[type="range"]::-moz-range-track{ height: 4px; }
#editor #controls.controls input[type="range"]::-moz-range-thumb{ width: 14px; height: 14px; }

/* ——— Botones más compactos ——— */
#editor #controls.controls button{
  font-size: .75rem;        /* texto ligeramente más pequeño */
  padding: .40rem .60rem;   /* menos alto/ancho */
  border-radius: 6px;
}

/* =========================
   Planes
   ========================= */
#plans{
  --bg: #f1f2f3;            /* fondo página (gris muy claro) */
  --card-bg: #fff;          /* fondo tarjetas */
  --line: #bdbfc4;          /* borde fino de las tarjetas */
  --text: #111;             /* texto principal */
  --muted: #59606a;         /* texto secundario */
  --brand: #45c1c4;         /* verde-azulado del badge/botón */
  --radius: 44px;           /* esquinas redondeadas grandes */

  background: var(--bg);
  padding: 28px 20px 40px;
}

/* GRID */
#plans .grid{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 56px;
}

@media (max-width: 960px){
  #plans .grid{ grid-template-columns: 1fr; gap: 28px; }
}

/* CARD */
#plans .card{
  background: var(--card-bg);
  border: 1.6px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 36px 30px;
  display: flex;
  flex-direction: column;
  min-height: 560px;             /* altura similar a la captura */
  position: relative;
}

#plans .card__head{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  position: relative;
  margin-bottom: 14px;
  z-index: 1;
}

#plans .card__title{
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

/* BADGE */
#plans .badge{
  position: absolute;
  right: 18px;
  top: 0;
  transform: translateY(-8px);
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
}

/* PRECIO */
#plans .price{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 14px;
}

#plans .price__amount{
  font-size: clamp(44px, 6vw, 58px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

#plans .price__period{
  font-size: 22px;
  color: var(--text);
}

/* FEATURES */
#plans .features{
  list-style: none;
  padding: 0;
  margin: 10px auto 26px;
  width: min(520px, 100%);     /* columna centrada como en la imagen */
  color: var(--muted);
  display: grid;
  gap: 12px;
  font-size: 14.5px;
}

#plans .features li{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  column-gap: 12px;
}

#plans .features li.ok::before{
  content: "✓";
  font-weight: 600;
  color: var(--text);
}

#plans .features li.no{
  opacity: .7;
}
#plans .features li.no::before{
  content: "✗";
}

/* FOOTER + BOTONES */
#plans .card__foot{
  margin-top: auto;
  display: flex;
  justify-content: center;
}

#plans .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1.6px solid #3a3a3a;
  background: #fff;
  color: #2a2a2a;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  transition: transform .04s ease, box-shadow .2s ease, opacity .15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

#plans .btn:hover{ opacity: .9; }
#plans .btn:active{ transform: translateY(1px); }

#plans .btn--ghost{
  background: #f7f7f7;
  border-color: var(--line);
  color: #333;
  cursor: default;
}

/* LIGERO ENFASIS EN LA PRO */
#plans .card--pro{ box-shadow: 0 10px 30px rgba(0,0,0,.06); }

#plans .btn-primary{
  display:block;
  margin:1.125rem auto .625rem;
  padding:.75rem 1.75rem;
  border-radius:1.25rem;
  background:var(--blanc);
  color:var(--gris-fosc);
  border:none;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:var(--sombra-media);
  cursor:pointer;
  text-transform:uppercase;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  width:80%;
  max-width:320px;
  text-align:center;
}

#plans .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.1);
}
#plans .btn-primary:active{ transform:translateY(0); opacity:.9; }

#plans a.btn-primary{ text-decoration:none; color:inherit; }


#plans .btn-primary[disabled],
#plans .btn-primary.is-disabled,
#plans a.btn-primary[aria-disabled="true"]{
  background: color-mix(in oklab, var(--blanc) 70%, #000 5%); /* un poco más gris */
  color: color-mix(in oklab, var(--gris-fosc) 60%, #000 20%);
  box-shadow: none;
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  pointer-events: none; /* evita clics en <a> */
  border: none; /* por si hay overrides */
}

/* Evita animaciones en hover/focus cuando está desactivado */
#plans .btn-primary[disabled]:hover,
#plans .btn-primary.is-disabled:hover,
#plans a.btn-primary[aria-disabled="true"]:hover{
  transform:none;
  box-shadow:none;
  opacity:.65;
}

/* Accesible al teclado cuando NO está desactivado */
#plans .btn-primary:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--gris-fosc) 30%, var(--blanc) 30%);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--blanc) 70%, transparent);
}

/* === FIX estable (sin grid) === */
#plans .features li {
  position: relative !important;
  display: block !important;            /* anula display:grid */
  padding-left: 1.25rem !important;     /* hueco para el check */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4;
  color: var(--muted);
}

#plans .features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .15em;                            /* alineado con la 1ª línea */
  width: 1rem;
  text-align: center;
  color: var(--text);
  font-weight: 600;
}

#plans .features li.no::before { content: "✗"; }

/* por si algún global rompió inline */
#plans .features li br,
#plans .features li .u-bold { display: inline !important; }

#plans .u-bold {
  font-weight: 700;
  display: inline;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  color: inherit;
}

@media (max-width: 600px){
  /* badge más pequeño y un poco más arriba/derecha */
  #plans .badge{
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 14px;
    right: 12px;
    transform: translateY(-14px);
  }
}
/* =========================
   Registro signup
   ========================= */
/* ===== Signup: checkbox + textos (notify_on_transcription) ===== */
#signup .form-check-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
}

#signup .form-check-horizontal input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 20px;               /* tap target cómodo; ajusta si quieres 18–22px */
  height: 20px;
  margin: .2rem 0 0;         /* leve ajuste vertical para centrar con la línea */
  accent-color: var(--buttons);
}

#signup .checkbox-content {
  display: flex;
  flex-direction: column;
}

#signup .checkbox-content label {

  font-size: 1rem;
  color: var(--gris-fosc);
  cursor: pointer;
}

#signup .checkbox-content .form-text {
  font-size: 0.85rem;
  color: var(--gris-mitja);
  margin-top: 0.25rem;
}



/* ==== CHATBOT PAGE ==== */
body #agora-chatbot {
  /* DEBUG: quita esta línea cuando verifiques que carga */
  outline: 2px dashed #ef4444;

  background: var(--gris-clar);              /* gris de fondo grande */
  min-height: 75vh;
  padding: 40px 0 56px;
}

/* contenedor superior */
body #agora-chatbot .ac-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* título */
body #agora-chatbot .ac-title {
  margin: 0 0 18px;
  text-align: center;
  font-weight: 600;
  color: var(--gris-fosc);
  letter-spacing: .2px;
  font-size: clamp(24px, 2.8vw, 34px);
}

/* cápsula central */
#agora-chatbot .ac-shell {
  width: min(980px, 92%);
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: clamp(20px, 2vw, 28px);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* área blanca del chat */
body #agora-chatbot .ac-screen {
  width: 92%;
  min-height: clamp(260px, 42vh, 460px);
  background: #fff;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  padding: clamp(12px, 1.8vw, 20px);
  overflow-y: auto;
}

/* compositor */
body #agora-chatbot .ac-composer {
  margin-top: 20px;
  width: 92%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

body #agora-chatbot .ac-input {
  background: #fff;
  border: 1px solid #d6d9de;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
}

body #agora-chatbot .ac-input:focus {
  border-color: #8ab4ff;
  box-shadow: 0 0 0 3px rgba(138, 180, 255, 0.25);
}

#agora-chatbot .btn-chat{
  /* base inspirada en .btn-primary, pero sin el width:80% ni centrar automático */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  min-height: 42px;
  padding: .55rem 1.1rem;
  border-radius: 9999px;

  background: var(--blanc);
  color: var(--gris-fosc);
  border: 1px solid var(--gris-suau);

  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  text-transform: none;

  box-shadow: var(--sombra-media);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    color .12s ease,
    opacity .12s ease,
    border-color .12s ease;
}

#agora-chatbot .btn-chat:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

#agora-chatbot .btn-chat:active{
  transform: translateY(0);
  opacity: .95;
}

#agora-chatbot .btn-chat:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Variante “rellena” (turquesa), como tus CTAs */
#agora-chatbot .btn-chat--filled{
  background: var(--buttons);
  color: var(--blanc);
  border-color: transparent;
}
#agora-chatbot .btn-chat--filled:hover{
  background: var(--button-hover);
}

/* Variante “ghost” por si la necesitas */
#agora-chatbot .btn-chat--ghost{
  background: var(--blanc);
  color: var(--gris-fosc);
  border-color: var(--gris-suau);
}
/* disposición del compositor: textarea + botón */
#agora-chatbot .ac-composer{
  margin-top: 20px;
  width: 92%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end; /* alinea el botón con la base del textarea */
}

/* textarea auto-grow */
#agora-chatbot .ac-textarea{
  width: 100%;
  background: #fff;
  border: 1px solid #d6d9de;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.4;
  outline: none;

  resize: none;          /* el usuario no arrastra la esquina */
  overflow: hidden;      /* ocultar scroll vertical mientras crece */
  min-height: 44px;      /* altura mínima agradable */
  max-height: 220px;     /* límite como ChatGPT; luego aparece scroll */
}

#agora-chatbot .ac-textarea:focus{
  border-color: #8ab4ff;
  box-shadow: 0 0 0 3px rgba(138,180,255,.25);
}

@media (max-width: 640px){
  #agora-chatbot .ac-composer{
    grid-template-columns: 1fr; /* botón debajo en móvil */
  }
  #agora-chatbot .btn-chat{ width: 100%; }
}


/* responsive */
@media (max-width: 640px) {
  body #agora-chatbot .ac-shell { border-radius: 20px; }
  body #agora-chatbot .ac-composer { grid-template-columns: 1fr; }
  body #agora-chatbot .ac-send { width: 100%; }
}

#agora-chatbot .chatbot-title,
#agora-chatbot .ac-title {
  text-align: center;
  color: #333;
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem); /* 🔹 más pequeño y responsivo */
  margin-bottom: 1.2rem;
  max-width: 90%;
  line-height: 1.3;
  word-break: break-word; /* permite dividir palabras largas */
  white-space: normal;    /* permite varias líneas */
  overflow: hidden;
  text-overflow: ellipsis; /* puntos suspensivos si es una sola línea */
}

#agora-chatbot{
  --card-bg: #ffffff;
  --card-radius: 18px;
  --card-border: #e5e7eb;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
  --inset-shadow: inset 0 1px 0 rgba(0,0,0,0.03);
}

/* Caja principal (ya la tienes similar, lo dejo por coherencia) */
#agora-chatbot .ac-shell{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* Panel de mensajes */
#agora-chatbot .ac-screen{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: clamp(12px, 1.8vw, 20px);
  min-height: clamp(260px, 42vh, 460px);
  overflow-y: auto;
}

/* Composer como bloque (opcional; si prefieres sombras en cada control, deja este bloque) */
#agora-chatbot .ac-composer{
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

/* Textarea con la misma estética */
#agora-chatbot .ac-textarea{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--inset-shadow), var(--card-shadow);
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  min-height: 44px;
  max-height: 220px;
  outline: none;
}
#agora-chatbot .ac-textarea:focus{
  border-color: #8ab4ff;
  box-shadow: var(--inset-shadow), 0 0 0 3px rgba(138,180,255,.25), var(--card-shadow);
}

/* Botón como tus botones blancos con sombra (pill) */
#agora-chatbot .btn-chat{
  background: var(--card-bg);
  color: #1f2937;
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  box-shadow: var(--card-shadow);
  padding: .75rem 1.75rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  line-height: 1;
}
#agora-chatbot .btn-chat:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
#agora-chatbot .btn-chat:active{ transform: translateY(0); opacity:.95; }

/* Responsive */
@media (max-width: 640px){
  #agora-chatbot .ac-composer{ grid-template-columns: 1fr; }
  #agora-chatbot .btn-chat{ width:100%; }
}
/* gris base para paneles internos (ajústalo si tu fondo es otro tono) */
#agora-chatbot{
  --bg-gray: #f3f4f6; /* gris claro tipo background */
}

/* panel de mensajes en gris */
#agora-chatbot .ac-screen{
  background: var(--bg-gray);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* compositor en gris */
#agora-chatbot .ac-composer{
  background: var(--bg-gray);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

/* textarea en blanco para contraste dentro del compositor gris */
#agora-chatbot .ac-textarea{
  background: #ffffff;
  border: 1px solid #d6d9de;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);
}

/* Burbujas simples */
#agora-chatbot .ac-messages { display: flex; flex-direction: column; gap: 10px; }
#agora-chatbot .msg { display: flex; }
#agora-chatbot .msg.user { justify-content: flex-end; }
#agora-chatbot .bubble {
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
  border: 1px solid #e5e7eb;
  background: #fff;
}
#agora-chatbot .msg.user .bubble { background: #e8f0ff; border-color:#d5e3ff; }
#agora-chatbot .msg.assistant .bubble { background:#ffffff; }
#agora-chatbot .meta {
  margin-top: 4px; font-size: 12px; color:#6b7280;
}



/* El recuadro de mensajes ocupa el espacio flexible y SOLO él hace scroll */
#agora-chatbot .ac-screen{
  flex: 1;                   /* se estira para llenar */
  overflow-y: auto;          /* scroll interno */
  min-height: 0;             /* importante para que flex permita el scroll */
}

/* El compositor no crece, se queda al fondo */
#agora-chatbot .ac-composer{
  flex-shrink: 0;            /* nunca se comprime */
}

/* Textarea: crece un poco, luego scroll interno */
#agora-chatbot .ac-textarea{
  max-height: 120px;         /* límite de crecimiento */
  overflow-y: auto;          /* scroll dentro del textarea al superar el límite */
}

/* =========================
   Footer de la página
   ========================= */

.site-footer {
  border-top: 1px solid #e5e7eb;
  background: var(--gris-clar);
  padding: 1.5rem 1rem;
  font-size: 0.9rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center; /* centra contenido en móviles */
}

.footer-logos {
  display: flex;
  justify-content: center;   /* centra horizontalmente */
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.logo {
  height: 56px; /* tamaño coherente */
  width: auto;
  padding: .25rem .5rem;
}

.funding-note {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--gris-fosc);
}

/* Enlaces legales */
.footer-links {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--gris-fosc);
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: var(--buttons);
}

.footer-links .sep {
  margin: 0 .4rem;
  color: #999;
}

.footer-copy {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #666;
}


/* Responsive: ajusta espaciado en pantallas pequeñas */
@media (max-width: 640px) {
  .footer-logos {
    gap: .75rem;
  }
  .logo {
    height: 44px;
  }
  .funding-note {
    font-size: 0.85rem;
  }
  .footer-links {
    font-size: 0.8rem;
  }
}


/* (Opcional) responsive de los logos ya animados */
@media (max-width: 640px) {
  .site-footer .footer-logos .logo-track .logo {
    height: 44px;
  }
}
.logo-with-caption{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.logo-caption{
  font-size: .8rem;
  line-height: 1.1;
  color: var(--gris-fosc);
  font-weight: 600;
  text-align: center;
}

/* (Opcional) si quieres ajustarlo aún más para móviles */
@media (max-width: 640px){
  .logo-caption{ font-size: .75rem; }
}

/* =========================
   Selector de país y teléfono (intl-tel-input)
   ========================= */

#country-select,
#country-select-profile {
  height: 44px;
  line-height: 44px;
  padding: 0 .75rem;
}

/* Modo lista (cuando JS pone size>1) */
#country-select[size]:not([size="1"]),
#country-select-profile[size]:not([size="1"]) {
  height: auto;
  line-height: 1.3;
  max-height: calc(2rem * 8);
  overflow: auto;
  z-index: 9999;
}

/* Opciones dentro de la lista */
#country-select[size]:not([size="1"]) option,
#country-select-profile[size]:not([size="1"]) option {
  padding: .35rem .5rem;
  cursor: pointer;
}

#country-select[size]:not([size="1"]) option:hover,
#country-select-profile[size]:not([size="1"]) option:hover {
  background: #eef2ff;
}

#country-select[size]:not([size="1"]) option:checked,
#country-select-profile[size]:not([size="1"]) option:checked {
  background: #e0e7ff;
  font-weight: 500;
}

/* Teléfono: solo prefijo fijo, sin bandera ni flecha */
.iti__arrow { display: none !important; }
.iti__flag { display: none !important; }

/* Ajustes visuales del bloque del prefijo */
.iti__selected-flag { cursor: default; }
.iti--separate-dial-code .iti__selected-dial-code {
  font-weight: 600;           /* si quieres marcarlo un poco */
}

/* Asegura altura consistente del input con tu formulario */
.iti input#id_phone_number {
  height: 44px;               /* mismo alto que el select de país */
  line-height: 44px;
}

/* -------- Responsive -------- */
@media (max-width:768px){
    :root{
    --history-gap:.4rem; --history-xpad:.4rem;
    --col-date:120px; --col-doc:minmax(110px,1fr);
    --col-sent:64px;  --col-ok:26px; --col-warn:26px;
  }
  .history-headbar .hcell{ font-size:.85rem; }
  .history-list .hrow    { font-size:.88rem; }
  .desktop-only{ display: none !important; }      /* regla genérica */
  #nav-plan{ display: none !important; }
   #account-summary{ display: none !important; }
     #lang-desktop{
    display: inline-flex !important;   /* o block si te encaja mejor */
  }
  #lang-desktop .lang-btn{
    margin-left: 0.75rem;
  }
}
@media (max-width:600px){
  :root{
    --history-gap:.35rem; --history-xpad:.35rem;
    --col-date:112px; --col-doc:minmax(96px,1fr);
    --col-sent:58px;  --col-ok:24px; --col-warn:24px;
  }
  .card{ padding:.9rem 1rem; }
  .card-title{ font-size:1.1rem; }
  .history-headbar .hcell{ font-size:.82rem; }
  .history-list .hrow    { font-size:.86rem; }
}
@media (max-width:420px){
  :root{
    --history-gap:.3rem; --history-xpad:.3rem;
    --col-date:102px; --col-doc:minmax(88px,1fr);
    --col-sent:54px;  --col-ok:22px; --col-warn:22px;
  }
  .history-headbar .hcell{ font-size:.8rem; }
  .history-list .hrow    { font-size:.84rem; }
}
/* Fallback ultra-estrecho: scroll horizontal solo del bloque */
@media (max-width:360px){
  .history-panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .history-headbar, .history-list{ min-width:420px; }
}


/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:768px){
  .desktop-only{ display:none; }
  .mobile-only{ display:block; }

  /* Header móvil */
  header{ z-index:2000; } /* sobre overlays */
  .menu-btn{
    background:#fff; color:#000;
    padding:.5rem .8rem; border-radius:.5rem;
  }
  .menu-btn .menu-icon{ display:inline-block; stroke:#000; }
  .menu-btn .menu-text,
  .menu-btn .arrow-down{ display:none; }

  .menu-btn.open .menu-icon,
  .menu-btn.open .arrow-down{ display:none; }
  .menu-btn.open::after{
    content:"✖"; font-size:1rem; color:#000;
  }

    .menu-dropdown{
    position: fixed;
    left: 0;
    top: 70px;
    width: 100%;
    /* altura a pantalla completa (con soporte iOS) */
    height: calc(100svh - 70px);
    /* fallback por si el navegador no soporta svh */
    height: calc(100vh - 70px);
    overflow-y: auto;

    background: var(--agora-blau);
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 0;
    /* se mostrará como columna cuando esté abierto */
    display: none;
    z-index: 2000; /* por encima de 'developed-by' */
  }

    .menu-dropdown.open{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
  }
  .menu-dropdown a{
    color:#fff; font-size:1.1rem; text-decoration:none; font-weight:700;
  }

  .developed-by span{ display:none; } /* logo solo en móvil */

  /* Agrupación a la derecha en cabecera */
  .header-right{
    display:flex;
    align-items:center;
    gap:0rem;
  }

  .header-right > * {
    display: none;
  }

  /* …pero muestra estos dos botones */
  .header-right .menu-btn {
    display: inline-flex;   /* o flex según tu layout */
    align-items: center;
  }
  .header-right .lang-switcher {
    display: inline-flex;   /* o block, como prefieras */
  }

  /* El menú móvil se oculta por defecto */
  .header-right .mobile-menu {
    display: none;
  }

  /* Orden opcional: idioma antes que el menú */
  .header-right .lang-switcher{ order: 0; }
  .header-right .menu-toggle{   order: 1; }

  page-plan .card--plan{
    padding:2rem;
  }
}

  /* Login móvil */
  .brand-text{ font-size:1.5rem; }
  .form-title{ font-size:1.3rem; }
  .input-group{ justify-content:flex-start; }
  .input-group .icon{ left:.75rem; }
  .input-group input{ padding-left:2.5rem; text-align:left; }


  /* versión de idiomas dentro del menú móvil */
  .menu-lang{
    display:flex;
    gap:.5rem;
    align-items:center;
    justify-content:center;
    margin-bottom:.5rem;
    flex-wrap:wrap;
  }
  .lang-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.4rem .6rem;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:.95rem;
  }
  .lang-pill:hover{ background:rgba(255,255,255,.15); }

  .page-registro .auth{
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  }


/* el form del logout que no limite el ancho */
.mobile-menu .logout-form{
  margin: 0;
  width: 100%;
}

/* botón rojo a todo el ancho */
.mobile-menu .menu-logout{
  display: block;
  width: 100%;
  font-weight: 700;
  text-align: center;

}



}


/* ===== TOUR GUIAT TranscriData (CAT) ===== */
.td-tour-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 9998; display: none;
}
.td-tour-overlay.is-open { display: block; }

.td-tour-highlight {
  position: absolute; pointer-events: none; z-index: 9999;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
  border-radius: 16px; outline: 2px solid #16BAC5; outline-offset: 0;
  transition: all .2s ease;
}

.td-tour-card {
  position: absolute; z-index: 10000; max-width: 380px;
  background: #fff; border: 1px solid #e9eef2; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 16px 16px 12px;
}
.td-tour-title { font-weight: 700; margin: 0 0 6px; color: #222; }
.td-tour-text { margin: 0 0 10px; color: #444; font-size: 0.95rem; }
.td-tour-actions { display: flex; gap: 8px; justify-content: flex-end; }
.td-tour-btn {
  border: 1px solid #dbeaf0; background: #fff; color:#1b6b8a; 
  border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer;
}
.td-tour-btn.primary { background: #16BAC5; color:#fff; border-color: #16BAC5; }

/* Botó flotant d'ajuda */
.td-tour-help {
  position: fixed; right: 22px; bottom: 78px; z-index: 9990;
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cdeff2; background:#ffffff; cursor: pointer;
  box-shadow: 0 8px 20px rgba(22,186,197,.18);
}
.td-tour-help:hover { background:#f7feff; }

@media (max-width: 680px){
  .td-tour-card { max-width: calc(100vw - 32px); }
}


/* ====== icono I de informacion ====== */
#history-homepanel .history-headbar .hcell{
  /* Antes eran inline + text-align center. Mantengo el centrado visual
     usando inline-flex para alinear verticalmente texto, SVG y el "i". */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;               /* separación uniforme entre título, svg y "i" */
  line-height: 1.2;          /* altura homogénea */
}

/* Cuando la cabecera contiene SVG (✅ / ⚠️), alinearlos también */
#history-homepanel .history-headbar .hh-ok svg,
#history-homepanel .history-headbar .hh-warn svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: .15rem;
}


/* En móviles, reduce un poco la separación para que no salte de línea */
@media (max-width: 720px){
  #history-homepanel .history-headbar .hcell{ gap:.25rem; }
}

/* ====== Botón "i" consistente (tamaño y forma) ====== */
.hh-help{
  /* tamaño fijo, independiente del font-size del header */
  width: 14px;
  height: 14px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #16BAC5;
  border-radius: 50%;
  color: #16BAC5;
  background: #fff;

  /* no dependemos del texto: lo ocultamos */
  font-size: 0;
  line-height: 0;

  vertical-align: middle;
  cursor: help;
  user-select: none;
}

/* Dibujamos la “i” dentro, centrada y nítida */
.hh-help::before{
  content: "i";
  display: block;
  font-size: 10px;         /* tamaño de la letra interna */
  line-height: 1;
  font-weight: 400;
  color: #16BAC5;
  transform: translateY(0); /* ajuste óptico si lo necesitas: 0 / 1px */
}

/* En pantallas pequeñas, puedes bajar un punto si hace falta */
@media (max-width: 720px){
  .hh-help{
    width: 16px; height: 16px; border-width: 2px;
  }
  .hh-help::before{ font-size: 11px; }
}



/* ===== Tooltip genérico para los "i" ===== */
.td-tip{
  position: absolute;
  z-index: 9999;
  display: none;               
  max-width: 42ch;
  padding: .5rem .65rem;
  background: #111;              
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font-size: .9rem;
  line-height: 1.25;
  pointer-events: none;     
}

/* Flechita */
.td-tip::after{
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;                    
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #111 transparent;
}



/* ===== SPINER DE CARGA DE DOCUMENTO Overlay de càrrega (global) ===== */
.td-loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.td-loading-overlay.is-on{ display: flex; }

.td-loading-card{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:1rem 1.25rem;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  font-weight:600; color:#333;
  display:flex; align-items:center; gap:.65rem;
}
.td-spinner{
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #16BAC5; border-top-color: transparent;
  animation: tdspin .8s linear infinite;
}
@keyframes tdspin{ to { transform: rotate(360deg); } }

/* Resalte suave tras la carga */
.row-just-added{
  animation: tdFlash 1600ms ease-out 1;
}
@keyframes tdFlash{
  0%   { box-shadow: 0 0 0 0 rgba(22,186,197,.35); }
  50%  { box-shadow: 0 0 0 8px rgba(22,186,197,.0); }
  100% { box-shadow: none; }
}



/* ===== MENSAJES DEL SISTEMA EN HOME: Toasts de sistema (Django messages) ===== */
.td-toasts{
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: grid;
  gap: 10px;
  z-index: 9999;
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-toast{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: .6rem;
  min-width: 260px;
  max-width: min(420px, 90vw);
  padding: .7rem .9rem;
  border: 1px solid #e8e8e8;
  border-left-width: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  color: #333;
  animation: tdToastIn .25s ease-out;
}

@keyframes tdToastIn{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

.td-toast__icon{
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-weight: 700; font-size: 12px;
  /* color se define por tipo más abajo */
}

.td-toast__txt{ line-height: 1.3; }
.td-toast__close{
  background: transparent; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1;
  color: #777; padding: 0 .2rem;
}
.td-toast__close:hover{ color: #333; }

/* Tipos basados en message.tags (success, info, warning, error, debug) */
.td-toast.success{ border-left-color:#2BB673; }
.td-toast.success .td-toast__icon{ background:#EAF8F1; color:#2BB673; }
.td-toast.success .td-toast__icon::before{ content:"✓"; }

.td-toast.info{ border-left-color:#16BAC5; }
.td-toast.info .td-toast__icon{ background:#EAF8FB; color:#16BAC5; }
.td-toast.info .td-toast__icon::before{ content:"i"; }

.td-toast.warning{ border-left-color:#FFB020; }
.td-toast.warning .td-toast__icon{ background:#FFF6E5; color:#B26A00; }
.td-toast.warning .td-toast__icon::before{ content:"!"; }

.td-toast.error{ border-left-color:#FF3D2F; }
.td-toast.error .td-toast__icon{ background:#FDEAEA; color:#D6281F; }
.td-toast.error .td-toast__icon::before{ content:"!"; }

.td-toast.debug{ border-left-color:#9aa0a6; }
.td-toast.debug .td-toast__icon{ background:#f1f3f4; color:#5f6368; }
.td-toast.debug .td-toast__icon::before{ content:"•"; }

/*  */
.td-toasts.td-toasts--inline{
  position: static; right: auto; bottom: auto;
  margin: 1rem 0;
}

/* ——— Botón TRANSCRIBIR con pulso por defecto ——— */
.history-list .action--run{
  position: relative;
  border-radius: 12px;
}

/* Anillo de pulso alrededor del botón (por defecto SIEMPRE activo) */
@keyframes td-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,186,197,.35); }
  60%  { box-shadow: 0 0 0 12px rgba(22,186,197,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,186,197,0); }
}
.history-list .action--run::after{
  content: "";
  position: absolute;
  inset: -4px;              /* halo alrededor del botón */
  border-radius: 12px;
  animation: td-pulse 2.6s ease-out infinite;
  pointer-events: none;     /* no captura clics */
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .history-list .action--run::after{ animation: none !important; }
}

/* ——— Estado “ocupado”: apagar pulso y desactivar el botón ——— */
.history-list .hrow[data-busy="1"] .action--run{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;     /* bloquea ratón */
}
.history-list .hrow[data-busy="1"] .action--run::after{
  content: none;
  animation: none;
}


/* === MEJORA DEL HISTORIAL  === */


/* === Componente de fecha: no wrap + elipsis si falta espacio === */
.date-cell{
  display:flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
  min-width:0; /* permite elipsis dentro de grid */
  justify-content: center;
}

.date-cell time{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric: tabular-nums;
  font-weight:600;
  color:#1f2937;
  letter-spacing: normal;
  position:relative;
  z-index:1;
}


.date-chip{
  font-variant-numeric: tabular-nums;
  font-size:.78rem;
  line-height:1;
  padding:.25rem .5rem;
  border-radius:9999px;
  background:#f3f4f6;
  color:#4b5563;
  border:1px solid #e5e7eb;
  flex:0 0 auto; /* que no empuje al time */
}
.date-chip[data-state="fresh"]{ background:#ecfeff; color:#0369a1; border-color:#bae6fd; }
.date-chip[data-state="week"]{  background:#fef9c3; color:#92400e; border-color:#fde68a; }
.date-chip[data-state="old"]{   background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }

/* Hover/hover: mantenemos tus mejoras pero solo dentro del panel grande */
#history-homepanel .history-list .hrow{
  border-bottom:1px solid #f1f5f9;
  transition:background .15s ease, box-shadow .15s ease;
}
#history-homepanel .history-list .hrow:hover{ background:#f8fafc; }


/* === Edit-Doc: título (h2) más pequeño en móvil === */
@media (max-width: 768px){
  .auth.edit-doc .auth-card h2{
    font-size: clamp(1rem, 4.5vw + .2rem, 1.35rem);
    line-height: 1.15;
    margin-bottom: .5rem;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  /* Opcional: recorta a 2 líneas con “…” si es larguísimo */
  .auth.edit-doc .auth-card h2.line-clamp-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

html, body { height: 100%; }                    /* garantiza 100% de alto */
body.d-flex.flex-column { min-height: 100vh; }  /* ya lo tienes por clases Bootstrap */
body.d-flex.flex-column > main {                /* tu <main> directo del body */
  flex: 1 0 auto;                               /* ocupa el espacio disponible */
}
.site-footer { margin-top: auto; }              /* ya lo tenías como mt-auto */

.auth.correo-change .auth-card .btn-primary { margin-top: .75rem; }

/* ===== Historial (HOME) — versión móvil compacta ===== */
@media (max-width: 640px){


  /* Reubica las visibles a sus columnas */
  #history-homepanel .hh-doc   { grid-column: 1; min-width: 0; }
  #history-homepanel .hh-estat { grid-column: 2; justify-self: center; }
  #history-homepanel .hh-accio { grid-column: 3; justify-self: end; }

  /* Cabecera compacta */
  #history-homepanel .history-headbar{
    padding: .45rem .5rem;
  }
  #history-homepanel .history-headbar .hcell{
    font-size: .9rem;
  }

  /* Filas compactas en una sola línea */
  #history-homepanel .hrow{
    padding: .5rem .5rem;
    font-size: .95rem;
  }

  /* Título: elipsis para que no empuje al resto */
  #history-homepanel .hh-doc > a,
  #history-homepanel .hh-doc > span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }




  /* 3) Ocultar el resto de columnas (no solo visualmente: que no reserven sitio) */
  #history-homepanel .hh-date,
  #history-homepanel .hh-pages,
  #history-homepanel .hh-int,
  #history-homepanel .hh-ok,
  #history-homepanel .hh-warn{
    display: none !important;
  }

  /* Apaga el título "Historial de intentos:" y su lista */
  #history-homepanel .hh-subhist > strong{              /* título del historial */
    display: none !important;
  }
  #history-homepanel .hh-subhist > ul{                  /* lista del historial */
    display: none !important;
  }
  #history-homepanel p.att-overview{
    display: none !important;
  }

  /* 3) Coloca las celdas visibles en esas 3 columnas */
  #history-homepanel .hh-doc   { grid-column: 1 !important; min-width: 0 !important; }
  #history-homepanel .hh-estat { grid-column: 2 !important; justify-self: center !important; }
  #history-homepanel .hh-accio { grid-column: 3 !important; justify-self: end !important; }

  /* 4) Título con elipsis (para que no “empuje” a las otras dos) */
  #history-homepanel .hh-doc > a,
  #history-homepanel .hh-doc > span{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block;
  }



  /* 6) Compacta los iconos/botones y evita que tengan width fijo */
  #history-homepanel .hh-accio .action{
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  #history-homepanel .hh-accio .action svg{
  width: 22px !important;
  height: 22px !important;
  display: block;
    }
    #history-homepanel .hh-accio .action--run svg{
      transform: scale(1.6)translateX(1px);
      transform-origin: center;
    }
    #history-homepanel .hh-accio .action--edit svg{
      transform: scale(1.4);
      transform-origin: center;
    }
  #history-homepanel .hh-accio .download-menu svg{
      transform: scale(2) translateX(5px);
    transform-origin: center;
  }
  #history-homepanel .hh-accio .action--delete svg{
    transform: scale(2.6);
    transform-origin: center;
  }

  #history-homepanel .hh-accio .action.action--delete{
    margin-left: .6rem !important;   /* separa horizontalmente del icono de la izquierda */
  }

 #history-homepanel .hrow .hh-doc > a,
  #history-homepanel .hrow .hh-doc > span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* pon 2 si prefieres dos líneas */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    min-width: 0;
  }


  #history-homepanel .history-headbar.home-cols{
    display: grid !important;
    grid-template-columns:
      minmax(0,40%)
      minmax(0,30%)
      minmax(56px,30%) !important; /* mismo mínimo que en Accions */
    column-gap: .5rem;
    align-items: center;
  }

 #history-homepanel .history-list .hrow.home-cols{
    display: grid !important;
    grid-template-columns: minmax(0,40%) minmax(0,30%) minmax(56px,30%) !important;
    column-gap: .5rem;
    align-items: stretch !important; /* que todas las celdas ocupen el alto de la fila */
  }
  #history-homepanel .history-list .hrow.home-cols > *{
    align-self: stretch !important;
    min-width: 0;
  }

  /* 1ª columna (título) multilínea con clamp */
  #history-homepanel .history-list .hrow.home-cols .hh-doc{
    white-space: normal !important;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* pon 3 si quieres 3 líneas */
  }
  #history-homepanel .history-list .hrow.home-cols .hh-doc a,
  #history-homepanel .history-list .hrow.home-cols .hh-doc span{
    white-space: inherit !important;
    text-overflow: clip !important;
  }

  /* 2ª columna (Estat): icono arriba + texto debajo, hasta 3 líneas */
  #history-homepanel .history-list .hrow.home-cols .hh-estat{
    display: grid !important;
    grid-template-rows: auto 1fr;
    justify-items: center;
    text-align: center;
    overflow: visible !important;
    padding-block: .125rem;
  }
  #history-homepanel .history-list .hrow.home-cols .hh-estat .icon{ grid-row: 1; margin: 0; }
  #history-homepanel .history-list .hrow.home-cols .hh-estat > :not(.icon){
    grid-row: 2;
    align-self: start;
    white-space: normal !important;
    word-break: break-word; hyphens: auto;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* 3ª columna (Accions): grid compacto, sin recortes */
  #history-homepanel .history-list .hrow.home-cols .hh-accio{
    display: grid !important;
    grid-template-columns: repeat(2, min-content);
    grid-auto-rows: min-content;
    gap: .35rem .5rem;
    justify-content: end; justify-items: end; align-items: center;
    overflow: visible !important;
  }
  #history-homepanel .history-list .hrow.home-cols .hh-accio *{
    overflow: visible !important;
    max-height: none !important;
    flex: 0 0 auto;
  }
  .auth.page-carga .card.card--drop,
  .auth.selector-pagina .card.card--drop{
    min-height: 300px !important;   /* antes: clamp(560px,60vh,760px) */
    padding: 16px !important;        /* menos aire interno */
  }
  .auth.page-carga{
    padding-top: 3rem !important;
  }
  .auth.page-carga .container.mt-4.mb-4{
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;   /* por si alguna regla le da altura después */
  }

  /* por si el título aporta margen extra, compacta su bottom-margin */
  .auth.page-carga h1,
  .auth.page-carga h2{
    margin-bottom: .25rem !important;
  }
    .mobile-note{
    margin: .35rem 0 .5rem;
    padding: .5rem .65rem;
    border-radius: .5rem;
    background: #f3f4f6;         /* gris muy claro */
    color: #374151;               /* gris oscuro legible */
    font-size: .92rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom:1rem;
  }
  .mobile-note::before{
    content: "ℹ️";
    line-height: 1;
  }
  #history-homepanel .history-list .hrow.home-cols .hh-estat{
    align-self: center !important;       /* la celda se coloca en el centro de la fila */
    display: grid !important;            /* icono arriba + texto abajo */
    grid-template-rows: auto auto;       /* altura sólo la necesaria */
    align-content: center !important;    /* centra el conjunto verticalmente */
    justify-items: center;
    row-gap: .2rem;
  }
}

/* ========== Transcribir documento (solo esta página) ========== */
@media (max-width: 720px){
  /* Solo en la página de Transcribir (usa el id raíz de esa vista) */
  #transcribir-doc .bulk-actions{
    position: sticky;
    /* evita que se meta bajo el header fijo en móvil */
    top: calc(var(--header-height) + 8px);
    z-index: 10;
    padding: .45rem .6rem;
    gap: .4rem .5rem;
    border-radius: 10px;
    backdrop-filter: none;
  }
  #transcribir-doc .mb-3.bulk-actions{
    position: sticky;
    top: var(--header-height, 80px); /* evita meterse bajo el header fijo */
    z-index: 10;

    /* compactación real */
    padding: .4rem .55rem;
    gap: .4rem .5rem;
    border-radius: 10px;
  }

  /* Label + separadores dentro del bloque */
  #transcribir-doc .mb-3.bulk-actions label{ font-size: .85rem; }
  #transcribir-doc .mb-3.bulk-actions .sep{ display: none; } /* ahorra altura */

  /* Botones dentro del bloque (coinciden con .btn) */
  #transcribir-doc .mb-3.bulk-actions .btn{
    min-height: 20px;
    padding: .35rem .45rem;
    line-height: 1.05;
    font-size: .8rem;
    border-radius: 8px;
  }

  /* Línea de rango (class="range-inline") */
  #transcribir-doc .mb-3.bulk-actions .range-inline{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .35rem .45rem;
  }

  /* Inputs del rango (class="range-input") */
  #transcribir-doc .mb-3.bulk-actions .range-input{
    height: 30px;
    padding: 0 .5rem;
    border-radius: 8px;
    flex: 1 1 120px;  /* que fluyan y no fuercen altura */
    max-width: none;
  }

    #transcribir-doc .mb-3.bulk-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;                 /* usamos gap en lugar de “|” */
    font-size: 0;                /* anula el ancho de los nodos de texto (&nbsp;|&nbsp;) */
  }
  /* restablece tamaño normal SOLO a los elementos (no a los textos sueltos) */
  #transcribir-doc .mb-3.bulk-actions > *{ font-size: .92rem; }

  /* compacta botones para que quepan en una misma línea */
  #select-errors,
  #select-pending{
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;         /* que no partan dentro del botón */
    min-height: 30px;
    padding: .35rem .6rem;
    border-radius: 8px;
  }

@media (max-width: 720px){

  /* el contenedor de la barra */
  #transcribir-doc .mb-3.bulk-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .6rem;
    font-size: 0; /* neutraliza &nbsp;|&nbsp; del HTML */
  }
  /* restaura tamaño a elementos (no a los nodos de texto) */
  #transcribir-doc .mb-3.bulk-actions > *{ font-size: .80rem; }

  /* 1) checkbox a fila completa (es el <label> del HTML) */
  #transcribir-doc .mb-3.bulk-actions label{
    order: 1;
    flex: 1 1 100%;
  } /* HTML: <label><input id="select-all">…</label> :contentReference[oaicite:0]{index=0} */

  /* 2) los dos botones en la MISMA fila */
  #transcribir-doc #select-errors,
  #transcribir-doc #select-pending{
    order: 2;
    display: inline-flex !important;
    flex: 0 0 auto;           /* no crecen ni se estiran */
    width: auto !important;   /* por si alguna regla global los hace llenar la fila */
    min-width: 0;
    white-space: nowrap;
    padding: .38rem .6rem;
    border-radius: 8px;
    font-size: .7rem;
  } /* IDs reales en tu HTML: #select-errors y #select-pending. :contentReference[oaicite:1]{index=1} */

  /* 3) el grupo de rango pasa debajo, a ancho completo */
  #transcribir-doc .mb-3.bulk-actions .range-inline{
    order: 3;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
  } /* selector existente en tu CSS/HTML. :contentReference[oaicite:2]{index=2} :contentReference[oaicite:3]{index=3} */
}
@media (max-width: 720px){
  /* La barra */
  #transcribir-doc .mb-3.bulk-actions{
    display: grid;                 /* ← cambiamos a GRID en móvil */
    grid-template-columns: 1fr 1fr;/* dos columnas iguales */
    gap: .45rem .6rem;
  }

  /* Checkbox “Seleccionar todas” y el rango ocupan toda la fila */
  #transcribir-doc .mb-3.bulk-actions label,
  #transcribir-doc .mb-3.bulk-actions .range-inline{
    grid-column: 1 / -1;           /* ancho completo */
  }

  /* Los dos botones quedan en la misma fila, una columna cada uno */
  #transcribir-doc #select-errors,
  #transcribir-doc #select-pending{
    grid-column: auto;             /* cada uno ocupa su columna */
    width: 100%;                   /* para que llenen su celda */
    justify-self: stretch;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
    padding: .38rem .6rem;
    border-radius: 8px;
  }

  /* Oculta el “|” de separación si existe como elemento */
  #transcribir-doc .mb-3.bulk-actions .sep{ display:none; }


}
@media (max-width: 720px){
  #transcribir-doc .mb-3.bulk-actions .range-inline{
    display: flex;
    flex-wrap: wrap;          /* para que los botones queden debajo */
    gap: .5rem;
    width: 100%;
    align-items: center;
  }

  /* Oculta los separadores del HTML: | y – */
  #transcribir-doc .mb-3.bulk-actions .range-inline > span{
    display: none !important;
  } /* En tu HTML existen <span class="sep">|</span> y <span>–</span>. :contentReference[oaicite:1]{index=1} */

  /* Los DOS inputs, 50% cada uno en la misma fila */
  #transcribir-doc #range-from.range-input,
  #transcribir-doc #range-to.range-input{
    flex: 1 1 calc(50% - .25rem);
    min-width: 0;
    width: auto;             /* anula anchuras fijas previas */
    height: 34px;
    padding: 0 .6rem;
    border-radius: 8px;
  }

  /* Los botones de rango pasan debajo (otra fila) */
  #transcribir-doc #btn-select-range,
  #transcribir-doc #btn-unselect-range{
    flex: 1 1 auto;
  }
}
@media (max-width: 720px){
  /* contenedor de la lista */
  #transcribir-doc .list-unstyled{
    padding-left: 3rem;     /* separa del borde izquierdo */
    padding-right: .5rem;    /* un pelín a la derecha también */
  }

    #transcribir-doc .btn.btn-primary{
    max-width: 100%;
    white-space: normal;      /* Bootstrap suele poner nowrap */
    word-break: break-word;
    text-align: center;
    line-height: 1.15;
    font-size: clamp(.9rem, 3.6vw, 1.05rem); /* escala suave con ancho */
    padding: .6rem .9rem;     /* un poco más de aire lateral */
  }

    #transcribir-doc .upload-options .select-group{
    display: flex;
    flex-direction: column;   /* apila label → select */
    align-items: stretch;
    gap: .4rem;
    width: 100%;
  }
  #transcribir-doc .upload-options .select-label{
    display: block;
    font-size: .95rem;        /* puedes bajar/subir si quieres */
    line-height: 1.2;
  }
  #transcribir-doc .upload-options select.form-control{
    width: 100%;              /* que ocupe todo el ancho */
    min-width: 0;             /* evita desbordes */
  }
}
/* =========================
   extraer paginas (extraer-doc)
   ========================= */
/* === METADATA FIX === */

/* El bloque de metadatos no debe expandirse con los chips */
#metadata {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  display: block;          /* NO flex ni grid en el padre */
}

/* Fila estable: input + botón */
#metadata .metadata-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}

/* Input: fija su altura y evita que se estire */
#metadata .metadata-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
}

/* Botón junto al input (anula .btn-primary global) */
#metadata .metadata-btn.btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: .4rem .75rem;
  font-size: .875rem;
  border-radius: .5rem;
  white-space: nowrap;
}

/* Lista de chips: su propio bloque, no altera la fila */
#metadata .metadata-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
  width: 100%;
  max-width: 100%;
}

/* Chips compactos */
#metadata .metadata-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  font-size: .9rem;
  white-space: nowrap;
}

/* Botón para quitar chip */
#metadata .metadata-chip button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: .7;
}

/* En pantallas pequeñas, deja que salte de línea */
@media (max-width: 560px){
  #metadata .metadata-row { flex-wrap: wrap; }
}
.btn-extract{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
  padding:.75rem 1.75rem;   /* mantiene el look “pill” */
}
.auth.selector-pagina .card button.btn-primary[type="submit"]{
  white-space: normal !important;     /* permite varias líneas */
  line-height: 1.25;                  /* altura cómoda entre líneas */
  text-align: center;                 /* centrar texto en 2 líneas */
  overflow-wrap: break-word;          /* rompe si hay palabras muy largas */
  hyphens: auto;                      /* ayuda a partir palabras si el idioma lo permite */
  /* no tocamos width / max-width globales; seguirá siendo el pill centrado */
}

.btn-extract{
  max-width: none !important;  /* sin límite */
  width: auto !important;
  display: inline-flex !important;
  white-space: nowrap;         /* 1 línea; quítalo si quieres 2 líneas */
}
}