/* ============================================================
 * Ejercicio 2 — Identidad visual adaptable (librería)
 * Hoja única: css/estilos.css · Sin CDN, sin libs, sin inline.
 * Paleta aprobada + tipografía del sistema. file:// directo.
 * ============================================================ */

/* ---------- 1. Variables / paleta ---------- */
:root {
  --fondo: #F6F1E7;
  --superficie: #FFFFFF;
  --primario: #1E3A5F;
  --acento: #B4552D;
  --texto: #1A1A1A;
  --texto-secundario: #4A4A4A;
  --borde: #D8CFC0;
  --exito: #1E7A34;
  --error: #B3261E;
  --foco: #005FCC;
}

/* ---------- 2. Base ---------- */
* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0 0 2rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto);
  background-color: var(--fondo);
}

h1 {
  font-size: 2rem;
  line-height: 1.25;
  color: var(--primario);
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--primario);
  margin: 0 0 0.75rem;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--primario);
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

small,
.texto-pequeno,
caption,
.ayuda {
  font-size: 0.875rem;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- 3. Estructura / layout ---------- */
main {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1rem;
}

header,
footer {
  padding: 1rem;
}

/* ---------- 4. Cabecera, navegación y pie ---------- */
header {
  background-color: var(--primario);
  color: #FFFFFF;
  border-bottom: 0.25rem solid var(--acento);
}

header h1 {
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

header p {
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}

nav ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

nav a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  color: #FFFFFF;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
}

nav a.activo {
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2rem;
}

footer {
  margin-top: 2rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-secundario);
  background-color: var(--superficie);
}

footer p {
  margin-bottom: 0.5rem;
}

/* ---------- 5. Tarjetas / secciones ---------- */
section,
fieldset.tarjeta,
.tarjeta {
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 1px 3px rgba(30, 58, 95, 0.08);
}

section > section {
  box-shadow: none;
  margin-bottom: 1rem;
}

#historial-detalle,
#venta-resumen {
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* ---------- 6. Formularios ---------- */
.formulario,
form {
  margin: 0 0 1rem;
}

.campo {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--texto);
}

input,
select,
textarea {
  font: inherit;
  color: var(--texto);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin: 0;
  width: 100%;
  max-width: 28rem;
  display: block;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

select[multiple] {
  min-height: 6rem;
  height: auto;
}

fieldset {
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem 1.25rem;
  margin: 0 0 1.5rem;
  min-width: 0;
}

legend {
  font-weight: 700;
  color: var(--primario);
  padding: 0 0.5rem;
}

/* ---------- 7. Botones ---------- */
button,
.boton {
  font: inherit;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
  margin: 0.25rem 0.5rem 0.25rem 0;
}

button[type="submit"],
.boton {
  background-color: var(--primario);
  border-color: var(--primario);
  color: #FFFFFF;
}

button[type="submit"]:hover,
.boton:hover {
  background-color: var(--acento);
  border-color: var(--acento);
  color: #FFFFFF;
}

button[type="button"],
.boton-secundario {
  background-color: var(--superficie);
  border: 1px solid var(--primario);
  color: var(--primario);
}

button[type="button"]:hover,
.boton-secundario:hover {
  background-color: var(--primario);
  color: #FFFFFF;
}

/* ---------- 8. Tablas y listados ---------- */
.tabla-contenedor {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  background-color: var(--superficie);
  margin-bottom: 1.5rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background-color: var(--superficie);
}

caption {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--texto-secundario);
}

th,
td {
  border: 1px solid var(--borde);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

thead th {
  background-color: var(--primario);
  color: #FFFFFF;
  border-color: var(--primario);
}

tbody tr:nth-child(even) {
  background-color: var(--fondo);
}

/* ---------- 9. Mensajes de estado y vacíos ---------- */
.mensaje-ok,
.mensaje-error,
#msg-ok,
#msg-error,
#catalogo-mensaje,
#catalogo-vacio,
#libros-vacio,
#clientes-vacio,
#venta-renglones-vacio,
#historial-vacio {
  border: 1px solid;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-weight: 600;
}

.mensaje-ok,
#msg-ok {
  border-color: var(--exito);
  background-color: #EAF5ED;
  color: var(--exito);
}

.mensaje-error,
#msg-error {
  border-color: var(--error);
  background-color: #FBECEB;
  color: var(--error);
}

.mensaje-ok::before,
#msg-ok::before {
  content: "✓ ";
}

.mensaje-error::before,
#msg-error::before {
  content: "✕ ";
}

#catalogo-mensaje,
#catalogo-vacio,
#libros-vacio,
#clientes-vacio,
#venta-renglones-vacio,
#historial-vacio {
  border-color: var(--borde);
  background-color: var(--superficie);
  color: var(--texto-secundario);
  font-weight: 400;
}

/* ---------- 10. Foco visible por teclado ---------- */
/* Foco visible por teclado: no se oculta en ningún caso. */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
}

/* ---------- 11. Adaptable / responsive ---------- */
/* Base móvil: apilado a 320 px (formularios, nav y tarjetas). */
@media (max-width: 47.99rem) {
  nav ul {
    flex-direction: column;
    gap: 0;
  }

  nav a {
    display: block;
    width: 100%;
  }

  section,
  fieldset,
  .tarjeta {
    padding: 1rem;
  }

  button,
  .boton,
  button[type="button"],
  .boton-secundario {
    width: 100%;
    text-align: center;
  }
}

/* Pantallas medianas y grandes: dos columnas con Grid/Flex. */
@media (min-width: 48rem) {
  /* Buscador en fila: etiqueta arriba, campo flexible + botón al lado. */
  #form-buscador {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem 1rem;
  }

  #form-buscador label {
    flex: 1 1 100%;
  }

  #form-buscador input[type="search"] {
    flex: 1 1 16rem;
    min-width: 0;
  }

  #form-buscador button[type="submit"] {
    flex: 0 0 auto;
  }

  /* Utilidades reutilizables de dos columnas (Grid/Flex). */
  .formulario-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
  }

  .listado-dos-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .listado-dos-columnas > * {
    flex: 1 1 20rem;
    min-width: 0;
  }

  section,
  fieldset.tarjeta,
  .tarjeta {
    padding: 1.5rem;
  }
}

/* ---------- 12. Integración con la API: estados y paginación ---------- */
/* Estados diferenciados del mensaje del catálogo (cargando / informativo / error). */
#catalogo-mensaje.estado-cargando {
  border-color: var(--borde);
  background-color: var(--superficie);
  color: var(--texto-secundario);
  font-weight: 400;
  font-style: italic;
}

#catalogo-mensaje.estado-error {
  border-color: var(--error);
  background-color: #FBECEB;
  color: var(--error);
  font-weight: 600;
}

/* Controles de paginación (Anterior / Página N / Siguiente). */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.paginacion button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Lista de autorías del formulario de alta de libro. */
#libro-autorias {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

#libro-autorias li {
  margin-bottom: 0.25rem;
}