/* Estilos de la estructura y de los componentes comunes. Solo usa las variables de variables.css. */
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body {
  font-family: var(--fuente);
  font-size: var(--tamano-base);
  color: var(--color-texto);
  background: var(--color-fondo);
}
h1 { font-size: var(--tamano-titulo); margin: 0 0 var(--espacio-m); }
h2 { font-size: 17px; margin: var(--espacio-l) 0 var(--espacio-s); }
a { color: var(--color-primario); }
.mensaje { padding: var(--espacio-l); color: var(--color-texto-suave); }
.error { color: var(--color-error); }
[hidden] { display: none !important; }

/* Botones */
.btn {
  font: inherit; padding: 6px 14px; border-radius: var(--radio); cursor: pointer;
  border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto);
}
.btn:hover:not(:disabled) { border-color: var(--color-primario); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primario { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-primario-texto); }
.btn-icono { font-size: 20px; background: none; border: none; cursor: pointer; padding: 6px 10px; color: inherit; }

/* Acceso */
.acceso { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--espacio-m); }
.acceso-caja {
  width: 100%; max-width: 380px; background: var(--color-superficie); padding: var(--espacio-l);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.acceso-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--espacio-m); }
.acceso form { display: flex; flex-direction: column; gap: var(--espacio-s); }
.acceso input { font: inherit; padding: 8px; border: 1px solid var(--color-borde); border-radius: var(--radio); }
.acceso .btn-primario { margin-top: var(--espacio-s); }

/* Estructura */
.estructura { display: flex; flex-direction: column; height: 100%; }
.cabecera {
  height: var(--alto-cabecera); flex: none; display: flex; align-items: center; gap: var(--espacio-s);
  padding: 0 var(--espacio-m); background: var(--color-superficie); border-bottom: 1px solid var(--color-borde);
}
.marca { font-weight: 600; text-decoration: none; color: var(--color-texto); }
.cabecera-derecha { margin-left: auto; display: flex; align-items: center; gap: var(--espacio-s); }
.usuario { color: var(--color-texto-suave); font-size: var(--tamano-pequeno); }
.selector-idioma { font: inherit; font-size: var(--tamano-pequeno); padding: 3px; }
.indicador-tiempo-real {
  font-size: var(--tamano-pequeno); color: var(--color-aviso); background: var(--color-aviso-suave);
  padding: 2px 8px; border-radius: var(--radio);
}
.cuerpo { flex: 1; display: flex; min-height: 0; position: relative; }
.menu {
  width: var(--ancho-menu); flex: none; background: var(--color-superficie); border-right: 1px solid var(--color-borde);
  padding: var(--espacio-s) 0; overflow-y: auto;
}
.menu-enlace { display: block; padding: 10px var(--espacio-m); color: var(--color-texto); text-decoration: none; }
.menu-enlace:hover { background: var(--color-primario-suave); }
.menu-enlace.activo { background: var(--color-primario-suave); color: var(--color-primario); font-weight: 600; }
.menu-oculto .menu { display: none; }
.menu-fondo { display: none; }
.contenido { flex: 1; overflow: auto; padding: var(--espacio-l); outline: none; }

/* Pantallas estrechas: el menú se superpone y está oculto por defecto */
@media (max-width: 899px) {
  .menu { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; box-shadow: var(--sombra); }
  .estructura:not(.menu-oculto) .menu-fondo {
    display: block; position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.25);
  }
  .contenido { padding: var(--espacio-m); }
  .usuario { display: none; }
  .indicador-tiempo-real .texto-largo { display: none; }
}

/* Listados */
.lista-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-m); }
.lista-acciones { display: flex; gap: var(--espacio-s); }
.lista-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-m); margin-bottom: var(--espacio-m); }
.lista-buscar { font: inherit; padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio); min-width: 220px; }
.lista-filtro { font-size: var(--tamano-pequeno); color: var(--color-texto-suave); }
.lista-filtro select { font: inherit; padding: 4px; }
.lista-contador { margin-left: auto; font-size: var(--tamano-pequeno); color: var(--color-texto-suave); }
.tabla-envoltorio { overflow-x: auto; background: var(--color-superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-borde); white-space: nowrap; }
.tabla th { font-size: var(--tamano-pequeno); color: var(--color-texto-suave); font-weight: 600; }
.tabla th.ordenable { cursor: pointer; }
.tabla tr.pulsable { cursor: pointer; }
.tabla tr.pulsable:hover, .tabla tr.pulsable:focus { background: var(--color-primario-suave); outline: none; }
.tabla td.vacio { text-align: center; color: var(--color-texto-suave); }
.tabla tr.fila-error td { color: var(--color-error); }

/* Ficha */
.migas { margin: 0 0 var(--espacio-s); }
.ficha-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-m); flex-wrap: wrap; }
.ficha-botones { display: flex; gap: var(--espacio-s); }
.ficha-mensajes { margin-bottom: var(--espacio-m); }
.mensaje-ficha { padding: var(--espacio-s) var(--espacio-m); border-radius: var(--radio); margin-bottom: var(--espacio-s); }
.mensaje-ficha.info { background: var(--color-primario-suave); }
.mensaje-ficha.error { background: var(--color-error-suave); color: var(--color-error); }
.mensaje-ficha.aviso-ficha { background: var(--color-aviso-suave); color: var(--color-aviso); }
.ficha-seccion {
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
  margin: 0 0 var(--espacio-m); padding: var(--espacio-m);
}
.ficha-seccion legend { font-weight: 600; padding: 0 var(--espacio-xs); }
.ficha-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espacio-m); }
.ficha-campo label { display: flex; align-items: center; gap: var(--espacio-s); font-size: var(--tamano-pequeno); color: var(--color-texto-suave); margin-bottom: var(--espacio-xs); }
.ficha-valor { padding: 6px 8px; min-height: 34px; border-radius: var(--radio); background: var(--color-fondo); white-space: pre-wrap; }
.ficha-campo.externo .ficha-valor { background: var(--color-externo); }
.ficha-campo input, .ficha-campo textarea {
  font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--color-primario); border-radius: var(--radio); background: var(--color-superficie);
}
.origen {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 10px;
  color: var(--color-etiqueta-origen); border: 1px solid var(--color-etiqueta-origen);
}

/* Avisos y ventanas */
#avisos { position: fixed; right: var(--espacio-m); bottom: var(--espacio-m); display: flex; flex-direction: column; gap: var(--espacio-s); z-index: 50; }
.aviso { padding: 10px 14px; border-radius: var(--radio); box-shadow: var(--sombra); background: var(--color-superficie); max-width: 380px; }
.aviso-ok { border-left: 4px solid var(--color-ok); }
.aviso-error { border-left: 4px solid var(--color-error); }
.aviso-info { border-left: 4px solid var(--color-primario); }
.modal-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 60; padding: var(--espacio-m); }
.modal { background: var(--color-superficie); padding: var(--espacio-l); border-radius: var(--radio); max-width: 420px; box-shadow: var(--sombra); }
.modal-botones { display: flex; justify-content: flex-end; gap: var(--espacio-s); margin-top: var(--espacio-m); }