/* ==========================================================================
   Hugo Auto Sales — Panel administrativo
   Estilo SaaS minimalista. Sin frameworks CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --rojo: #e52129;
  --rojo-oscuro: #c4161d;
  --rojo-suave: rgba(229, 33, 41, 0.09);

  --fondo: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --borde: #e5e7eb;
  --borde-fuerte: #d5d8dd;

  --texto: #14161a;
  --texto-2: #5b6472;
  --texto-3: #8b94a3;

  --verde: #12a150;
  --verde-suave: rgba(18, 161, 80, 0.1);
  --ambar: #d97706;
  --ambar-suave: rgba(217, 119, 6, 0.11);
  --azul: #2563eb;
  --azul-suave: rgba(37, 99, 235, 0.1);
  --morado: #7c3aed;
  --morado-suave: rgba(124, 58, 237, 0.1);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  --sombra-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sombra-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sombra: 0 4px 12px rgba(16, 24, 40, 0.08);
  --sombra-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

  --sidebar-w: 258px;
  --sidebar-w-min: 76px;
  --topbar-h: 64px;

  --t: 0.18s ease;

  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

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

body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1, h2, h3, h4, h5 {
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.011em;
}

::selection {
  background: var(--rojo-suave);
}

.oculto {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Estructura
   -------------------------------------------------------------------------- */

.admin {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transition: width var(--t), transform var(--t);
}

.sidebar__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.sidebar__marca img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.sidebar__marca span {
  font-weight: 650;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}

.sidebar__nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 100px;
}

.sidebar__titulo {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 0 12px;
  margin: 20px 0 8px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar__titulo:first-child {
  margin-top: 0;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-2);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
  position: relative;
}

.sidebar__link i {
  font-size: 1.28rem;
  flex-shrink: 0;
}

.sidebar__link:hover {
  background: var(--panel-2);
  color: var(--texto);
}

.sidebar__link.is-activo {
  background: var(--rojo-suave);
  color: var(--rojo);
  font-weight: 600;
}

.sidebar__link .pill {
  margin-left: auto;
}

.sidebar__pie {
  padding: 14px 12px;
  border-top: 1px solid var(--borde);
  flex-shrink: 0;
}

.sidebar__usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  width: 100%;
  text-align: left;
  transition: background var(--t);
}

.sidebar__usuario:hover {
  background: var(--panel-2);
}

.sidebar__usuario div {
  min-width: 0;
  flex: 1;
}

.sidebar__usuario strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__usuario small {
  display: block;
  font-size: 0.75rem;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar colapsado. Solo existe en escritorio: por debajo de 1024px el menú
   es un cajón que entra y sale completo, y colapsarlo lo dejaría en un estado
   incoherente al recordar la preferencia guardada en localStorage. */
@media (min-width: 1025px) {
  body.sidebar-min .sidebar {
    width: var(--sidebar-w-min);
  }

  body.sidebar-min .sidebar__marca span,
  body.sidebar-min .sidebar__titulo,
  body.sidebar-min .sidebar__link span,
  body.sidebar-min .sidebar__link .pill,
  body.sidebar-min .sidebar__usuario div,
  body.sidebar-min .sidebar__usuario > i {
    display: none;
  }

  body.sidebar-min .sidebar__marca {
    justify-content: center;
    padding: 0;
  }

  body.sidebar-min .sidebar__link {
    justify-content: center;
    padding: 11px;
  }

  body.sidebar-min .sidebar__titulo {
    height: 12px;
    margin: 14px 0 4px;
  }

  body.sidebar-min .contenido {
    margin-left: var(--sidebar-w-min);
  }
}

/* ---------- Contenido ---------- */

.contenido {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin var(--t);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 26px;
}

.topbar__toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--texto-2);
  font-size: 1.3rem;
  transition: background var(--t), color var(--t);
}

.topbar__toggle:hover {
  background: var(--panel-2);
  color: var(--texto);
}

.topbar__titulo {
  min-width: 0;
}

.topbar__titulo h1 {
  font-size: 1.02rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__titulo p {
  font-size: 0.78rem;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__buscar {
  position: relative;
  width: 260px;
}

.topbar__buscar i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-3);
  font-size: 1.15rem;
  pointer-events: none;
}

.topbar__buscar input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  font-size: 0.87rem;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.topbar__buscar input:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.icono-accion {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto-2);
  font-size: 1.2rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.icono-accion:hover {
  background: var(--panel-2);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.icono-accion__punto {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rojo);
  border: 2px solid var(--panel);
}

.pagina {
  padding: 26px;
  flex: 1;
}

.pagina--angosta {
  max-width: 1080px;
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}

.btn i {
  font-size: 1.15rem;
}

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

.btn--rojo {
  background: var(--rojo);
  color: #fff;
  box-shadow: var(--sombra-xs);
}

.btn--rojo:hover {
  background: var(--rojo-oscuro);
}

.btn--linea {
  background: var(--panel);
  border-color: var(--borde);
  color: var(--texto);
}

.btn--linea:hover {
  background: var(--panel-2);
  border-color: var(--borde-fuerte);
}

.btn--fantasma {
  background: transparent;
  color: var(--texto-2);
}

.btn--fantasma:hover {
  background: var(--panel-2);
  color: var(--texto);
}

.btn--peligro {
  background: var(--panel);
  border-color: rgba(229, 33, 41, 0.3);
  color: var(--rojo);
}

.btn--peligro:hover {
  background: var(--rojo);
  color: #fff;
  border-color: var(--rojo);
}

.btn--sm {
  height: 34px;
  padding: 0 12px;
  font-size: 0.83rem;
}

.btn--sm i {
  font-size: 1.05rem;
}

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

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto-2);
  font-size: 1.15rem;
  transition: all var(--t);
}

.btn-icono:hover {
  background: var(--panel-2);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

.btn-icono--peligro:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Tarjetas y encabezados
   -------------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra-xs);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--borde);
}

.card__head h3 {
  font-size: 0.98rem;
}

.card__head p {
  font-size: 0.8rem;
  color: var(--texto-3);
  margin-top: 1px;
}

.card__head > div:first-child {
  min-width: 0;
}

.card__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card__cuerpo {
  padding: 22px;
}

.card__cuerpo--plano {
  padding: 0;
}

.card__pie {
  padding: 16px 22px;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-head h2 {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}

.page-head p {
  color: var(--texto-2);
  font-size: 0.88rem;
  margin-top: 3px;
}

.page-head__acciones {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   6. Métricas del dashboard
   -------------------------------------------------------------------------- */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.metrica {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sombra-xs);
  transition: box-shadow var(--t), transform var(--t);
}

.metrica:hover {
  box-shadow: var(--sombra-sm);
  transform: translateY(-1px);
}

.metrica__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.metrica__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.35rem;
  background: var(--rojo-suave);
  color: var(--rojo);
  flex-shrink: 0;
}

.metrica__icono--verde { background: var(--verde-suave); color: var(--verde); }
.metrica__icono--azul { background: var(--azul-suave); color: var(--azul); }
.metrica__icono--ambar { background: var(--ambar-suave); color: var(--ambar); }
.metrica__icono--morado { background: var(--morado-suave); color: var(--morado); }

.metrica__top span {
  font-size: 0.84rem;
  color: var(--texto-2);
  font-weight: 500;
}

.metrica__valor {
  font-size: 1.9rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1;
}

.metrica__pie {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.79rem;
  color: var(--texto-3);
}

.tendencia {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 0.75rem;
}

.tendencia--sube {
  background: var(--verde-suave);
  color: var(--verde);
}

.tendencia--baja {
  background: var(--rojo-suave);
  color: var(--rojo);
}

/* Rejillas del dashboard */
.grid-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  align-items: start;
}

/* Los items de una rejilla nacen con min-width:auto, así que su columna crece
   hasta el contenido más ancho que contengan. Sin esto, una tarjeta con tabla
   estira la rejilla entera —y con ella la página— en vez de dejar que la
   tabla scrollee dentro de su .tabla-wrap. */
.grid-2 > *,
.grid-3 > *,
.fila > *,
.metricas > * {
  min-width: 0;
}

.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-wrap--alto {
  height: 300px;
}

.chart-wrap--medio {
  height: 244px;
}

/* Lista de actividad */
.actividad {
  display: flex;
  flex-direction: column;
}

.actividad__item {
  display: flex;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--borde);
}

.actividad__item:last-child {
  border-bottom: none;
}

.actividad__icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--texto-2);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.actividad__item p {
  font-size: 0.87rem;
  line-height: 1.45;
}

.actividad__item small {
  font-size: 0.76rem;
  color: var(--texto-3);
}

/* Ranking simple */
.ranking {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ranking__fila small {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  margin-bottom: 7px;
}

.ranking__fila small strong {
  font-weight: 650;
}

.barra {
  height: 7px;
  border-radius: 100px;
  background: var(--panel-2);
  overflow: hidden;
}

.barra span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--rojo);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   7. Tablas
   -------------------------------------------------------------------------- */

.tabla-wrap {
  overflow-x: auto;
}

.tabla {
  min-width: 720px;
  font-size: 0.88rem;
}

.tabla thead th {
  text-align: left;
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 12px 22px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla tbody td {
  padding: 13px 22px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla tbody tr {
  transition: background var(--t);
}

.tabla tbody tr:hover {
  background: var(--panel-2);
}

.tabla__acciones {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.tabla th.col-acciones,
.tabla td.col-acciones {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.celda-auto {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.celda-auto img {
  width: 58px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  flex-shrink: 0;
}

.celda-auto strong {
  display: block;
  font-weight: 600;
  font-size: 0.89rem;
}

.celda-auto small {
  color: var(--texto-3);
  font-size: 0.78rem;
}

.celda-persona {
  display: flex;
  align-items: center;
  gap: 11px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rojo-suave);
  color: var(--rojo);
  font-weight: 650;
  font-size: 0.8rem;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--lg {
  width: 52px;
  height: 52px;
  font-size: 1rem;
}

.avatar--azul { background: var(--azul-suave); color: var(--azul); }
.avatar--verde { background: var(--verde-suave); color: var(--verde); }
.avatar--morado { background: var(--morado-suave); color: var(--morado); }
.avatar--ambar { background: var(--ambar-suave); color: var(--ambar); }

/* Chips de estado */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-2);
  color: var(--texto-2);
  border: 1px solid var(--borde);
}

.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill--sin-punto::before {
  display: none;
}

.pill--verde { background: var(--verde-suave); color: var(--verde); border-color: transparent; }
.pill--rojo { background: var(--rojo-suave); color: var(--rojo); border-color: transparent; }
.pill--ambar { background: var(--ambar-suave); color: var(--ambar); border-color: transparent; }
.pill--azul { background: var(--azul-suave); color: var(--azul); border-color: transparent; }
.pill--morado { background: var(--morado-suave); color: var(--morado); border-color: transparent; }

/* Barra de herramientas de tabla */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}

.toolbar__buscar {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}

.toolbar__buscar i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-3);
  font-size: 1.1rem;
  pointer-events: none;
}

.toolbar__buscar input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 37px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  font-size: 0.87rem;
  transition: border-color var(--t), box-shadow var(--t);
}

.toolbar__buscar input:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.toolbar select {
  height: 38px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'><path fill='%238b94a3' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66z'/></svg>") no-repeat right 9px center;
  font-size: 0.86rem;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--t);
}

.toolbar select:focus {
  outline: none;
  border-color: var(--rojo);
}

.toolbar__derecha {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Paginación */
.paginacion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--borde);
  flex-wrap: wrap;
}

.paginacion__info {
  font-size: 0.83rem;
  color: var(--texto-3);
  margin-right: auto;
}

.paginacion__btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--panel);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--texto-2);
  transition: all var(--t);
}

.paginacion__btn:hover:not(:disabled) {
  background: var(--panel-2);
  color: var(--texto);
}

.paginacion__btn.is-activo {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

.paginacion__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Estado vacío */
.vacio {
  text-align: center;
  padding: 60px 24px;
}

.vacio i {
  font-size: 2.8rem;
  color: var(--texto-3);
  display: block;
  margin-bottom: 12px;
}

.vacio h4 {
  margin-bottom: 5px;
}

.vacio p {
  color: var(--texto-2);
  font-size: 0.88rem;
  max-width: 340px;
  margin: 0 auto 18px;
}

/* --------------------------------------------------------------------------
   8. Formularios
   -------------------------------------------------------------------------- */

.campo {
  margin-bottom: 18px;
}

.campo > label,
.campo-label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 7px;
}

.campo__ayuda {
  font-size: 0.78rem;
  color: var(--texto-3);
  margin-top: 6px;
  line-height: 1.45;
}

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='password'],
.campo input[type='number'],
.campo input[type='tel'],
.campo input[type='url'],
.campo input[type='date'],
.campo input[type='time'],
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: 0.89rem;
  transition: border-color var(--t), box-shadow var(--t);
}

.campo select {
  padding-right: 34px;
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'><path fill='%238b94a3' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66z'/></svg>") no-repeat right 11px center;
  appearance: none;
  cursor: pointer;
}

.campo textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-3);
}

.campo--error input,
.campo--error textarea,
.campo--error select {
  border-color: var(--rojo);
}

.campo__error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--rojo);
  margin-top: 6px;
}

/* Input con prefijo */
.input-grupo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}

.input-grupo:focus-within {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.input-grupo__prefijo {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--panel-2);
  border-right: 1px solid var(--borde);
  font-size: 0.83rem;
  color: var(--texto-3);
  white-space: nowrap;
}

.input-grupo__sufijo {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--panel-2);
  border-left: 1px solid var(--borde);
  font-size: 0.83rem;
  color: var(--texto-3);
  white-space: nowrap;
}

.input-grupo input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}

.fila {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 18px;
}

.fila--3 {
  grid-template-columns: repeat(3, 1fr);
}

.fila--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Toggle */
.toggle {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__pista {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 100px;
  background: var(--borde-fuerte);
  flex-shrink: 0;
  transition: background var(--t);
}

.toggle__pista::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sombra-xs);
  transition: transform var(--t);
}

.toggle input:checked + .toggle__pista {
  background: var(--rojo);
}

.toggle input:checked + .toggle__pista::after {
  transform: translateX(18px);
}

.toggle input:focus-visible + .toggle__pista {
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.toggle__texto strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
}

.toggle__texto small {
  display: block;
  font-size: 0.79rem;
  color: var(--texto-3);
  line-height: 1.45;
}

.toggle-caja {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: var(--panel-2);
  margin-bottom: 18px;
}

.toggle-caja .toggle {
  width: 100%;
}

/* Checkbox */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.87rem;
}

.check input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all var(--t);
  position: relative;
}

.check input:checked {
  background: var(--rojo);
  border-color: var(--rojo);
}

.check input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Etiquetas tipo tags */
.tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  min-height: 44px;
  transition: border-color var(--t), box-shadow var(--t);
}

.tags-input:focus-within {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.tags-input input {
  flex: 1;
  min-width: 130px;
  border: none;
  outline: none;
  font-size: 0.87rem;
  padding: 3px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 11px;
  border-radius: 100px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  font-size: 0.8rem;
  font-weight: 500;
}

.tag button {
  display: grid;
  place-items: center;
  color: var(--texto-3);
  font-size: 0.95rem;
  transition: color var(--t);
}

.tag button:hover {
  color: var(--rojo);
}

/* Contador de caracteres */
.contador {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--texto-3);
  margin-top: 6px;
}

.contador.is-largo {
  color: var(--ambar);
}

.contador.is-excedido {
  color: var(--rojo);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Drag & drop de imágenes
   -------------------------------------------------------------------------- */

.dropzone {
  position: relative;
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--r);
  background: var(--panel-2);
  padding: 30px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}

.dropzone:hover {
  border-color: var(--rojo);
  background: var(--rojo-suave);
}

.dropzone.is-encima {
  border-color: var(--rojo);
  background: var(--rojo-suave);
  box-shadow: 0 0 0 4px var(--rojo-suave);
}

.dropzone input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--borde);
  color: var(--rojo);
  font-size: 1.5rem;
}

.dropzone strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.dropzone small {
  display: block;
  font-size: 0.79rem;
  color: var(--texto-3);
}

.dropzone--compacta {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.dropzone--compacta .dropzone__icono {
  margin: 0;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
}

/* Galería de subidas */
.subidas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.subida {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  aspect-ratio: 4 / 3;
  cursor: grab;
  transition: box-shadow var(--t), transform var(--t), opacity var(--t);
}

.subida:hover {
  box-shadow: var(--sombra);
}

.subida.is-arrastrando {
  opacity: 0.4;
  cursor: grabbing;
}

.subida.is-destino {
  outline: 2px dashed var(--rojo);
  outline-offset: -2px;
}

.subida img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subida__quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(20, 22, 26, 0.72);
  color: #fff;
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity var(--t), background var(--t);
  backdrop-filter: blur(3px);
}

.subida:hover .subida__quitar {
  opacity: 1;
}

.subida__quitar:hover {
  background: var(--rojo);
}

.subida__principal {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--rojo);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.subida__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
}

.subida__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rojo);
  transition: width 0.25s linear;
}

/* Vista previa única (logo, favicon, avatar) */
.preview-simple {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.preview-caja {
  display: grid;
  place-items: center;
  padding: 14px 18px;
  min-width: 130px;
  min-height: 84px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background:
    linear-gradient(45deg, #eef0f3 25%, transparent 25%, transparent 75%, #eef0f3 75%),
    linear-gradient(45deg, #eef0f3 25%, #fff 25%, #fff 75%, #eef0f3 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}

.preview-caja img {
  max-width: 190px;
  object-fit: contain;
}

.preview-caja--mini img {
  width: 34px;
  height: 34px;
}

/* --------------------------------------------------------------------------
   10. Pestañas
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 6px;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 15px;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--texto-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t), border-color var(--t);
}

.tab i {
  font-size: 1.2rem;
}

.tab:hover {
  color: var(--texto);
}

.tab.is-activa {
  color: var(--rojo);
  border-bottom-color: var(--rojo);
  font-weight: 650;
}

/* Subpestañas tipo píldora */
.subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 1px solid var(--borde);
  background: var(--panel-2);
}

.subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--borde);
  background: var(--panel);
  font-size: 0.83rem;
  font-weight: 550;
  color: var(--texto-2);
  white-space: nowrap;
  transition: all var(--t);
}

.subtab i {
  font-size: 1.05rem;
}

.subtab:hover {
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.subtab.is-activa {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

.panel-tab {
  display: none;
  animation: aparecer 0.22s ease;
}

.panel-tab.is-activo {
  display: block;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Secciones dentro de un panel */
.bloque-form {
  padding: 24px;
  border-bottom: 1px solid var(--borde);
}

.bloque-form:last-child {
  border-bottom: none;
}

.bloque-form__head {
  margin-bottom: 18px;
}

.bloque-form__head h4 {
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bloque-form__head h4 i {
  color: var(--rojo);
  font-size: 1.2rem;
}

.bloque-form__head p {
  font-size: 0.82rem;
  color: var(--texto-3);
  margin-top: 3px;
}

/* Barra de guardado pegajosa */
.barra-guardar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  border-radius: 0 0 var(--r) var(--r);
}

.barra-guardar__estado {
  font-size: 0.82rem;
  color: var(--texto-3);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* --------------------------------------------------------------------------
   11. Repetidores (listas editables)
   -------------------------------------------------------------------------- */

.repetidor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.repetidor__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: var(--panel-2);
}

.repetidor__mango {
  display: grid;
  place-items: center;
  width: 28px;
  height: 34px;
  color: var(--texto-3);
  font-size: 1.15rem;
  cursor: grab;
  flex-shrink: 0;
}

.repetidor__campos {
  flex: 1;
  min-width: 0;
}

.repetidor__campos .campo:last-child {
  margin-bottom: 0;
}

.repetidor__quitar {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   12. Modales y drawers
   -------------------------------------------------------------------------- */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 22, 0.45);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}

.velo.is-visible {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  /* dvh descuenta las barras del navegador móvil, que 100vh ignora. */
  max-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
}

/* El modal acota la altura y solo .modal__cuerpo scrollea. Cuando un
   formulario envuelve cabecera, cuerpo y pie —así se envía el modal
   completo— el <form> tiene que propagar el flex: si no, .modal__cuerpo
   deja de ser flex item, su overflow-y no aplica y las fichas largas se
   desbordan sin poder scrollearse. */
.modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.modal.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

.modal--ancho {
  width: min(880px, calc(100vw - 32px));
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}

.modal__head h3 {
  font-size: 1.05rem;
}

.modal__head p {
  font-size: 0.83rem;
  color: var(--texto-3);
  margin-top: 2px;
}

.modal__cerrar {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--texto-3);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: background var(--t), color var(--t);
}

.modal__cerrar:hover {
  background: var(--panel-2);
  color: var(--texto);
}

.modal__cuerpo {
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  /* Sin esto el mínimo automático del flex item es su alto de contenido y
     el cuerpo nunca se encoge, así que el scroll no llegaría a activarse. */
  min-height: 0;
}

.modal__pie {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 18px 24px;
  border-top: 1px solid var(--borde);
  background: var(--panel-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-shrink: 0;
}

/* Icono grande de confirmación */
.modal__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--rojo-suave);
  color: var(--rojo);
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   13. Toasts
   -------------------------------------------------------------------------- */

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 280px;
  max-width: 380px;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-lg);
  pointer-events: auto;
  animation: toast-entra 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.is-saliendo {
  animation: toast-sale 0.2s ease forwards;
}

@keyframes toast-entra {
  from { opacity: 0; transform: translateX(20px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-sale {
  to { opacity: 0; transform: translateX(20px); }
}

.toast i {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast--ok i { color: var(--verde); }
.toast--error i { color: var(--rojo); }
.toast--info i { color: var(--azul); }

.toast strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
}

.toast small {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-3);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   14. Login
   -------------------------------------------------------------------------- */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.login__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: var(--panel);
}

.login__caja {
  width: 100%;
  max-width: 388px;
  margin: 0 auto;
}

.login__logo {
  margin-bottom: 34px;
}

.login__logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.login__caja h1 {
  font-size: 1.55rem;
  margin-bottom: 6px;
}

.login__caja > p {
  color: var(--texto-2);
  font-size: 0.89rem;
  margin-bottom: 28px;
}

.login__opciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.login__opciones a {
  font-size: 0.84rem;
  color: var(--rojo);
  font-weight: 550;
}

.login__opciones a:hover {
  text-decoration: underline;
}

.campo-clave {
  position: relative;
}

.campo-clave input {
  padding-right: 44px !important;
}

.campo-clave button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--texto-3);
  font-size: 1.15rem;
  transition: color var(--t), background var(--t);
}

.campo-clave button:hover {
  color: var(--texto);
  background: var(--panel-2);
}

.login__pie {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  font-size: 0.8rem;
  color: var(--texto-3);
  text-align: center;
}

.login__aparte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  background: linear-gradient(150deg, #1a1c20 0%, #26282e 100%);
  color: #fff;
  overflow: hidden;
}

.login__aparte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
}

.login__aparte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 18, 22, 0.94), rgba(16, 18, 22, 0.35));
}

.login__cita {
  position: relative;
  z-index: 2;
  max-width: 460px;
}

.login__cita h2 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin-bottom: 14px;
}

.login__cita p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.login__datos {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 34px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.login__datos strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.login__datos small {
  font-size: 0.79rem;
  color: rgba(255, 255, 255, 0.6);
}

.alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.alerta i {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.alerta--info {
  background: var(--azul-suave);
  color: #1e40af;
}

.alerta--error {
  background: var(--rojo-suave);
  color: var(--rojo-oscuro);
}

.alerta--ok {
  background: var(--verde-suave);
  color: #0a7c3d;
}

.alerta--ambar {
  background: var(--ambar-suave);
  color: #92400e;
}

.alerta code {
  background: rgba(255, 255, 255, 0.6);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.94em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. Personalización (colores, logo)
   -------------------------------------------------------------------------- */

.color-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--panel);
}

.color-campo input[type='color'] {
  width: 42px;
  height: 42px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  padding: 3px;
  flex-shrink: 0;
}

.color-campo input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-campo input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}

.color-campo__datos {
  flex: 1;
  min-width: 0;
}

.color-campo__datos strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.color-campo__datos input[type='text'] {
  width: 100%;
  border: none;
  padding: 0;
  font-size: 0.79rem;
  color: var(--texto-3);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
}

.color-campo__datos input[type='text']:focus {
  outline: none;
  color: var(--texto);
}

.paletas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.paleta {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--borde);
  border-radius: 100px;
  background: var(--panel);
  font-size: 0.83rem;
  font-weight: 550;
  transition: all var(--t);
}

.paleta:hover {
  border-color: var(--borde-fuerte);
}

.paleta.is-activa {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-suave);
}

.paleta__muestra {
  display: flex;
  gap: 3px;
}

.paleta__muestra span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

/* Vista previa del sitio */
.preview-sitio {
  border: 1px solid var(--borde);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}

.preview-sitio__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--borde);
}

.preview-sitio__barra i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--borde-fuerte);
  display: block;
}

.preview-sitio__url {
  flex: 1;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--panel);
  border: 1px solid var(--borde);
  font-size: 0.72rem;
  color: var(--texto-3);
}

.preview-sitio__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
  /* Si el logo crece, la navegación baja de línea en vez de aplastarlo */
  flex-wrap: wrap;
}

.preview-sitio__header img {
  height: 30px;
  width: auto;
  /* Sin esto, el max-width global del reset reduciría la altura pedida */
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
  transition: height var(--t);
}

.preview-sitio__nav {
  display: flex;
  gap: 14px;
  font-size: 0.76rem;
  color: var(--texto-2);
}

.preview-sitio__btn {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: var(--rojo);
}

.preview-sitio__hero {
  padding: 26px 18px;
  background: linear-gradient(140deg, #1a1c20, #33363d);
  color: #fff;
}

.preview-sitio__hero h5 {
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.preview-sitio__hero p {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 14px;
}

.preview-sitio__hero span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--rojo);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Control de rango con valor */
.rango-campo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rango-campo input[type='range'] {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: var(--borde);
  appearance: none;
  cursor: pointer;
}

.rango-campo input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rojo);
  border: 3px solid #fff;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
}

.rango-campo input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
}

.rango-campo__valor {
  min-width: 62px;
  text-align: center;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   16. SEO
   -------------------------------------------------------------------------- */

.serp {
  padding: 18px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: var(--panel);
  font-family: Arial, sans-serif;
}

.serp__ruta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.serp__favicon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  padding: 3px;
  background: #fff;
  object-fit: contain;
}

.serp__ruta div {
  line-height: 1.2;
}

.serp__ruta strong {
  display: block;
  font-size: 0.83rem;
  color: #202124;
  font-weight: 500;
}

.serp__ruta small {
  font-size: 0.76rem;
  color: #4d5156;
}

.serp__titulo {
  color: #1a0dab;
  font-size: 1.16rem;
  line-height: 1.3;
  margin-bottom: 3px;
  word-break: break-word;
}

.serp__desc {
  color: #4d5156;
  font-size: 0.86rem;
  line-height: 1.58;
  word-break: break-word;
}

.seo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--borde);
  font-size: 0.84rem;
  margin-bottom: 8px;
}

.seo-check i {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.seo-check--ok i { color: var(--verde); }
.seo-check--aviso i { color: var(--ambar); }
.seo-check--mal i { color: var(--rojo); }

.seo-check span {
  flex: 1;
}

.seo-check small {
  display: block;
  color: var(--texto-3);
  font-size: 0.78rem;
}

/* Anillo de puntuación */
.puntaje {
  display: flex;
  align-items: center;
  gap: 18px;
}

.puntaje__anillo {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.puntaje__anillo svg {
  transform: rotate(-90deg);
}

.puntaje__anillo circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.puntaje__anillo .pista {
  stroke: var(--borde);
}

.puntaje__anillo .valor {
  stroke: var(--verde);
  transition: stroke-dasharray 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.puntaje__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   17. Utilidades
   -------------------------------------------------------------------------- */

.txt-2 { color: var(--texto-2); }
.txt-3 { color: var(--texto-3); }
.txt-sm { font-size: 0.84rem; }
.txt-xs { font-size: 0.78rem; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }
.flex-wrap { flex-wrap: wrap; }
.ml-auto { margin-left: auto; }
.tabular { font-variant-numeric: tabular-nums; }
.separador { height: 1px; background: var(--borde); margin: 22px 0; }

/* --------------------------------------------------------------------------
   Añadidos del backend
   Piezas que el mockup no necesitaba porque no había datos reales:
   paginación en servidor, campos de solo lectura y estados de carga.
   -------------------------------------------------------------------------- */

/* La paginación real usa <a> y <span>, no <button>. */
.paginacion__btn.is-inactivo {
  opacity: 0.45;
  pointer-events: none;
}

/* Dato mostrado sin campo editable (detalle de una consulta). */
.dato-lectura {
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  font-size: 0.9rem;
  color: var(--texto-2);
  min-height: 40px;
}

.cita-mensaje {
  padding: 16px 18px;
  border-left: 3px solid var(--rojo);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--panel-2);
  font-size: 0.92rem;
  line-height: 1.65;
  white-space: pre-line;
}

.metrica__label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texto-2);
  margin-top: 6px;
}

/* Consulta sin abrir todavía. */
.tabla tbody tr.is-sin-leer td:first-child {
  box-shadow: inset 3px 0 0 var(--rojo);
}

/* Mientras se pide un bloque por AJAX. */
.is-cargando {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--t);
}

.divisor-texto {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texto-3);
  font-size: 0.79rem;
  margin: 20px 0;
}

.divisor-texto::before,
.divisor-texto::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borde);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 > *:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--sombra-lg);
    /* El ancho fijo del escritorio dejaría el menú cortado en pantallas
       estrechas, y colapsado no tiene sentido fuera del escritorio. */
    width: min(var(--sidebar-w), 84vw);
  }

  body.sidebar-abierto .sidebar {
    transform: none;
  }

  /* El velo cubre la pantalla para atenuar el fondo, pero el menú que abre
     tiene que quedar por encima: si no, lo oscurece y se traga sus clics.
     Sigue por debajo de los modales (100), que se abren sobre el mismo velo. */
  body.sidebar-abierto .sidebar {
    z-index: 95;
  }

  .contenido,
  body.sidebar-min .contenido {
    margin-left: 0;
  }

  .topbar__buscar {
    display: none;
  }

  .pagina {
    padding: 22px 18px;
  }

  .fila--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .login {
    grid-template-columns: 1fr;
  }

  .login__aparte {
    display: none;
  }
}

@media (max-width: 900px) {
  .fila--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pagina {
    padding: 18px 16px;
  }

  .topbar {
    padding: 0 14px;
    gap: 10px;
  }

  .topbar__titulo p {
    display: none;
  }

  .fila,
  .fila--3,
  .fila--4 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-3 > *:last-child {
    grid-column: auto;
  }

  .metricas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .metrica {
    padding: 16px;
  }

  .metrica__valor {
    font-size: 1.55rem;
  }

  .card__head,
  .toolbar,
  .bloque-form,
  .subtabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card__cuerpo {
    padding: 16px;
  }

  .toasts {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  .toast {
    min-width: 0;
    max-width: none;
  }

  /* Modal casi a pantalla completa: con los márgenes de escritorio quedaría
     una ficha de 300 px de ancho para un formulario de veinte campos. */
  .modal,
  .modal--ancho {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
  }

  .modal__head {
    padding: 18px 18px 14px;
  }

  .modal__cuerpo {
    padding: 18px;
  }

  .modal__pie {
    flex-direction: column-reverse;
    padding: 14px 18px;
  }

  .modal__pie .btn {
    width: 100%;
  }

  .page-head {
    margin-bottom: 18px;
  }

  .page-head__acciones {
    width: 100%;
    margin-left: 0;
  }

  .page-head__acciones .btn {
    flex: 1;
  }

  /* La cabecera de tarjeta apila título y acciones en lugar de comprimirlos */
  .card__head {
    flex-wrap: wrap;
  }

  .card__acciones {
    margin-left: 0;
    width: 100%;
  }

  /* Buscador a lo ancho y filtros repartidos en la línea siguiente */
  .toolbar__buscar {
    max-width: none;
    min-width: 0;
    flex-basis: 100%;
  }

  .toolbar select {
    flex: 1;
    min-width: 0;
  }

  .toolbar__derecha {
    margin-left: 0;
    width: 100%;
  }

  .toolbar__derecha .btn {
    flex: 1;
  }

  .tabla thead th,
  .tabla tbody td {
    padding-left: 16px;
    padding-right: 16px;
  }

  .paginacion {
    padding: 12px 16px;
  }

  .paginacion__info {
    width: 100%;
    margin-right: 0;
  }

  .barra-guardar {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .barra-guardar__estado {
    width: 100%;
    margin-right: 0;
  }

  .barra-guardar .btn {
    flex: 1;
  }

  .chart-wrap--alto {
    height: 250px;
  }

  .chart-wrap--medio {
    height: 220px;
  }
}

@media (max-width: 520px) {
  .metricas {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  }

  .tab {
    padding: 12px 11px;
    font-size: 0.84rem;
  }

  .subidas {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }

  .repetidor__item {
    padding: 12px 10px;
    gap: 8px;
  }

  .login__caja {
    padding: 26px 20px;
  }

  /* Las tablas siguen scrolleando en horizontal dentro de su tarjeta, pero
     con un mínimo algo menor se recorren en menos gestos. */
  .tabla {
    min-width: 640px;
  }
}

@media print {
  .sidebar,
  .topbar,
  .barra-guardar,
  .toasts {
    display: none !important;
  }

  .contenido {
    margin-left: 0 !important;
  }
}