/* ==========================================================================
   CooperApp · Estilo C «Bento» — BASE
   Reinicio, tipografía, armazón de página, cabecera, avisos y accesibilidad.
   Depende de tokens.css. No define ningún componente: eso es components.css.
   ========================================================================== */

/* ---- Reinicio ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:100%;-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.5;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;text-align:inherit}
button:disabled{cursor:not-allowed}
table{border-collapse:collapse;width:100%}
ul,ol{list-style:none}

a{color:var(--acento);text-decoration:none;transition:color var(--micro)}
a:hover{color:var(--acento-2)}

/* ---- Tipografía ---------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:var(--peso-fuerte);line-height:1.28;letter-spacing:-.02em}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-l)}
h3{font-size:var(--t-m)}
h4,h5,h6{font-size:var(--t-base)}
p{margin:0}
strong,b{font-weight:var(--peso-fuerte)}
small{font-size:var(--t-s)}
code,kbd,samp{font-family:var(--mono);font-size:.92em}

/* Cifra: monoespaciada y con dígitos de ancho fijo, para que los importes de
   una columna queden alineados sin depender de la fuente del sistema. */
.cifra,.imp{font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}

/* Etiqueta funcional: rótulos de indicador, cabeceras de tabla, metadatos. */
.eti-mono{font-family:var(--mono);font-size:var(--t-eti);letter-spacing:var(--track-eti);
  text-transform:uppercase;font-weight:var(--peso-medio);color:var(--texto-3)}

.txt-2{color:var(--texto-2)}
.txt-3,.text-muted{color:var(--texto-3)}
.txt-ok{color:var(--ok)}
.txt-avisa{color:var(--avisa)}
.txt-mal{color:var(--mal)}
.txt-acento{color:var(--acento)}

/* ---- Armazón de página --------------------------------------------------- */
.lienzo,.container{
  width:100%;
  max-width:var(--ancho-max);
  margin:0 auto;
  padding:var(--esp-2) var(--esp-5) var(--esp-8);
}

/* Cabecera de sección: título a la izquierda, acciones a la derecha. */
.pagina-cab,.page-header{
  display:flex;align-items:flex-end;gap:var(--esp-4);flex-wrap:wrap;
  margin:var(--esp-4) 0 var(--esp-5);
}
.pagina-cab h1,.page-header h1{font-size:var(--t-2xl);letter-spacing:-.03em}
.pagina-cab p{color:var(--texto-3);font-size:var(--t-s);padding-bottom:3px}
.pagina-cab .acciones,.page-header .header-actions{
  margin-left:auto;display:flex;gap:var(--esp-2);flex-wrap:wrap;align-items:center;
}
/* Red de seguridad para las cabeceras que aún cuelgan el botón directamente
   del contenedor, sin envolverlo en .acciones. */
.pagina-cab > .btn:last-child,.page-header > .btn:last-child,
.pagina-cab > a.btn:last-child,.page-header > a.btn:last-child{margin-left:auto}

/* ---- Cabecera flotante --------------------------------------------------- */
.cab{
  position:sticky;top:0;z-index:var(--z-cab);
  padding:var(--esp-3) var(--esp-5);
  background:linear-gradient(to bottom,var(--fondo) 64%,transparent);
}
.cab-in{
  max-width:var(--ancho-max);margin:0 auto;
  display:flex;align-items:center;gap:var(--esp-4);
}
.marca{display:flex;align-items:center;gap:var(--esp-2);padding-right:var(--esp-2);
  color:var(--texto)}
.marca:hover{color:var(--texto)}
.marca-sig{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--acento),var(--acento-2));
  color:var(--acento-solido-txt);font-weight:700;font-size:13px;
}
.marca b{font-size:var(--t-m);font-weight:var(--peso-fuerte);letter-spacing:-.02em;
  white-space:nowrap}

/* Navegación principal en cápsula */
.nav-pill{
  display:flex;gap:2px;background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-pill);padding:4px;box-shadow:var(--sombra);
  overflow-x:auto;scrollbar-width:none;
}
.nav-pill::-webkit-scrollbar{display:none}
.nav-pill a{
  padding:6px 15px;border-radius:var(--r-pill);font-size:var(--t-s);
  color:var(--texto-2);white-space:nowrap;transition:background var(--micro),color var(--micro);
}
.nav-pill a:hover{color:var(--texto);background:var(--sup-2)}
.nav-pill a.act,.nav-pill a[aria-current="page"]{
  background:var(--acento-suave);color:var(--acento);font-weight:var(--peso-fuerte);
}
.cab-der{margin-left:auto;display:flex;align-items:center;gap:var(--esp-2)}

/* Menú de usuario (el comportamiento lo lleva app.js con .open) */
.user-menu{position:relative}
.user-menu-btn{
  display:flex;align-items:center;gap:var(--esp-2);padding:5px 10px 5px 5px;
  border-radius:var(--r-pill);background:var(--sup);border:1px solid var(--borde);
  box-shadow:var(--sombra);color:var(--texto-2);font-size:var(--t-s);
}
.user-menu-btn:hover{border-color:var(--borde-2);color:var(--texto)}
.user-avatar,.av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acento),var(--acento-2));
  color:var(--acento-solido-txt);font-size:var(--t-xs);font-weight:var(--peso-fuerte);
  text-transform:uppercase;
}
.user-name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chevron{display:flex;color:var(--texto-3);transition:transform var(--micro)}
.user-menu.open .user-chevron{transform:rotate(180deg)}
.user-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);min-width:250px;
  background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-s);
  box-shadow:var(--sombra-alta);padding:var(--esp-2);z-index:var(--z-menu);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--micro),transform var(--micro),visibility var(--micro);
}
.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:none}
.user-dropdown-header{padding:var(--esp-2) var(--esp-3) var(--esp-3);
  display:flex;flex-direction:column;gap:3px}
.user-dropdown-header strong{font-size:var(--t-base)}
.user-dropdown-header small{color:var(--texto-3);word-break:break-all}
.user-dropdown-divider{height:1px;background:var(--borde);margin:var(--esp-1) 0}
.user-dropdown-item{
  display:block;width:100%;padding:8px var(--esp-3);border-radius:var(--r-xs);
  font-size:var(--t-s);color:var(--texto-2);
}
.user-dropdown-item:hover{background:var(--sup-2);color:var(--texto)}
.user-dropdown-logout{color:var(--mal)}
.user-dropdown-logout:hover{background:var(--mal-bg);color:var(--mal)}

/* Cabecera del portal de contraparte: añade el nombre del proyecto, que es el
   contexto que la contraparte necesita ver siempre. */
.cab--contraparte .cab-proyecto{
  display:flex;flex-direction:column;gap:1px;min-width:0;margin-left:var(--esp-2);
}
.cab--contraparte .cab-proyecto b{font-size:var(--t-s);font-weight:var(--peso-medio)}
.cab--contraparte .cab-der{gap:var(--esp-3)}
@media (max-width:900px){
  .cab--contraparte .cab-proyecto{display:none}
}

/* ---- Armazón sin sesión (acceso, cuenta pendiente, sin permisos) ---------- */
.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--esp-5);
  background:
    radial-gradient(60ch 40ch at 15% -10%, var(--acento-suave), transparent 70%),
    radial-gradient(50ch 34ch at 100% 110%, var(--acento-suave), transparent 70%),
    var(--fondo);
}
.auth-container{width:100%;max-width:420px}
.auth-tema{position:fixed;top:var(--esp-4);right:var(--esp-4);z-index:var(--z-cab)}

/* ---- Foco ----------------------------------------------------------------
   Un único anillo para toda la aplicación. Nunca se retira el outline sin
   sustituirlo: el anillo tiene que verse sobre cualquier superficie. */
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible){outline:none}

/* Enlace de salto al contenido */
.salto-al-contenido{
  position:absolute;left:var(--esp-3);top:-100px;z-index:var(--z-progreso);
  background:var(--sup);color:var(--texto);border:1px solid var(--borde-2);
  padding:10px var(--esp-4);border-radius:var(--r-s);box-shadow:var(--sombra-alta);
  font-size:var(--t-s);font-weight:var(--peso-medio);transition:top var(--micro);
}
.salto-al-contenido:focus{top:var(--esp-3);color:var(--texto)}

/* Solo para lectores de pantalla */
.solo-lectores,.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;
}

/* ---- Barra de progreso de htmx ------------------------------------------- */
.progreso{
  position:fixed;inset:0 auto auto 0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acento),var(--acento-2));
  z-index:var(--z-progreso);opacity:0;
  transition:transform .3s ease-out,opacity .2s;
}
.progreso--activo{opacity:1;transform:scaleX(.8);transition:transform 8s cubic-bezier(.1,.6,.3,1)}

/* Indicador en línea de htmx: se muestra solo mientras dura la petición. */
.htmx-indicator{opacity:0;transition:opacity var(--micro)}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

.spinner,.spinner-en-linea{
  display:inline-block;width:14px;height:14px;flex:none;
  border:2px solid var(--pista);border-top-color:var(--acento);border-radius:50%;
  animation:girar .7s linear infinite;vertical-align:-2px;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* Esqueleto de carga para contenido que aún no ha llegado */
.esqueleto,.loading-placeholder{
  background:linear-gradient(90deg,var(--sup-2) 25%,var(--sup-3) 37%,var(--sup-2) 63%);
  background-size:400% 100%;animation:brillo 1.4s ease infinite;
  border-radius:var(--r-xs);color:transparent;min-height:14px;
}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---- Avisos flotantes (los crea app.js) ---------------------------------- */
.notifications{
  position:fixed;right:var(--esp-4);bottom:var(--esp-4);z-index:var(--z-aviso);
  display:flex;flex-direction:column;gap:var(--esp-2);
  max-width:min(400px,calc(100vw - 32px));pointer-events:none;
}
.notification{
  pointer-events:auto;display:flex;align-items:flex-start;gap:var(--esp-3);
  background:var(--sup);border:1px solid var(--borde);border-left:3px solid var(--texto-3);
  border-radius:var(--r-s);box-shadow:var(--sombra-alta);
  padding:var(--esp-3) var(--esp-4);font-size:var(--t-s);color:var(--texto);
  animation:entrar-aviso .22s cubic-bezier(.2,.8,.3,1);
}
.notification.success{border-left-color:var(--ok)}
.notification.error{border-left-color:var(--mal)}
.notification.warning{border-left-color:var(--avisa)}
.notification.info{border-left-color:var(--info)}
.notification-text{flex:1;min-width:0}
.notification-close{
  flex:none;color:var(--texto-3);padding:2px 4px;border-radius:var(--r-xs);
  font-size:var(--t-l);line-height:1;
}
.notification-close:hover{color:var(--texto);background:var(--sup-2)}
@keyframes entrar-aviso{from{opacity:0;transform:translateY(10px)}}

/* ---- Movimiento reducido -------------------------------------------------
   Quien pide menos movimiento no debe ver spinners girando ni barras
   deslizándose: los estados siguen siendo visibles, pero quietos. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .progreso--activo{transform:scaleX(1)}
  .spinner,.spinner-en-linea{border-top-color:var(--acento);animation:none;
    border-right-color:var(--acento)}
}

/* ---- Impresión ------------------------------------------------------------ */
@media print{
  .cab,.notifications,.progreso,.salto-al-contenido,.acciones,
  .header-actions,.nav-pill,.user-menu{display:none!important}
  body{background:#fff;color:#000}
  .c,.tarjeta{border:1px solid #ccc;box-shadow:none;break-inside:avoid}
}

/* ---- Ajustes de ancho ---------------------------------------------------- */
@media (max-width:780px){
  .lienzo,.container{padding:var(--esp-2) var(--esp-3) var(--esp-8)}
  .cab{padding:var(--esp-2) var(--esp-3)}
  .cab-in{gap:var(--esp-2)}
  .marca b{display:none}
  .user-name{display:none}
  .notifications{right:var(--esp-2);left:var(--esp-2);bottom:var(--esp-2);max-width:none}
}