.tarjeta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

.libro__lomo {
  height: 0.4rem;
  background-image: linear-gradient(90deg, var(--color-primario) 0%, var(--color-primario) 55%, var(--color-acento) 100%);
}

.libro__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}

.libro__titulo {
  font-size: 1.15rem;
}

.libro__datos {
  display: grid;
  gap: var(--espacio-2);
  font-size: 0.88rem;
}

.libro__datos > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--espacio-2);
}

.libro__datos dt {
  padding-top: 0.18rem;
  color: var(--color-tinta-suave);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.libro__datos dd {
  overflow-wrap: anywhere;
}

.libro__precio {
  margin-top: auto;
  padding-top: var(--espacio-2);
  border-top: 1px solid var(--color-borde-suave);
  color: var(--color-primario-oscuro);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.insignia {
  align-self: flex-start;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radio-pastilla);
  background-color: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insignia--sin {
  background-color: var(--color-superficie-alt);
  color: var(--color-tinta-suave);
}

.formulario,
.panel,
.resumen {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra);
}

.panel,
.resumen {
  gap: var(--espacio-3);
}

.formulario__titulo,
.panel__titulo,
.resumen__titulo {
  font-size: 1.25rem;
}

.formulario__subtitulo {
  font-size: 1rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  min-width: 0;
}

.campo__etiqueta {
  font-size: 0.95rem;
  font-weight: 600;
}

.campo__obligatorio {
  color: var(--color-tinta-suave);
  font-size: 0.85rem;
  font-weight: 400;
}

.campo__control {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background-color: var(--color-control);
  color: var(--color-tinta);
}

.campo__control:hover {
  border-color: var(--color-tinta-suave);
}

.campo__control:focus {
  border-color: var(--color-foco);
}

.campo__ayuda {
  color: var(--color-tinta-suave);
  font-size: 0.83rem;
}

.campo__error {
  color: var(--color-error-oscuro);
  font-size: 0.86rem;
  font-weight: 600;
}

.campo__control[aria-invalid="true"],
.campo__control[aria-invalid="true"]:hover,
.campo__control[aria-invalid="true"]:focus,
.campo--grupo[aria-invalid="true"] {
  border-color: var(--color-error);
}

.campo--grupo .campo__error {
  margin-top: var(--espacio-2);
}

.campo--grupo {
  display: block;
  padding: var(--espacio-3);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-chico);
  margin: 0;
}

.campo--grupo .campo__etiqueta {
  padding-inline: var(--espacio-1);
}

.opciones {
  display: grid;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  font-size: 0.95rem;
}

.opcion input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primario);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding: 0.6rem 1.1rem;
  border: 1.5px solid transparent;
  border-radius: var(--radio-pastilla);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.boton:active {
  transform: translateY(1px);
}

.boton--primario {
  background-color: var(--color-primario);
  color: var(--color-texto-inverso);
}

.boton--primario:hover {
  background-color: var(--color-primario-oscuro);
  color: var(--color-texto-inverso);
}

.boton--secundario {
  border-color: var(--color-primario);
  background-color: transparent;
  color: var(--color-primario-oscuro);
}

.boton--secundario:hover {
  background-color: var(--color-primario-suave);
  color: var(--color-primario-oscuro);
}

.boton--peligro {
  border-color: var(--color-error);
  background-color: transparent;
  color: var(--color-error-oscuro);
}

.boton--peligro:hover {
  background-color: var(--color-error-suave);
  color: var(--color-error-oscuro);
}

.boton--chico {
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

.boton--bloque {
  width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.mensaje {
  padding: var(--espacio-3) var(--espacio-4);
  border-left: 4px solid var(--color-borde);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background-color: var(--color-superficie-alt);
  font-size: 0.92rem;
}

.mensaje--error {
  border-left-color: var(--color-error);
  background-color: var(--color-error-suave);
  color: var(--color-error-oscuro);
}

.mensaje--exito {
  border-left-color: var(--color-exito);
  background-color: var(--color-exito-suave);
  color: var(--color-exito-oscuro);
}

.mensaje--aviso {
  border-left-color: var(--color-acento);
  background-color: var(--color-acento-suave);
  color: var(--color-aviso-oscuro);
}

.mensaje--vacio {
  border: 1px dashed var(--color-borde);
  background-color: transparent;
  color: var(--color-tinta-suave);
  text-align: center;
}

.tabla {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla--angosta {
  min-width: 0;
}

.tabla__email {
  overflow-wrap: anywhere;
}

.tabla__titulo {
  padding: var(--espacio-3) var(--espacio-4);
  caption-side: top;
  color: var(--color-tinta);
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}

.tabla th,
.tabla td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-borde-suave);
  text-align: left;
  vertical-align: top;
}

.tabla thead th {
  background-color: var(--color-superficie-alt);
  color: var(--color-tinta-suave);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabla tbody tr:nth-child(even) {
  background-color: var(--color-superficie-alterna);
}

.tabla tbody tr:hover {
  background-color: var(--color-primario-suave);
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-bottom: 0;
}

.tabla .tabla__numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.tabla__cantidad {
  width: 5.5rem;
  min-width: 0;
  padding: 0.35rem 0.5rem;
}

.resumen__lista {
  display: grid;
  gap: 0;
}

.resumen__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-block: var(--espacio-2);
  border-bottom: 1px dashed var(--color-borde-suave);
}

.resumen__fila dt {
  color: var(--color-tinta-suave);
}

.resumen__fila dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.resumen__fila--total {
  margin-top: var(--espacio-1);
  padding-top: var(--espacio-3);
  border-top: 2px solid var(--color-tinta);
  border-bottom: 0;
  font-size: 1.15rem;
}

.resumen__fila--total dt,
.resumen__fila--total dd {
  color: var(--color-tinta);
  font-weight: 700;
}

.detalle {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-borde-suave);
  border-left: 4px solid var(--color-acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  background-color: var(--color-superficie);
  box-shadow: var(--sombra);
}

.detalle__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin-bottom: var(--espacio-3);
}

.detalle__meta {
  color: var(--color-tinta-suave);
  font-size: 0.9rem;
}

.detalle__total {
  margin-top: var(--espacio-3);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}