/* Base: reinicio, tipografía, barra superior y estructura general.
   Todos los colores y medidas salen de tokens.css (variables --mp-…). */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--mp-color-bg);
  color: var(--mp-color-text);
  font-family: var(--mp-font-sans);
  font-size: var(--mp-font-size-md);
  line-height: var(--mp-line-height-md);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
html.sin-scroll { overflow: hidden; }

body { margin: 0; min-height: 100vh; background: var(--mp-color-bg); }

h1, h2, h3, h4, p { margin: 0; }
a { color: var(--mp-color-primary-text); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
code, pre, .mono { font-family: var(--mp-font-mono); }
code { font-size: .92em; background: var(--mp-color-surface-sunken); padding: 1px 5px; border-radius: var(--mp-radius-xs); margin-right: 4px; }

/* Anillo de foco solo con teclado (guía, apartado 2). */
:focus { outline: none; }
:focus-visible { box-shadow: var(--mp-shadow-focus); border-radius: var(--mp-radius-sm); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-secundario { color: var(--mp-color-text-secondary); }
.texto-terciario { color: var(--mp-color-text-tertiary); font-size: var(--mp-font-size-sm); }

/* Enlace "Saltar al contenido" para quien navega con teclado. */
.saltar { position: absolute; left: 8px; top: -60px; z-index: var(--mp-z-toast); background: var(--mp-color-primary); color: var(--mp-color-on-primary); padding: 8px 12px; border-radius: var(--mp-radius-md); }
.saltar:focus { top: 8px; }

/* Logotipo: se ve el del tema activo. */
.logo--claro { display: none; }
[data-theme="light"] .logo--claro { display: block; }
[data-theme="light"] .logo--oscuro { display: none; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: var(--mp-z-sticky);
  height: var(--mp-topbar-height);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--mp-space-4);
  background: var(--mp-color-surface);
  border-bottom: 1px solid var(--mp-color-border);
}
.barra__logo { display: flex; align-items: center; flex: none; border-radius: var(--mp-radius-md); }
.barra__logo:hover { text-decoration: none; }
.barra__logo svg.logo { width: 172px; height: auto; }
.barra__logo .logo-simbolo { display: none; }
.barra__ruta { display: none; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--mp-color-text-secondary); }
.barra__ruta a { color: var(--mp-color-text-secondary); white-space: nowrap; }
.barra__separador { color: var(--mp-color-border-strong); }
.barra__actual { color: var(--mp-color-text); font-weight: var(--mp-font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__hueco { flex: 1; }
.barra__acciones { display: flex; align-items: center; gap: 4px; }
.barra__enlace {
  height: 36px; padding: 0 12px; border-radius: var(--mp-radius-md);
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: var(--mp-font-weight-medium); color: var(--mp-color-text);
}
@media (hover: hover) { .barra__enlace:hover { background: var(--mp-color-surface-hover); text-decoration: none; } }
.barra .barra__biblioteca, .barra .barra__ajustes, .barra .barra__tema { display: none; }

.pildora-conexion {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--mp-radius-full); font-size: 12.5px; font-weight: var(--mp-font-weight-semibold); white-space: nowrap;
}
.pildora-conexion:hover { text-decoration: none; }
.pildora-conexion__largo { display: none; }

/* Móvil: símbolo en lugar del logotipo completo y menú. */
@media (max-width: 767px) {
  .barra { gap: 8px; }
  .barra__logo svg.logo { display: none !important; }
  .barra__logo .logo-simbolo.logo--oscuro { display: block; }
  [data-theme="light"] .barra__logo .logo-simbolo.logo--oscuro { display: none; }
  [data-theme="light"] .barra__logo .logo-simbolo.logo--claro { display: block; }
  .barra__menu { margin-right: -8px; }
}
/* Tableta: Biblioteca solo como icono, sin ruta. */
@media (min-width: 768px) {
  .barra { padding: 0 var(--mp-space-5); }
  .barra .barra__biblioteca, .barra .barra__ajustes, .barra .barra__tema { display: flex; }
  .barra .barra__menu { display: none; }
  .barra__enlace-texto { display: none; }
  .barra__biblioteca { width: 40px; padding: 0; justify-content: center; }
  .pildora-conexion__largo { display: inline; }
  .pildora-conexion__corto { display: none; }
}
@media (min-width: 1200px) {
  .barra__ruta { display: flex; }
  .barra__enlace-texto { display: inline; }
  .barra__biblioteca { width: auto; padding: 0 12px; }
}

/* Banda de modo demostración / sin conexión. */
.banda { border-bottom: 1px solid; font-size: 13.5px; }
.banda--aviso { background: var(--mp-color-warning-soft); border-color: var(--mp-color-warning); }
.banda--error { background: var(--mp-color-error-soft); border-color: var(--mp-color-error); }
.banda__dentro { max-width: var(--mp-content-max); margin: 0 auto; padding: 9px var(--mp-space-4); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banda--aviso .icono, .banda--aviso b { color: var(--mp-color-warning-text); }
.banda--error .icono, .banda--error b { color: var(--mp-color-error-text); }
.banda__enlace { margin-left: auto; font-weight: var(--mp-font-weight-semibold); }

/* ---------- Pantallas ---------- */
main { outline: none; }
.pantalla {
  max-width: var(--mp-content-max); margin: 0 auto;
  padding: var(--mp-space-6) var(--mp-space-4) var(--mp-space-16);
  display: flex; flex-direction: column; gap: var(--mp-space-6);
}
@media (min-width: 768px) { .pantalla { padding: var(--mp-space-8) var(--mp-space-6) var(--mp-space-16); } .banda__dentro { padding: 9px var(--mp-space-6); } }
@media (min-width: 1200px) { .pantalla { padding: var(--mp-space-10) var(--mp-space-8) var(--mp-space-16); gap: 28px; } .banda__dentro { padding: 9px var(--mp-space-8); } }

.cabecera-pantalla { display: flex; align-items: flex-end; gap: var(--mp-space-4); flex-wrap: wrap; }
.cabecera-pantalla > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.titulo-pantalla { font-size: var(--mp-font-size-3xl); line-height: var(--mp-line-height-3xl); font-weight: var(--mp-font-weight-semibold); letter-spacing: -0.03em; }
@media (min-width: 1200px) { .titulo-pantalla { font-size: var(--mp-font-size-4xl); line-height: var(--mp-line-height-4xl); } }
.cabecera-pantalla__resumen { color: var(--mp-color-text-secondary); }
.cabecera-pantalla__acciones { display: flex; gap: var(--mp-space-2); flex-wrap: wrap; }
@media (max-width: 767px) {
  .cabecera-pantalla { flex-direction: column; align-items: stretch; }
  .cabecera-pantalla__acciones > .btn--principal { flex: 1; }
}

.pila-campos { display: flex; flex-direction: column; gap: var(--mp-space-4); }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--mp-space-4); align-items: end; }
.fila-acciones { display: flex; gap: var(--mp-space-2); flex-wrap: wrap; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}