/* ==========================================================================
   flots · componentes.css
   Componentes compartidos (sin prefijo de página): botones, campos, opciones,
   chips, pestañas, tablas, alertas, KPI, pastillas, progreso, encabezado
   público, shells de cliente y estudio (sidebar + barra inferior), carpetas,
   modal, toasts, banner demo, cargando, vacío y error.
   Medidas tomadas de _work/diseno/*.dc.html.
   ========================================================================== */

/* =========================== Botones =========================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:56px;
  padding:0 40px;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  font:inherit;
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primario{ background:var(--ink); border-color:var(--ink); color:#FFFFFF; }
.btn-primario:hover{ background:var(--ink-2); color:#FFFFFF; }

.btn-acento{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
.btn-acento:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:#FFFFFF; }

.btn-borde{ background:var(--surface); border-color:var(--ink); color:var(--ink); }
.btn-borde:hover{ background:var(--bg); color:var(--ink); }

.btn-peligro{ background:var(--danger); border-color:var(--danger); color:#FFFFFF; }
.btn-peligro:hover{ background:#A8381F; border-color:#A8381F; color:#FFFFFF; }

.btn-texto{
  height:auto;
  padding:0;
  border:0;
  background:none;
  font-size:15px;
  font-weight:400;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.btn-texto:hover{ color:var(--ink); }

.btn-grande{ height:60px; padding:0 44px; font-size:17px; }
.btn-medio{ height:44px; padding:0 20px; font-size:15px; }
.btn-chico{ height:36px; padding:0 14px; font-size:14px; }
.btn-texto.btn-medio, .btn-texto.btn-chico, .btn-texto.btn-grande{ height:auto; padding:0; }
.btn-bloque{ display:flex; width:100%; }

.btn:disabled,
.btn[aria-disabled="true"]{
  background:var(--line-list);
  border-color:var(--line-list);
  color:var(--muted);
  cursor:not-allowed;
}
.btn-borde:disabled,
.btn-borde[aria-disabled="true"]{ background:var(--surface); border-color:var(--line-soft); color:var(--disabled); }
.btn-texto:disabled,
.btn-texto[aria-disabled="true"]{ background:none; border:0; color:var(--disabled); }

.btn .spinner{ width:16px; height:16px; border-color:rgba(255,255,255,.35); border-top-color:currentColor; }
.btn-borde .spinner, .btn-texto .spinner{ border-color:var(--line); border-top-color:var(--ink); }

/* Botón redondo de ícono (cerrar, borrar) */
.btn-icono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
}
.btn-icono:hover{ color:var(--ink); }

/* Barra fija inferior (acciones en celular: Home, pedido, avances) */
.barra-fija{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  background:var(--barra-fija-bg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}

@media (max-width: 767px){
  .btn{ height:52px; padding:0 24px; }
  .btn-grande{ height:52px; padding:0 22px; font-size:16px; }
  .btn-medio{ height:42px; padding:0 18px; }
  .btn-chico{ height:36px; padding:0 12px; font-size:13px; }
}

/* =========================== Campos =========================== */
.campo{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.campo-etiqueta{ font-size:15px; font-weight:500; line-height:1.35; }
fieldset.campo > legend.campo-etiqueta{ margin-bottom:12px; }
.campo-opcional{ font-weight:400; color:var(--muted); }
.campo-ayuda{ font-size:14px; font-weight:400; line-height:1.45; color:var(--muted); }
.campo-error{ font-size:14px; font-weight:500; line-height:1.4; color:var(--danger); }

.campo-control{
  display:block;
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid var(--line-input);
  border-radius:0;
  background:var(--surface);
  font:inherit;
  font-size:16px;
  font-weight:400;
  color:var(--ink);
  transition:border-color .15s ease;
}
/* --faint (#8C8B86) no llega a 4.5:1 sobre blanco: el placeholder usa --muted (§1, contraste). */
.campo-control::placeholder{ color:var(--muted); opacity:1; }
.campo-control:hover{ border-color:var(--dashed); }
.campo-control:focus{ border-color:var(--ink); }
.campo-control:focus-visible{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.campo-control[aria-invalid="true"]{ border-color:var(--danger); }
.campo-control:disabled{ background:var(--paper-alt); color:var(--muted); cursor:not-allowed; }

textarea.campo-control{
  height:auto;
  min-height:52px;
  padding:14px 16px;
  line-height:1.5;
  resize:none;
}

select.campo-control{
  padding-right:44px;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px 14px;
  cursor:pointer;
}

/* Grupo de campos en grilla (Paso 1: 2 columnas) */
.campos-grilla{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
/* Tres palabras */
.campos-tres{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.grupo-leyenda{
  margin-bottom:12px;
  font-size:15px;
  font-weight:500;
}

@media (max-width: 767px){
  .campo-control{ height:50px; padding:0 14px; }
  textarea.campo-control{ padding:12px 14px; }
  select.campo-control{ padding-right:40px; background-position:right 14px center; }
  .campos-grilla{ grid-template-columns:minmax(0, 1fr); gap:18px; }
  .campos-tres{ gap:8px; }
}

/* =========================== Tarjetas de opción =========================== */
.opciones{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.opciones-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.opciones-1{ grid-template-columns:minmax(0, 1fr); }

.opcion{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:0 18px;
  border:1px solid var(--line-input);
  background:var(--surface);
  font-size:16px;
  font-weight:400;
  line-height:1.3;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease;
}
.opcion-alta{ min-height:56px; }
.opcion:hover{ border-color:var(--dashed); }
.opcion:has(:checked),
.opcion.activa{ border-color:var(--ink); }
.opcion:has(:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.opcion:has(:disabled){ opacity:.55; cursor:not-allowed; }
.opcion input{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--accent);
  cursor:inherit;
}
.opcion input:focus-visible{ outline:none; }
.opcion-texto{ min-width:0; padding:12px 0; }
/* Navegadores sin :has(): el foco se ve en el propio control */
@supports not selector(:has(*)){
  .opcion input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
}

@media (max-width: 767px){
  .opciones{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .opciones-3{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .opcion{ min-height:50px; padding:0 14px; font-size:15px; }
}

/* =========================== Chips =========================== */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border:1px solid var(--line-input);
  border-radius:0;
  background:var(--surface);
  font:inherit;
  font-size:15px;
  font-weight:400;
  color:var(--ink);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed="true"],
.chip[aria-checked="true"],
.chip.activo{ background:var(--ink); border-color:var(--ink); color:#FFFFFF; }
.chip:disabled{ opacity:.5; cursor:not-allowed; }

/* Etiqueta estática (servicios en listas del estudio) */
.etiqueta{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid var(--line-input);
  font-size:13px;
  font-weight:400;
  line-height:1.3;
  color:var(--ink);
  white-space:nowrap;
}
.etiquetas{ display:flex; flex-wrap:wrap; gap:6px; }

/* =========================== Pestañas =========================== */
.pestanas{
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line-input);
  overflow-x:auto;
  scrollbar-width:none;
}
.pestanas::-webkit-scrollbar{ display:none; }

.pestana{
  flex-shrink:0;
  margin-bottom:-1px;
  padding:10px 0;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  font:inherit;
  font-size:16px;
  font-weight:400;
  color:var(--muted);
  white-space:nowrap;
  cursor:pointer;
}
.pestana:hover{ color:var(--ink); }
.pestana[aria-selected="true"]{ font-weight:600; color:var(--ink); border-bottom-color:var(--accent); }
.pestana:focus-visible{ outline-offset:-2px; }

@media (max-width: 767px){
  .pestanas{ gap:20px; }
}

/* =========================== Tablas (grid) =========================== */
.tabla-caja{ padding:8px 24px; background:var(--surface); }
.tabla{ display:flex; flex-direction:column; }

.tabla-cabecera,
.tabla-fila{
  display:grid;
  grid-template-columns:var(--cols, minmax(0, 1fr));
  gap:16px;
  align-items:center;
}
.tabla-cabecera{
  padding:12px 0;
  border-bottom:1px solid var(--ink);
  font-size:13px;
  font-weight:400;
  color:var(--muted);
}
.tabla-fila{
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.tabla-fila:last-child{ border-bottom-color:var(--line); }
.tabla-principal{ font-size:17px; font-weight:500; }
.tabla-secundario{ color:var(--muted); }
.tabla-acciones{ display:flex; justify-content:flex-end; align-items:center; gap:20px; }
.tabla-vacia{ margin:0; padding:28px 0; font-size:15px; color:var(--muted); }

/* Estados de texto dentro de tablas */
.estado-texto{ font-size:14px; font-weight:600; }
.estado-acento{ color:var(--accent); }
.estado-peligro{ color:var(--danger); }
.estado-muted{ color:var(--muted); }
.estado-tinta{ color:var(--ink); }

@media (max-width: 767px){
  .tabla-caja{ padding:4px 16px; }
  .tabla-cabecera{ display:none; }
  .tabla-fila{ grid-template-columns:minmax(0, 1fr); gap:6px; padding:14px 0; }
  .tabla-acciones{ justify-content:flex-start; }
}

/* =========================== Lista numerada y definiciones =========================== */
.lista-numerada{ margin:0; padding:0; list-style:none; }
.lista-numerada > li{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  padding:20px 0;
  border-top:1px solid var(--line-list);
}
.lista-numerada > li:first-child{ border-top-color:var(--ink); }
.lista-numerada > li:last-child{ border-bottom:1px solid var(--line-list); }
.lista-numerada-num{ font-size:17px; color:var(--accent); }

.definiciones{
  display:grid;
  grid-template-columns:minmax(110px, 200px) minmax(0, 1fr);
  gap:14px 24px;
  margin:0;
}
.definiciones dt{ color:var(--muted); }
.definiciones dd{ margin:0; }

@media (max-width: 767px){
  .lista-numerada > li{ grid-template-columns:36px minmax(0, 1fr); padding:18px 0; }
  .definiciones{ grid-template-columns:minmax(0, 1fr); gap:4px; }
  .definiciones dd{ margin-bottom:10px; }
}

/* =========================== Alertas =========================== */
.alerta{
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px 24px;
  background:var(--surface);
  border-left:4px solid var(--accent);
  color:var(--ink);
  text-decoration:none;
}
a.alerta:hover{ color:var(--ink); }
.alerta-peligro{ border-left-color:var(--danger); }
.alerta-neutra{ border-left-color:var(--ink); }
.alerta-titulo{ flex-shrink:0; font-size:16px; font-weight:600; }
.alerta-texto{ flex-grow:1; min-width:0; font-size:16px; line-height:1.45; color:var(--text-body); }
.alerta-accion{ flex-shrink:0; display:flex; align-items:center; gap:12px; }

/* Tarjeta de tarea ("Para hoy", Admin/MAdmin): alerta en columna.
   Título 16/600 + texto 14 gris juntos (gap 4) y la acción 14/500 abajo. */
.alerta-columna{ flex-direction:column; align-items:stretch; justify-content:space-between; gap:10px; padding:16px 20px; }
.alerta-cabeza{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.alerta-columna .alerta-texto{ font-size:14px; color:var(--muted); }
.alerta-columna .alerta-accion{ font-size:14px; font-weight:500; }

@media (max-width: 767px){
  .alerta{ flex-direction:column; align-items:flex-start; gap:12px; padding:16px 18px; }
  .alerta-titulo, .alerta-texto{ font-size:15px; }
  .alerta-columna{ align-items:stretch; gap:6px; padding:14px 16px; }
  .alerta-columna .alerta-titulo{ font-size:16px; }
  .alerta-columna .alerta-texto{ font-size:14px; }
  .alerta-cabeza{ gap:6px; }
}

/* =========================== KPI =========================== */
.kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.kpi{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:20px 24px;
  background:var(--surface);
}
.kpi-etiqueta{ font-size:14px; color:var(--muted); }
.kpi-valor{ font-size:30px; font-weight:400; line-height:1.15; letter-spacing:-0.01em; }
.kpi-nota{ font-size:13px; color:var(--muted); }
.kpi-peligro .kpi-valor{ color:var(--danger); }
.kpi-acento .kpi-valor{ color:var(--accent); }

@media (max-width: 1199px){
  .kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .kpis{ gap:10px; }
  .kpi{ padding:16px; }
  .kpi-etiqueta{ font-size:13px; }
  .kpi-valor{ font-size:24px; }
}

/* =========================== Pastillas e insignias =========================== */
.pastilla{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  padding:3px 10px;
  border-radius:12px;
  background:var(--accent);
  color:#FFFFFF;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
}
.pastilla-peligro{ background:var(--danger); }
.pastilla-neutra{ background:var(--pastilla-oscura); }
.pastilla-tinta{ background:var(--ink); }
.pastilla-clara{ background:var(--line-soft); color:var(--ink); }
.pastilla-chica{ padding:3px 9px; font-size:11px; }

/* Insignia cuadrada ("Nuevo" en las hojas del panel) */
.insignia{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  padding:4px 10px;
  background:var(--accent);
  color:#FFFFFF;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
}
@media (max-width: 767px){
  .insignia{ padding:3px 8px; font-size:11px; }
}

/* Contador en la navegación (Pedidos 3) */
.badge-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  margin-left:8px;
  padding:1px 8px;
  border-radius:10px;
  background:var(--accent);
  color:#FFFFFF;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  vertical-align:1px;
}

/* =========================== Progreso =========================== */
.progreso{
  position:relative;
  width:100%;
  height:3px;
  background:var(--track);
  overflow:hidden;
}
.progreso-oscuro{ background:var(--track-dark); }
.progreso-relleno{
  display:block;
  height:3px;
  background:var(--accent);
  transition:width .3s ease;
}

/* Pasos del formulario */
.pasos{ display:flex; flex-direction:column; gap:14px; }
.pasos-fila{ display:flex; justify-content:space-between; gap:16px; font-size:15px; }
.pasos-titulo{ font-weight:500; }
.pasos-contador{ color:var(--muted); white-space:nowrap; }
@media (max-width: 767px){
  .pasos{ gap:10px; }
  .pasos-fila{ font-size:14px; }
}

/* =========================== Selector de idioma =========================== */
.idioma{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:15px;
  line-height:1;
}
.idioma-btn{
  padding:4px 6px;
  border:0;
  background:none;
  font:inherit;
  font-weight:400;
  /* El diseño usa --faint (#8C8B86, 3.1:1 sobre --bg); se usa --muted para llegar a 4.5:1 (§1). */
  color:var(--muted);
  cursor:pointer;
}
.idioma-btn:hover{ color:var(--ink); }
.idioma-btn[aria-pressed="true"]{ font-weight:600; color:var(--ink); }
.idioma-sep{ color:var(--disabled); }

/* Variante clara (sobre foto u oscuro) */
.idioma-claro{ color:#FFFFFF; }
.idioma-claro .idioma-btn{ color:#FFFFFF; opacity:.6; }
.idioma-claro .idioma-btn:hover{ color:#FFFFFF; opacity:.85; }
.idioma-claro .idioma-btn[aria-pressed="true"]{ color:#FFFFFF; opacity:1; }
.idioma-claro .idioma-sep{ color:#FFFFFF; opacity:.6; }
.idioma-claro .idioma-btn:focus-visible{ outline-color:#FFFFFF; }

@media (max-width: 767px){
  .idioma{ font-size:14px; }
}

/* =========================== Logo =========================== */
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.logo-img{ width:auto; height:28px; }
.logo-invertido{ color:#FFFFFF; }
.logo-invertido .logo-img{ filter:invert(1); }
a:has(> .logo){ text-decoration:none; color:var(--ink); }
a:has(> .logo):hover{ color:var(--ink); opacity:.8; }

/* =========================== Encabezado público =========================== */
.encabezado{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding:40px var(--gutter);
}
.encabezado-logo{ flex-shrink:0; display:inline-flex; text-decoration:none; color:var(--ink); }
.encabezado-nav{
  display:flex;
  align-items:center;
  gap:40px;
}
.encabezado-link{
  padding:4px 0;
  border-bottom:2px solid transparent;
  font-size:16px;
  text-decoration:none;
  color:var(--muted);
  white-space:nowrap;
}
.encabezado-link:hover{ color:var(--ink); }
.encabezado-link[aria-current="page"]{ font-weight:600; color:var(--ink); border-bottom-color:var(--accent); }
/* En el diseño el botón "Acceso clientes" es solo borde (fondo transparente sobre --bg) */
.encabezado-acceso{ height:44px; padding:0 22px; font-size:15px; background:transparent; }
.encabezado-acceso:hover{ background:var(--surface); }
.encabezado-acceso[aria-current="page"]{ font-weight:600; }
.encabezado-menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
}
.encabezado-menu{
  position:absolute;
  top:100%;
  left:12px;
  right:12px;
  z-index:30;
  display:flex;
  flex-direction:column;
  padding:8px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sombra-ventana-celu);
  animation:flotsIn .25s var(--ease-out) 1;
}
.encabezado-menu a{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:17px;
  text-decoration:none;
  color:var(--ink);
}
.encabezado-menu a:last-child{ border-bottom:0; }
.encabezado-menu a[aria-current="page"]{ font-weight:600; }

/* Variante compacta (columna derecha de Proyectos) */
.encabezado-compacto{ padding:0; max-width:none; }
.encabezado-compacto .encabezado-nav{ gap:16px; font-size:14px; }
.encabezado-compacto .encabezado-link{ font-size:14px; padding:3px 0; }
.encabezado-compacto .encabezado-acceso{ height:38px; padding:0 14px; font-size:14px; }
.encabezado-compacto .idioma{ font-size:14px; gap:0; }

@media (max-width: 1199px){
  .encabezado{ padding-top:32px; padding-bottom:32px; }
  .encabezado-nav{ gap:24px; }
}
@media (max-width: 767px){
  .encabezado,
  .encabezado-compacto{ padding:20px 20px 12px; gap:12px; }
  .encabezado-nav,
  .encabezado-compacto .encabezado-nav{ gap:14px; font-size:14px; }
  .encabezado-link{ font-size:14px; padding:2px 0; }
  .encabezado-acceso,
  .encabezado-compacto .encabezado-acceso{ height:34px; padding:0 12px; font-size:14px; }
}
/* Celular (MHome): "Proyectos · ES/EN · Clientes" sin menú, como el diseño.
   Solo en pantallas de menos de 380 px "Proyectos" pasa al menú para que entre todo en una línea. */
@media (max-width: 420px){
  .encabezado-nav{ gap:10px; }
  .encabezado-menu-btn{ display:none; }
}
@media (max-width: 379px){
  .encabezado-link-proyectos{ display:none; }
  .encabezado-menu-btn{ display:inline-flex; }
}

/* =========================== Shells (cliente y estudio) =========================== */
.shell{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:calc(100vh - var(--alto-banner));
  background:var(--bg);
}
.sidebar{
  position:sticky;
  top:var(--alto-banner);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:56px;
  width:280px;
  height:calc(100vh - var(--alto-banner));
  padding:56px 40px;
  border-right:1px solid var(--line);
  overflow-y:auto;
}
.sidebar-estudio{ width:260px; }
.sidebar-marca{ display:flex; flex-direction:column; gap:10px; }
.sidebar-logo{ align-self:flex-start; text-decoration:none; color:var(--ink); }
.sidebar-sub{
  font-size:15px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-nav{ display:flex; flex-direction:column; gap:4px; }
.sidebar-link{
  align-self:flex-start;
  padding:12px 0;
  border-bottom:2px solid transparent;
  font-size:17px;
  text-decoration:none;
  color:var(--muted);
  white-space:nowrap;
}
.sidebar-link:hover{ color:var(--ink); }
.sidebar-link[aria-current="page"]{ font-weight:600; color:var(--ink); border-bottom-color:var(--accent); }
.sidebar-pie{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  color:var(--muted);
}
.sidebar-pie a{ font-size:15px; color:var(--ink); overflow-wrap:anywhere; }
.sidebar-pie a:hover{ color:var(--muted); }
.sidebar-salir{
  align-self:flex-start;
  margin-top:14px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:14px;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.sidebar-salir:hover{ color:var(--ink); }
.sidebar-volver{ margin-bottom:10px; font-weight:500; }

.shell-main{
  position:relative;
  flex-grow:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:56px 72px 48px;
}
.shell-idioma{
  position:absolute;
  top:36px;
  right:72px;
  z-index:5;
}

/* Tablet: el sidebar se colapsa en una barra superior */
@media (max-width: 1199px){
  .shell{ flex-direction:column; }
  .sidebar,
  .sidebar-estudio{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 32px;
    width:auto;
    height:auto;
    padding:20px var(--gutter);
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .sidebar-marca{ flex-direction:row; align-items:center; gap:14px; }
  .sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:4px 24px; }
  .sidebar-link{ padding:8px 0; font-size:16px; }
  .sidebar-pie{ margin-top:0; margin-left:auto; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
  .sidebar-salir{ margin-top:0; }
  .sidebar-volver{ margin-bottom:0; }
  .shell-main{ padding:48px var(--gutter) 48px; }
  .shell-idioma{ top:20px; right:var(--gutter); }
}

/* ---------- Celular: encabezado compacto + barra inferior ---------- */
.shell-cel{
  position:relative;
  min-height:calc(100vh - var(--alto-banner));
  background:var(--bg);
}
.cel-encabezado{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:20px 20px 12px;
}
.shell-cel-estudio .cel-encabezado{ padding:20px 20px 8px; }
.cel-logo{ flex-shrink:0; display:inline-flex; text-decoration:none; color:var(--ink); }
.cel-encabezado-der{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-size:14px;
  color:var(--muted);
}
.cel-encabezado-der a,
.cel-encabezado-der button{
  font-size:14px;
  color:var(--muted);
}
.cel-encabezado-der a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.cel-marca{
  max-width:44vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cel-boton-texto{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cel-main{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:8px 20px 40px;
}
.cel-main-con-barra{ padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }
.cel-pie{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}
.cel-pie a{ color:var(--ink); overflow-wrap:anywhere; }

.barra-inferior{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:flex;
  height:calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--surface);
  border-top:1px solid var(--line);
}
.barra-inferior-item{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-top:10px;
  font-size:12px;
  font-weight:400;
  text-decoration:none;
  color:var(--muted);
}
.barra-inferior-item:hover{ color:var(--ink); }
.barra-inferior-indicador{
  display:block;
  width:22px;
  height:3px;
  background:transparent;
}
.barra-inferior-item[aria-current="page"]{ font-weight:600; color:var(--ink); }
.barra-inferior-item[aria-current="page"] .barra-inferior-indicador{ background:var(--accent); }
.barra-inferior-item:focus-visible{ outline-offset:-3px; }
.barra-inferior-contador{
  position:absolute;
  top:6px;
  left:calc(50% + 14px);
  min-width:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--accent);
  color:#FFFFFF;
  font-size:11px;
  font-weight:600;
  line-height:18px;
  text-align:center;
}

/* =========================== Carpetas =========================== */
/* Carpeta de servicio (SVG 132×104) */
.carpeta-servicio{
  display:block;
  color:var(--accent);
  transition:transform .35s ease, opacity .35s ease;
}
.carpeta-servicio.elegida{ opacity:.22; transform:scale(.86); }

/* Carpeta de proyecto (Home "Tu proyecto" e Ingreso) */
.carpeta-proyecto{
  --cp-ancho:300px; --cp-alto:232px;
  --cp-tab-ancho:120px; --cp-tab-alto:40px; --cp-tab-radio:12px;
  --cp-fondo-top:16px; --cp-radio:14px;
  --cp-papel-ancho:246px; --cp-papel-alto:170px; --cp-papel-pad:8px 12px; --cp-papel-radio:6px; --cp-papel-fs:13px;
  --cp-frente-alto:164px; --cp-frente-pad:20px 22px;
  --cp-logo:34px; --cp-titulo:24px; --cp-titulo-peso:500; --cp-titulo-ls:-0.02em; --cp-sub:15px;
  position:relative;
  flex-shrink:0;
  width:var(--cp-ancho);
  max-width:100%;
  height:var(--cp-alto);
  color:var(--ink);
}
.carpeta-proyecto-tab{
  position:absolute;
  left:0;
  top:0;
  width:var(--cp-tab-ancho);
  height:var(--cp-tab-alto);
  border-radius:var(--cp-tab-radio);
  background:var(--ink);
}
.carpeta-proyecto-fondo{
  position:absolute;
  left:0;
  right:0;
  top:var(--cp-fondo-top);
  bottom:0;
  border-radius:var(--cp-radio);
  background:var(--ink);
}
.carpeta-proyecto-papel{
  position:absolute;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  width:var(--cp-papel-ancho);
  max-width:calc(100% - 20px);
  height:var(--cp-papel-alto);
  padding:var(--cp-papel-pad);
  border-radius:var(--cp-papel-radio);
  background:var(--paper-alt);
  color:var(--ink);
  box-shadow:var(--sombra-papel);
  animation:flotsPaper .45s var(--ease-out) 1;
}
.carpeta-proyecto-papel.impar{ background:var(--surface); }
.carpeta-proyecto-papel-nombre{ font-size:var(--cp-papel-fs); font-weight:600; }
.carpeta-proyecto-papel-meta{ font-size:calc(var(--cp-papel-fs) - 2px); color:var(--faint); }
.carpeta-proyecto-frente{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:var(--cp-frente-alto);
  padding:var(--cp-frente-pad);
  border-radius:var(--cp-radio);
  background:var(--ink-2);
  color:#FFFFFF;
  box-shadow:0 -2px 0 rgba(255,255,255,.06) inset;
}
.carpeta-proyecto-frente img{
  align-self:flex-end;
  width:auto;
  height:var(--cp-logo);
  filter:invert(1);
}
.carpeta-proyecto-textos{ display:flex; flex-direction:column; gap:4px; }
.carpeta-proyecto-titulo{
  font-size:var(--cp-titulo);
  font-weight:var(--cp-titulo-peso);
  letter-spacing:var(--cp-titulo-ls);
  line-height:1.1;
}
.carpeta-proyecto-sub{ font-size:var(--cp-sub); opacity:.7; }
a.carpeta-proyecto-link{ display:block; color:inherit; text-decoration:none; }
a.carpeta-proyecto-link .carpeta-proyecto{ transition:transform .3s ease; }
a.carpeta-proyecto-link:hover .carpeta-proyecto{ transform:translateY(-6px); }
a.carpeta-proyecto-link:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }

/* Variante grande (Acceso / Ingreso) con portada que se abre */
.carpeta-proyecto-acceso{
  --cp-ancho:560px; --cp-alto:440px;
  --cp-tab-ancho:200px; --cp-tab-alto:60px; --cp-tab-radio:16px;
  --cp-fondo-top:24px; --cp-radio:20px;
  --cp-papel-ancho:440px; --cp-papel-alto:300px; --cp-papel-pad:14px 18px; --cp-papel-radio:8px; --cp-papel-fs:15px;
  --cp-frente-alto:300px; --cp-frente-pad:32px 36px;
  --cp-logo:52px; --cp-titulo:40px; --cp-titulo-peso:400; --cp-titulo-ls:-0.03em; --cp-sub:16px;
  perspective:1400px;
}
.carpeta-proyecto-acceso .carpeta-proyecto-papel{
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  animation:flotsRise .6s var(--ease-out) 1 both;
}
.carpeta-proyecto-acceso .carpeta-proyecto-frente{
  transform-origin:50% 100%;
  transition:transform .7s var(--ease-out);
  box-shadow:var(--sombra-portada);
}
.carpeta-proyecto-acceso .carpeta-proyecto-textos{ gap:6px; }
.carpeta-proyecto.abierta .carpeta-proyecto-frente{ transform:rotateX(-28deg); }

@media (max-width: 767px){
  .carpeta-proyecto{
    --cp-ancho:300px; --cp-alto:210px;
    --cp-tab-ancho:110px; --cp-tab-alto:36px; --cp-tab-radio:11px;
    --cp-fondo-top:14px; --cp-radio:13px;
    --cp-papel-ancho:250px; --cp-papel-alto:150px; --cp-papel-pad:7px 10px; --cp-papel-fs:12px;
    --cp-frente-alto:148px; --cp-frente-pad:18px 20px;
    --cp-logo:28px; --cp-titulo:22px; --cp-sub:14px;
  }
  .carpeta-proyecto-textos{ gap:3px; }
  .carpeta-proyecto-acceso{
    --cp-ancho:350px; --cp-alto:280px;
    --cp-tab-ancho:130px; --cp-tab-alto:40px; --cp-tab-radio:12px;
    --cp-fondo-top:16px; --cp-radio:14px;
    --cp-papel-ancho:290px; --cp-papel-alto:190px; --cp-papel-pad:10px 14px; --cp-papel-radio:7px; --cp-papel-fs:13px;
    --cp-frente-alto:190px; --cp-frente-pad:22px 24px;
    --cp-logo:34px; --cp-titulo:26px; --cp-titulo-peso:400; --cp-titulo-ls:-0.03em; --cp-sub:14px;
    perspective:1000px;
  }
  .carpeta-proyecto-acceso .carpeta-proyecto-textos{ gap:4px; }
}

/* Carpeta del estudio (proyecto en curso, tarjeta con pestaña) */
.carpeta-estudio{
  position:relative;
  display:block;
  height:196px;
  color:#FFFFFF;
  text-decoration:none;
  transition:transform .25s ease;
}
a.carpeta-estudio:hover{ color:#FFFFFF; transform:translateY(-6px); }
.carpeta-estudio:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.carpeta-estudio-tab{
  position:absolute;
  left:0;
  top:0;
  width:96px;
  height:30px;
  border-radius:10px;
  background:var(--ink);
}
.carpeta-estudio-cuerpo{
  position:absolute;
  left:0;
  right:0;
  top:14px;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px 20px 18px;
  border-radius:12px;
  background:var(--ink-2);
}
.carpeta-estudio.entregada .carpeta-estudio-cuerpo{ background:var(--ink-3); }
.carpeta-estudio-cabeza{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.carpeta-estudio-nombre{
  font-size:20px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.carpeta-estudio-etapa{ font-size:14px; opacity:.7; }
.carpeta-estudio-base{ display:flex; flex-direction:column; gap:10px; }
.carpeta-estudio-pie{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.carpeta-estudio-pie > span:first-child{ opacity:.7; }

/* Compacta: carrusel del estudio en celular */
.carpeta-estudio-compacta{ flex:0 0 220px; height:170px; }
.carpeta-estudio-compacta .carpeta-estudio-tab{ width:84px; height:28px; border-radius:9px; }
.carpeta-estudio-compacta .carpeta-estudio-cuerpo{ top:12px; padding:18px 16px 14px; border-radius:11px; }
.carpeta-estudio-compacta .carpeta-estudio-cabeza{ gap:6px; }
.carpeta-estudio-compacta .carpeta-estudio-nombre{ font-size:18px; }
.carpeta-estudio-compacta .carpeta-estudio-etapa{ font-size:13px; opacity:.75; }
.carpeta-estudio-compacta .carpeta-estudio-base{ gap:8px; }
.carpeta-estudio-compacta .pastilla{ padding:3px 9px; font-size:11px; }

.carpetas-grilla{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}
.carpetas-carrusel{
  display:flex;
  gap:12px;
  margin:0 -20px;
  padding:0 20px 6px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
}
.carpetas-carrusel > *{ scroll-snap-align:start; }
@media (max-width: 1199px){
  .carpetas-grilla{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .carpetas-grilla{ grid-template-columns:minmax(0, 1fr); gap:16px; }
}

/* =========================== Subir archivos =========================== */
.subir{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:88px;
  padding:16px;
  border:1px dashed var(--dashed);
  background:var(--surface);
  font-size:15px;
  font-weight:400;
  text-align:center;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.subir:hover{ border-color:var(--ink); }
.subir.arrastrando{ border-color:var(--accent); border-style:solid; background:var(--accent-tint); }
.subir:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
@supports not selector(:has(*)){
  .subir:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
}
.subir-link{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.subir-lista{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  list-style:none;
}
.subir-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:400;
}
.subir-item-nombre{ flex-grow:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subir-item-peso{ flex-shrink:0; color:var(--muted); }
.subir-item .btn-icono{ width:32px; height:32px; }
@media (max-width: 767px){
  .subir{ min-height:80px; font-size:15px; }
}

/* =========================== Modal =========================== */
.modal-fondo{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(29,29,27,.45);
  animation:flotsFade .2s ease-out 1;
}
.modal{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  max-width:560px;
  max-height:calc(100vh - 40px);
  padding:32px;
  background:var(--surface);
  overflow:auto;
  animation:flotsIn .3s var(--ease-out) 1;
}
.modal:focus{ outline:none; }
.modal-cabecera{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.modal-titulo{ margin:0; font-size:22px; font-weight:500; line-height:1.25; }
.modal-cerrar{ margin:-8px -8px 0 auto; }
.modal-cuerpo{ font-size:16px; line-height:1.5; color:var(--text-body); }
.modal-pie{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}
body.con-modal{ overflow:hidden; }

@media (max-width: 767px){
  .modal-fondo{ align-items:flex-end; padding:0; }
  .modal{ max-width:none; max-height:90vh; padding:24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .modal-pie{ flex-direction:column-reverse; align-items:stretch; }
  .modal-pie .btn{ width:100%; }
}

/* =========================== Toasts =========================== */
.toasts{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:1100;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100vw - 32px);
  transform:translateX(-50%);
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
  max-width:100%;
  padding:14px 20px;
  background:var(--ink);
  color:#FFFFFF;
  font-size:15px;
  line-height:1.4;
  box-shadow:0 8px 24px rgba(29,29,27,.18);
  pointer-events:auto;
  animation:flotsIn .3s var(--ease-out) 1;
}
.toast-error{ background:var(--danger); }
.toast-info{ background:var(--accent); }
@media (max-width: 767px){
  .toasts{ top:12px; bottom:auto; }
  .toast{ min-width:0; width:calc(100vw - 32px); }
}

/* =========================== Banner demo =========================== */
/* Franja fija arriba (§1): sticky, así no tapa contenido y el sidebar se pega debajo. */
.banner-demo{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:var(--alto-banner, 32px);
  min-height:32px;
  padding:0 16px;
  background:var(--ink);
  color:#FFFFFF;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
}
.banner-demo strong{ font-weight:600; }
.banner-demo-texto{ opacity:.8; overflow:hidden; text-overflow:ellipsis; }
.banner-demo-btn{
  flex-shrink:0;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:#FFFFFF;
  text-decoration:underline;
  text-underline-offset:2px;
}
.banner-demo-btn:focus-visible{ outline-color:#FFFFFF; }
@media (max-width: 767px){
  .banner-demo-texto{ display:none; }
}

/* =========================== Cargando / vacío / error =========================== */
.spinner{
  display:inline-block;
  width:20px;
  height:20px;
  border:2px solid var(--line);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:flotsGiro .8s linear infinite;
}
.cargando{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:64px 20px;
  font-size:15px;
  color:var(--muted);
  animation:flotsFade .3s ease-out .15s both;
}
.cargando-pantalla{ min-height:60vh; }

.vacio{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:40px 24px;
  text-align:center;
  color:var(--muted);
}
.vacio-titulo{ margin:0; font-size:18px; font-weight:500; color:var(--ink); }
.vacio-texto{ max-width:420px; font-size:15px; line-height:1.5; }
.vacio .btn{ margin-top:8px; }

.error-caja{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:20px 24px;
  background:var(--surface);
  border-left:4px solid var(--danger);
}
.error-caja-titulo{ margin:0; font-size:16px; font-weight:600; }
.error-caja-texto{ margin:0; font-size:15px; line-height:1.5; color:var(--text-body); }

.pagina-error{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  padding-top:clamp(40px, 8vw, 96px);
  padding-bottom:clamp(40px, 8vw, 96px);
}
.pagina-error-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }

/* Páginas provisorias ("Pantalla en construcción") */
.provisorio{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding-top:24px;
  padding-bottom:64px;
}
.provisorio-texto{ font-size:18px; color:var(--muted); }