/* ==========================================================================
   Panel del CMS

   NOTA SOBRE TAILWIND
   No se usa Tailwind ni DaisyUI como dependencia. Tailwind necesita un paso
   de compilación (Node, PostCSS) que complicaría el despliegue en el VPS, y
   la variante que se carga por CDN es JavaScript de terceros: habría que
   abrir la política de seguridad del panel justo donde se editan los datos
   de los clientes. No compensa.

   Lo que sí se toma es su lenguaje visual, que es lo que buscabas: escala
   de espaciado consistente, esquinas redondeadas, sombras muy suaves, anillo
   de foco al seleccionar un campo y una paleta de grises fría bien graduada.
   Escrito a mano, son 500 líneas sin dependencias ni compilación.
   ========================================================================== */

:root {
  /* Grises fríos, del más claro al más oscuro */
  --gris-50:  #F8FAFC;
  --gris-100: #F1F5F9;
  --gris-200: #E2E8F0;
  --gris-300: #CBD5E1;
  --gris-400: #94A3B8;
  --gris-500: #64748B;
  --gris-600: #475569;
  --gris-700: #334155;
  --gris-800: #1E293B;
  --gris-900: #0F172A;

  --acento:      #0D9488;
  --acento-600:  #0F766E;
  --acento-50:   #F0FDFA;
  --acento-200:  #99F6E4;

  --peligro:     #DC2626;
  --peligro-50:  #FEF2F2;
  --peligro-200: #FECACA;
  --aviso:       #B45309;
  --aviso-50:    #FFFBEB;
  --aviso-200:   #FDE68A;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  --sombra-sm: 0 1px 2px 0 rgb(15 23 42 / .05);
  --sombra:    0 1px 3px 0 rgb(15 23 42 / .08), 0 1px 2px -1px rgb(15 23 42 / .06);
  --sombra-md: 0 4px 12px -2px rgb(15 23 42 / .10), 0 2px 6px -2px rgb(15 23 42 / .06);

  --anillo: 0 0 0 3px rgb(13 148 136 / .18);
}

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

body {
  margin: 0;
  background: var(--gris-100);
  color: var(--gris-800);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-sm); }

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; color: var(--gris-900); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.075rem; }
h3 { font-size: .95rem; }

.eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.mono { font-family: var(--mono); font-size: .85em; }

/* ---------------------------------------------------------------- Estructura */

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

.sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: var(--gris-900);
  color: var(--gris-300);
  padding: 1.25rem 0 1rem;
  display: flex;
  flex-direction: column;
}

.sidebar__brand {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.01em;
  color: #FFF;
  padding: 0 1.25rem 1.15rem;
}

.sidebar__site {
  margin: 0 .85rem 1rem;
  padding: .8rem .9rem;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: var(--r);
}
.sidebar__site-name { color: #FFF; font-weight: 600; font-size: .92rem; display: block; }
.sidebar__site-slug { font-family: var(--mono); font-size: .72rem; color: var(--gris-400); word-break: break-all; }

.nav { padding: 0 .85rem; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: block;
  padding: .55rem .75rem;
  color: var(--gris-300);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: rgb(255 255 255 / .07); color: #FFF; text-decoration: none; }
.nav a[aria-current="page"] { background: var(--acento); color: #FFF; }

.sidebar__foot {
  margin: 1rem .85rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / .1);
  font-size: .84rem;
}
.sidebar__user { color: var(--gris-400); display: block; margin-bottom: .5rem; word-break: break-all; font-size: .8rem; }
.sidebar__foot a { color: var(--gris-300); font-size: .85rem; }
.sidebar__foot a:hover { color: #FFF; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: #FFF;
  border-bottom: 1px solid var(--gris-200);
  padding: .9rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 500;
  padding: .3rem .7rem;
  background: var(--acento-50);
  color: var(--acento-600);
  border: 1px solid var(--acento-200);
  border-radius: 999px;
}
.site-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.site-chip--off { background: var(--aviso-50); color: var(--aviso); border-color: var(--aviso-200); }
.site-chip--off::before { background: var(--aviso); }

.content { padding: 1.75rem 2rem 3rem; max-width: 1140px; width: 100%; }

/* ---------------------------------------------------------------- Tarjetas */

.card {
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 1.4rem 1.5rem;
}
.card + .card { margin-top: 1.25rem; }
.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--gris-100);
}

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat {
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 1.15rem 1.25rem;
}
.stat__value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: var(--gris-900); display: block; letter-spacing: -0.02em; }
.stat__label { font-size: .82rem; color: var(--gris-500); margin-top: .2rem; display: block; }
.stat--alert { border-color: var(--peligro-200); background: var(--peligro-50); }
.stat--alert .stat__value { color: var(--peligro); }

/* ---------------------------------------------------------------- Listas */

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .8rem 0; border-top: 1px solid var(--gris-100); }
.list li:first-child { border-top: 0; padding-top: 0; }
.list__meta { font-size: .82rem; color: var(--gris-500); }

.site-list { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.site-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.site-card:hover {
  border-color: var(--acento);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.site-card--off { opacity: .72; }

.site-card__cabecera { display: flex; align-items: center; gap: .85rem; min-width: 0; }

/* El logo identifica el sitio de un vistazo mejor que su nombre. Cuando no
   hay logo, la inicial sobre el color de marca del cliente cumple la misma
   función y mantiene las tarjetas visualmente distinguibles. */
.site-card__logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  border: 1px solid var(--gris-200);
  background: var(--gris-50);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.site-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.site-card__logo span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--color-sitio, var(--gris-700));
  color: #FFF;
  font-size: 1.35rem;
  font-weight: 700;
}

.site-card__identidad { min-width: 0; }
.site-card__name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--gris-900);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card__slug {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--gris-500);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-card__datos {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .75rem 0;
  border-top: 1px solid var(--gris-100);
  border-bottom: 1px solid var(--gris-100);
  font-size: .84rem;
  color: var(--gris-500);
}
.site-card__datos strong { color: var(--gris-900); font-size: 1.05rem; font-weight: 600; }
.site-card__alerta { color: var(--peligro); }
.site-card__alerta strong { color: var(--peligro); }

.site-card__pie { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: auto; }
.site-card__rol { font-size: .78rem; color: var(--gris-500); font-weight: 500; }

/* ---------------------------------------------------------------- Formularios */

.form { max-width: 400px; }
.field { margin-bottom: 1.1rem; max-width: 580px; }
.field label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: .35rem;
}

/* Se listan por exclusión y no uno a uno: al añadir un campo de tipo
   "search" o "date" en la auditoría, esos tipos se quedaron fuera de la
   lista y salían con el aspecto por defecto del navegador, más bajos y con
   otro borde. Así cualquier tipo nuevo entra ya estilado. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="hidden"]),
textarea, select {
  width: 100%;
  padding: .6rem .8rem;
  font: inherit;
  font-size: .95rem;
  color: var(--gris-900);
  background: #FFF;
  border: 1px solid var(--gris-300);
  border-radius: var(--r);
  box-shadow: var(--sombra-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--gris-400); }

/* El anillo de foco es lo que hace que un formulario se sienta vivo */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--anillo);
}

/* Altura uniforme: sin esto, un campo de fecha y uno de texto no miden lo
   mismo y la fila queda descuadrada. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
select { min-height: 40px; }

/* El icono del calendario y la cruz de borrar, en el gris del panel */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: var(--gris-400);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--peligro); }
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgb(220 38 38 / .15);
}
textarea { resize: vertical; min-height: 5rem; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2.2rem;
}

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  padding: .8rem;
  border: 2px dashed var(--gris-300);
  border-radius: var(--r);
  background: var(--gris-50);
  color: var(--gris-600);
  cursor: pointer;
}
input[type="file"]:hover { border-color: var(--acento); background: var(--acento-50); }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  margin-right: .8rem;
  padding: .4rem .9rem;
  border: 1px solid var(--gris-300);
  border-radius: var(--r-sm);
  background: #FFF;
  color: var(--gris-700);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--gris-100); }

/* Casillas: cuadro propio en vez del control gris del sistema */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .85rem;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
}
.field--check:hover { border-color: var(--gris-300); }
.field--check label { margin: 0; font-weight: 500; color: var(--gris-700); cursor: pointer; }

input[type="checkbox"] {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: .15rem 0 0;
  border: 1px solid var(--gris-400);
  border-radius: var(--r-sm);
  background: #FFF;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"]:checked {
  background: var(--acento) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E") center / 74% no-repeat;
  border-color: var(--acento);
}
input[type="checkbox"]:focus-visible { box-shadow: var(--anillo); outline: none; }

.field__error { color: var(--peligro); font-size: .83rem; margin-top: .35rem; display: block; font-weight: 500; }
.field__hint { color: var(--gris-500); font-size: .82rem; margin-top: .35rem; display: block; }

/* ---------------------------------------------------------------- Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .58rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--acento);
  color: #FFF;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover { background: var(--acento-600); color: #FFF; text-decoration: none; box-shadow: var(--sombra); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--anillo); outline: none; }

.btn--ghost { background: #FFF; color: var(--gris-700); border-color: var(--gris-300); }
.btn--ghost:hover { background: var(--gris-50); color: var(--gris-900); border-color: var(--gris-400); }

.btn--sm { padding: .35rem .75rem; font-size: .84rem; }

.btn--link {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--gris-400);
  padding: 0;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}
.btn--link:hover { color: #FFF; background: none; box-shadow: none; text-decoration: underline; }

.acciones { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Avisos */

.flash {
  display: flex;
  gap: .6rem;
  padding: .8rem 1rem;
  border-radius: var(--r);
  margin-bottom: .75rem;
  font-size: .9rem;
  border: 1px solid;
  border-left-width: 3px;
}
.flash--success { background: var(--acento-50); border-color: var(--acento-200); border-left-color: var(--acento); color: var(--acento-600); }
.flash--error   { background: var(--peligro-50); border-color: var(--peligro-200); border-left-color: var(--peligro); color: var(--peligro); }
.flash--warning { background: var(--aviso-50); border-color: var(--aviso-200); border-left-color: var(--aviso); color: var(--aviso); }
.flash--info    { background: #FFF; border-color: var(--gris-200); border-left-color: var(--gris-400); color: var(--gris-600); }

.empty { color: var(--gris-500); font-size: .92rem; margin: .25rem 0 1rem; }

/* ---------------------------------------------------------------- Listados */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.filtros { display: flex; gap: .4rem; flex-wrap: wrap; }

.chip {
  font-size: .84rem;
  font-weight: 500;
  padding: .35rem .85rem;
  border: 1px solid var(--gris-200);
  border-radius: 999px;
  background: #FFF;
  color: var(--gris-600);
  text-decoration: none;
  box-shadow: var(--sombra-sm);
  transition: border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--gris-400); color: var(--gris-900); text-decoration: none; }
.chip--on { background: var(--gris-900); border-color: var(--gris-900); color: #FFF; }
.chip--on:hover { color: #FFF; }

.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-500);
  font-weight: 600;
  padding: .8rem 1.25rem;
  background: var(--gris-50);
  border-bottom: 1px solid var(--gris-200);
}
.tabla th:first-child { border-top-left-radius: var(--r-lg); }
.tabla th:last-child  { border-top-right-radius: var(--r-lg); }
.tabla td { padding: .85rem 1.25rem; border-bottom: 1px solid var(--gris-100); vertical-align: top; }
.tabla tbody tr:hover { background: var(--gris-50); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td .list__meta { display: block; }
.tabla form { display: inline; }

.estado {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--gris-200);
  background: var(--gris-50);
  color: var(--gris-600);
  white-space: nowrap;
}
.estado--publicado { background: var(--acento-50); border-color: var(--acento-200); color: var(--acento-600); }
.estado--borrador  { background: var(--aviso-50); border-color: var(--aviso-200); color: var(--aviso); }
.estado--borrado   { background: var(--peligro-50); border-color: var(--peligro-200); color: var(--peligro); }

.etiqueta {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--acento-600);
  background: var(--acento-50);
  border-radius: var(--r-sm);
  padding: .1rem .4rem;
  margin-left: .4rem;
}

/* ---------------------------------------------------------------- Galería */

.galeria { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 1.25rem; }
.galeria__item {
  margin: 0;
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease;
}
.galeria__item:hover { box-shadow: var(--sombra-md); }
.galeria__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gris-100); }
.galeria__item figcaption { padding: .85rem; font-size: .84rem; flex: 1; display: flex; flex-direction: column; }

/* Dos líneas fijas para el título y una para los datos: así todas las
   fichas miden lo mismo aunque unos títulos sean mucho más largos que
   otros, que era lo que descuadraba la rejilla. */
.galeria__nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
  font-weight: 600;
  color: var(--gris-900);
  line-height: 1.35;
}
.galeria__item .list__meta {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .2rem;
}
.galeria__item .acciones { margin-top: auto; padding-top: .6rem; }

/* ---------------------------------------------------------------- Marca */

.marca-actual { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vista-previa {
  max-height: 76px;
  width: auto;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
  padding: .6rem;
  margin-bottom: .85rem;
  display: block;
}
.vista-previa--icono { max-height: 48px; }
.vista-previa--ancha { max-height: 240px; max-width: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- Acceso */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 360px) 1fr; }
.auth__aside {
  background: var(--gris-900);
  color: var(--gris-300);
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth__wordmark { font-weight: 600; font-size: 1.05rem; color: #FFF; letter-spacing: -0.01em; }
.auth__note { font-size: .92rem; color: var(--gris-400); max-width: 30ch; line-height: 1.6; }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--gris-100); }
.auth__panel .form {
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  padding: 2rem;
  width: 100%;
}
.auth__panel .btn { width: 100%; margin-top: .25rem; }

/* ---------------------------------------------------------------- Errores */

.error-page { max-width: 30rem; margin: 16vh auto; padding: 0 1.5rem; }
.error-page__code { font-size: 3.25rem; font-weight: 700; line-height: 1; color: var(--gris-300); margin: 0 0 .5rem; }

/* ---------------------------------------------------------------- Móvil */

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; padding-bottom: .75rem; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a { padding: .4rem .8rem; }
  .sidebar__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .sidebar__user { margin: 0; }
  .content, .topbar { padding-left: 1.25rem; padding-right: 1.25rem; }
  .content { padding-top: 1.25rem; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { padding: 1.5rem; }
  .auth__note { display: none; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border-bottom: 1px solid var(--gris-200); padding: .5rem 0; }
  .tabla td { border: 0; padding: .3rem 1.25rem; }
  .tabla td[style] { text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .site-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- Colores */

.colores { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

input[type="color"] {
  width: 100%;
  height: 46px;
  padding: 4px;
  border: 1px solid var(--gris-300);
  border-radius: var(--r);
  background: #FFF;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
}
input[type="color"]:hover { border-color: var(--gris-400); }
input[type="color"]:focus { outline: none; border-color: var(--acento); box-shadow: var(--anillo); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--r-sm); }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--r-sm); }

.muestra-colores { display: flex; gap: .6rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.muestra {
  flex: 1 1 160px;
  padding: .8rem 1rem;
  border-radius: var(--r);
  color: #FFF;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / .3);
}

.sidebar__plataforma {
  margin: 0 .85rem;
  padding: .6rem .75rem;
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: var(--r-sm);
  font-size: .84rem;
}
.sidebar__plataforma a { color: var(--gris-300); }
.sidebar__plataforma a:hover { color: #FFF; }

/* ---------------------------------------------------------------- Plegables */

/* Los campos secundarios (traducciones) van dentro de un <details> nativo:
   sin JavaScript, funciona con teclado y no ensucia el formulario. */
.plegable {
  margin-top: 1.25rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
  background: var(--gris-50);
}
.plegable > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gris-600);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r);
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid var(--gris-400);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable > summary:hover { color: var(--gris-900); background: var(--gris-100); }
.plegable__nota {
  margin-left: auto;
  font-weight: 400;
  font-size: .78rem;
  color: var(--gris-500);
}
.plegable__cuerpo { padding: .25rem 1rem 1rem; border-top: 1px solid var(--gris-200); }
.plegable__cuerpo .field:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Ayuda */

.ayuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: .35rem; }

.ayuda__boton {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--gris-300);
  border-radius: 50%;
  background: #FFF;
  color: var(--gris-500);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  display: grid;
  place-items: center;
}
.ayuda__boton:hover { background: var(--acento); border-color: var(--acento); color: #FFF; }

.ayuda__globo {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 20rem;
  padding: .7rem .85rem;
  background: var(--gris-900);
  color: var(--gris-100);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--r);
  box-shadow: var(--sombra-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 40;
  white-space: normal;
}
.ayuda__globo strong { display: block; color: #FFF; margin-bottom: .25rem; }
.ayuda__globo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gris-900);
}
.ayuda:hover .ayuda__globo,
.ayuda:focus-within .ayuda__globo { opacity: 1; visibility: visible; }

/* Cerca del borde derecho el globo se sale: se ancla a la derecha */
.card__head .ayuda .ayuda__globo { left: auto; right: -8px; transform: none; }
.card__head .ayuda .ayuda__globo::after { left: auto; right: 14px; transform: none; }

/* ------------------------------------------------- Puesta en marcha */

.puesta-marcha { border-left: 3px solid var(--acento); }

.progreso {
  height: 6px;
  background: var(--gris-200);
  border-radius: 999px;
  overflow: hidden;
  margin: .25rem 0 1.1rem;
}
.progreso__barra { height: 100%; background: var(--acento); border-radius: 999px; }

.pasos { list-style: none; margin: 0; padding: 0; }
.pasos li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem 0;
  border-top: 1px solid var(--gris-100);
}
.pasos li:first-child { border-top: 0; }

.paso__marca {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid var(--gris-300);
  background: #FFF;
  color: var(--gris-400);
  margin-top: .1rem;
}
.paso--hecho .paso__marca { background: var(--acento); border-color: var(--acento); color: #FFF; }

.paso__texto { min-width: 0; }
.paso__titulo { font-weight: 600; color: var(--gris-900); display: block; }
.paso--hecho .paso__titulo { color: var(--gris-500); font-weight: 500; }
.paso__nota { font-size: .85rem; color: var(--gris-500); display: block; }
.paso__enlace { font-size: .85rem; font-weight: 600; white-space: nowrap; margin-left: auto; }

/* ------------------------------------------------- Guía desplegable */

.guia {
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--acento);
  border-radius: var(--r);
  background: #FFF;
  box-shadow: var(--sombra-sm);
  margin-bottom: 1.25rem;
}
.guia > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--gris-800);
  cursor: pointer;
  list-style: none;
}
.guia > summary::-webkit-details-marker { display: none; }
.guia > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid var(--acento);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.guia[open] > summary::before { transform: rotate(90deg); }
.guia__nota { margin-left: auto; font-weight: 400; font-size: .8rem; color: var(--gris-500); }

.guia__pasos { margin: 0; padding: 0 1.25rem 0 2.5rem; }
.guia__pasos li { margin-bottom: .85rem; font-size: .9rem; color: var(--gris-600); }
.guia__pasos strong { color: var(--gris-900); }
.guia__pasos code { background: var(--gris-100); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

.guia__aviso {
  margin: 0;
  padding: .75rem 1rem;
  border-top: 1px solid var(--gris-100);
  font-size: .85rem;
  color: var(--gris-500);
}

/* ---------------------------------------------------------------- Auditoría */

.filtros-auditoria {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(140px, 1fr)) auto;
  gap: .75rem 1rem;
  align-items: start;
}
.filtros-auditoria > div { display: flex; flex-direction: column; }
.filtros-auditoria label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gris-600);
  margin-bottom: .3rem;
}
.filtros-auditoria input, .filtros-auditoria select { font-size: .9rem; }
.filtros-auditoria .btn { min-height: 40px; margin-top: 1.35rem; }

.enlace-limpiar { font-size: .85rem; font-weight: 500; }

.registro {
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}

/* Cada línea se despliega bajo demanda: el detalle completo de cientos de
   registros a la vez es ilegible, y casi siempre se busca uno concreto. */
.entrada { border-bottom: 1px solid var(--gris-100); }
.entrada:last-child { border-bottom: 0; }

.entrada > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
}
.entrada > summary::-webkit-details-marker { display: none; }
.entrada > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid var(--gris-400);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.entrada[open] > summary::before { transform: rotate(90deg); }
.entrada > summary:hover { background: var(--gris-50); }

.entrada__hora { flex: 0 0 auto; color: var(--gris-500); font-size: .8rem; }
.entrada__accion { font-weight: 600; color: var(--gris-900); }
.entrada__actor {
  color: var(--gris-500);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Una línea de color a la izquierda para localizar lo grave de un vistazo */
.entrada--critical { border-left: 3px solid var(--peligro); }
.entrada--warning { border-left: 3px solid var(--aviso); }
.entrada--info { border-left: 3px solid transparent; }

.entrada__detalle {
  margin: 0;
  padding: .5rem 1.1rem 1.1rem 2.4rem;
  background: var(--gris-50);
  border-top: 1px solid var(--gris-100);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .6rem 1.5rem;
  font-size: .86rem;
}
.entrada__detalle > div { min-width: 0; }
.entrada__detalle dt {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-500);
  font-weight: 600;
}
.entrada__detalle dd { margin: .1rem 0 0; color: var(--gris-800); word-break: break-word; }
.entrada__ua { grid-column: 1 / -1; }
.entrada__ua dd { font-size: .78rem; color: var(--gris-500); }

@media (max-width: 900px) {
  .filtros-auditoria { grid-template-columns: 1fr 1fr; }
  .filtros-auditoria .campo-buscar { grid-column: 1 / -1; }
  .filtros-auditoria .btn { grid-column: 1 / -1; }
  .entrada > summary { flex-wrap: wrap; gap: .5rem; }
  .entrada__actor { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- Reseñas */

.resena { padding: 1rem 0; }
.resena--oculta { opacity: .6; }
.resena__cabecera { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.resena__estrellas { color: #D97706; letter-spacing: .08em; font-size: .9rem; }
.resena__texto {
  margin: .5rem 0 .6rem;
  color: var(--gris-700);
  font-size: .93rem;
  white-space: pre-wrap;
}
.resena__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.usuario { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.celda-si { text-align: center; color: var(--acento); font-weight: 700; }

.consumo .progreso { margin-bottom: .6rem; }
.progreso__barra--alerta { background: var(--aviso); }

/* ------------------------------------------- Verificación en dos pasos */

.qr-bloque { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.qr {
  width: 200px;
  height: 200px;
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
  padding: .5rem;
  background: #FFF;
}
.clave-manual {
  display: inline-block;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
  font-size: .95rem;
  letter-spacing: .08em;
  word-break: break-all;
}

.codigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
  margin: 1.25rem 0;
}
.codigo {
  background: var(--gris-900);
  color: #FFF;
  padding: .6rem;
  border-radius: var(--r-sm);
  text-align: center;
  font-size: .95rem;
  letter-spacing: .05em;
}

.aviso-2fa {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-left: .35rem;
  border-radius: 50%;
  background: var(--aviso);
  color: #FFF;
  font-size: .7rem;
  font-weight: 700;
  cursor: help;
}

/* ---------------------------------------------------------------- Bloques */

.bloques { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.bloque {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
  background: var(--gris-50);
  margin-bottom: .5rem;
}
.bloque__tipo {
  flex: 0 0 auto;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--acento-600);
  background: var(--acento-50);
  border: 1px solid var(--acento-200);
  border-radius: 999px;
  padding: .15rem .6rem;
}
.bloque__resumen {
  flex: 1;
  min-width: 0;
  color: var(--gris-700);
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bloque__acciones { display: flex; gap: .3rem; flex: 0 0 auto; }
.bloque__acciones form { display: inline; }
.bloque__acciones .btn[disabled] { opacity: .35; cursor: not-allowed; }

.anadir-bloque { border-top: 1px solid var(--gris-100); padding-top: 1.25rem; }
.tipos-bloque {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: .75rem;
}
.tipo-bloque {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
  background: #FFF;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tipo-bloque:hover { border-color: var(--acento); box-shadow: var(--sombra); text-decoration: none; }
.tipo-bloque strong { display: block; color: var(--gris-900); font-size: .92rem; }
.tipo-bloque span { display: block; color: var(--gris-500); font-size: .82rem; margin-top: .15rem; }

@media (max-width: 760px) {
  .bloque { flex-wrap: wrap; }
  .bloque__resumen { width: 100%; white-space: normal; }
}

/* ---------------------------------------------------------------- Marcas */

.marcas { display: grid; gap: .6rem; }
.marca-ficha {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--gris-200);
  border-radius: var(--r);
  background: var(--gris-50);
}
.marca-ficha--oculta { opacity: .6; }
.marca-ficha__logo {
  flex: 0 0 auto;
  width: 72px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #FFF;
  border: 1px solid var(--gris-200);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.marca-ficha__logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 3px; }
.marca-ficha__inicial { font-weight: 700; color: var(--gris-400); font-size: 1.2rem; }
.marca-ficha__datos { flex: 1; min-width: 0; }
.marca-ficha__acciones { display: flex; gap: .3rem; }
.marca-ficha__acciones form { display: inline; }