/* Accesibiliza · área de usuario (entrar, panel, sitio, cuenta, admin).
   Se carga DESPUÉS de estilos.css y reutiliza sus tokens, botones, cabecera y pie: el
   panel tiene que sentirse la misma casa que la web pública, no un backoffice pegado.
   Solo se añade lo que la web pública no tenía: formularios largos, tablas, medidores
   de uso y estados. Todos los pares de color, medidos para WCAG 2.1 AA. */

/* ---------- acceso (entrar / crear cuenta / recuperar) ---------- */
.acceso {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 300px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 56px 20px 72px;
}
.acceso::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 400px at 82% 0%, rgba(126, 232, 192, 0.28), transparent 62%),
    radial-gradient(520px 340px at 0% 100%, rgba(27, 94, 75, 0.08), transparent 58%);
}
.acceso-caja {
  position: relative; width: 100%; max-width: 460px;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 34px 34px 30px;
}
.acceso-caja h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 10px;
}
.acceso-caja .entradilla { margin: 0 0 24px; color: var(--texto-2); font-size: 16px; }
.acceso-pie { margin: 22px 0 0; font-size: 15px; color: var(--texto-2); text-align: center; }
.acceso-pie a { color: var(--marca); font-weight: 600; }
.acceso-plan {
  margin: 0 0 22px; padding: 12px 16px; border-radius: 14px;
  background: #eaf3ee; border: 1px solid rgba(27, 94, 75, 0.22); font-size: 15px;
}
.acceso-plan strong { font-weight: 700; }

/* separador «o» entre contraseña y Google */
.separador {
  display: flex; align-items: center; gap: 14px; margin: 22px 0;
  color: var(--texto-2); font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.1em;
}
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.btn-google {
  width: 100%; justify-content: center; gap: 10px;
  background: var(--panel); color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px rgba(15, 23, 19, 0.22);
}
.btn-google:hover { background: #f6f8f6; color: var(--tinta); }
.btn-google svg { width: 18px; height: 18px; }

/* ---------- formularios ---------- */
.formulario { display: grid; gap: 18px; }
/* `align-content: start` es lo que evita que un campo con texto de ayuda debajo estire
   al de al lado: sin esto, la rejilla reparte el alto sobrante y un input acaba más
   alto que el otro sin motivo. */
/* `:not([hidden])` es obligatorio, como en la cabecera: este `display` le gana en
   especificidad al `[hidden]` del navegador y los campos que se ocultan por código
   (la contraseña actual en las cuentas de Google, la confirmación de la baja) se
   seguían viendo. */
.formulario .campo:not([hidden]) { display: grid; gap: 7px; align-content: start; }
.formulario label { font-weight: 600; font-size: 14.5px; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="url"],
.formulario input[type="password"], .formulario input[type="number"], .formulario select,
.formulario textarea {
  width: 100%; font: inherit; font-size: 16.5px; color: var(--tinta);
  background: #fafbfa; border: 1.5px solid rgba(15, 23, 19, 0.20);
  border-radius: 12px; padding: 11px 14px;
}
.formulario textarea { min-height: 92px; resize: vertical; font-size: 15px; }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(27, 94, 75, 0.16);
}
.formulario input::placeholder, .formulario textarea::placeholder { color: #6b7a72; }
.formulario .ayuda { margin: 0; font-size: 13.5px; color: var(--texto-2); }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* Mismo `:not([hidden])` por el mismo motivo, y además para empatar en especificidad
   con la regla de `.campo`: sin esto, un `class="campo casilla"` se pintaría en rejilla
   y la casilla saldría encima del texto en vez de a su lado. */
.formulario .casilla:not([hidden]) { display: flex; gap: 10px; align-items: flex-start; }
.formulario .casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }
.formulario .casilla label { font-weight: 500; font-size: 15.5px; }
.formulario .acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.formulario button { justify-content: center; }

/* ---------- cabecera: la zona de usuario ----------
   «Tus webs» y «Administración» son secciones del producto; el nombre y «Salir» son tu
   parte. Van juntos al final y separados por un filete, para que el nombre no se lea
   como una sección más de la navegación. */
.cabecera nav .nav-usuario {
  display: inline-flex; align-items: center; gap: 16px;
  padding-left: 20px; margin-left: 4px;
  border-left: 1px solid var(--linea);
}
.cabecera nav .nav-usuario .enlace-cuenta { color: var(--texto-2); }
.cabecera nav .nav-usuario .enlace-cuenta:hover { color: var(--marca); }
.cabecera nav .nav-usuario .enlace-cuenta[aria-current="page"] { color: var(--tinta); }

/* ---------- avisos ---------- */
.aviso:empty { display: none; }
.aviso { margin: 0; border-radius: 14px; padding: 13px 17px; font-size: 15.5px; }
.aviso p { margin: 0; }
.aviso p + p { margin-top: 8px; }
.aviso-error { background: #fbe9e7; border: 1px solid rgba(179, 38, 30, 0.35); color: #8c1d16; }
.aviso-ok { background: #e6f4ec; border: 1px solid rgba(27, 94, 75, 0.30); color: #0e3f31; }
.aviso-info { background: #eef2ef; border: 1px solid var(--linea); color: var(--texto-2); }
.aviso a { color: inherit; text-decoration: underline; font-weight: 600; }
/* El aviso de la página (el que cuelga directamente del contenedor) necesita aire por
   debajo; los que van dentro de un formulario ya lo reciben del `gap` de la rejilla. */
.app > .contenedor > .aviso { margin-bottom: 22px; }
.aviso .btn { margin-top: 12px; }

/* ---------- estructura del panel ---------- */
.app { padding: 40px 0 80px; }
.app-cab {
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 28px;
}
.app-cab h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.06; letter-spacing: -0.015em; margin: 0;
}
.app-cab .lema { margin: 8px 0 0; color: var(--texto-2); font-size: 16.5px; max-width: 60ch; }
.app-cab .acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.migas { margin: 0 0 18px; font-size: 14.5px; color: var(--texto-2); }
.migas a { color: var(--marca); font-weight: 600; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 26px 28px; margin-bottom: 22px;
}
.tarjeta > h2 {
  font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.tarjeta > .sub { margin: 0 0 20px; color: var(--texto-2); font-size: 15.5px; max-width: 70ch; }
.tarjeta-apagada { background: #f0f3f0; box-shadow: none; }

/* La tarjeta de la que no se vuelve: filete rojo a la izquierda y botón acorde. No es
   decoración, es la única señal que separa «guardar» de «borrarlo todo». El color
   crítico es el mismo `#b3261e` que usan los informes. */
.tarjeta-peligro { border-left: 4px solid var(--critico, #b3261e); }
.tarjeta-peligro > h2 { color: var(--critico, #b3261e); }
.btn-peligro {
  background: var(--critico, #b3261e); color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 19, 0.2), 0 10px 24px -10px rgba(179, 38, 30, 0.55);
}
.btn-peligro:hover { background: #8c1d16; color: #fff; transform: translateY(-1px); }
.btn-peligro:disabled { background: #c98a86; box-shadow: none; transform: none; cursor: not-allowed; }

/* Un botón deshabilitado tiene que parecerlo: «Analizar ahora» se apaga cuando la web está
   en pausa, y sin esto se veía igual de vivo que siempre. */
.btn:disabled, .btn:disabled:hover {
  opacity: 0.5; box-shadow: none; transform: none; cursor: not-allowed;
  background: var(--marca); color: #fff;
}
.btn-fantasma:disabled, .btn-fantasma:disabled:hover { background: transparent; color: var(--texto-2); }

/* ---------- medidor de uso del plan ---------- */
.uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.uso-dato .uso-cifra {
  font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.1; margin: 0 0 4px;
}
.uso-dato .uso-txt { margin: 0 0 10px; font-size: 14.5px; color: var(--texto-2); }
.barra { height: 8px; border-radius: 999px; background: #e3e9e4; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.barra.llena span { background: var(--critico); }

/* ---------- listado de sitios ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.sitio-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 24px 26px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sitio-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.sitio-tarjeta h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.sitio-tarjeta h3 a { color: inherit; }
.sitio-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta es el enlace */
.sitio-tarjeta .dominio {
  margin: 0; font-family: var(--mono); font-size: 13px; color: var(--texto-2);
  word-break: break-all;
}
.sitio-cifra { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.sitio-cifra strong {
  font-family: var(--serif); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--critico);
}
.sitio-cifra.limpio strong { color: var(--marca); }
.sitio-cifra span { font-size: 14.5px; color: var(--texto-2); max-width: 22ch; }
.sitio-pie { margin: 0; font-size: 13.5px; color: var(--texto-2); }

.vacio {
  text-align: center; padding: 46px 24px; border: 1px dashed rgba(15, 23, 19, 0.22);
  border-radius: var(--radio); background: rgba(255, 255, 255, 0.5);
}
.vacio h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 0 0 8px; }
.vacio p { margin: 0 auto 18px; color: var(--texto-2); max-width: 46ch; }

/* ---------- chapas de estado ---------- */
.chapa {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  background: #eef2ef; color: #3d4a43;
}
.chapa-ok { background: #e6f4ec; color: #0e3f31; }
.chapa-trabajando { background: #e8edf3; color: #2c3f5c; }
.chapa-error { background: #fbe9e7; color: #8c1d16; }
.chapa-aviso { background: #fdf3d7; color: #5c4500; }

/* ---------- tablas ---------- */
.tabla-envoltorio { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
table.tabla th, table.tabla td {
  text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
table.tabla th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-2); }
table.tabla td.num, table.tabla th.num { text-align: right; padding-right: 18px; font-variant-numeric: tabular-nums; }
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla .url { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
table.tabla .acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- páginas fijadas a mano ---------- */
.lista-fijas { list-style: none; margin: 0 0 20px; padding: 0; }
.lista-fijas li {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--linea); padding: 10px 0;
}
.lista-fijas li:last-child { border-bottom: 0; }
.lista-fijas .url { font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* ---------- progreso de un escaneo ---------- */
.progreso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.progreso .barra { flex: 1 1 220px; height: 10px; }
.progreso p { margin: 0; font-size: 15px; color: var(--texto-2); }

/* ---------- detalle de una página del escaneo ---------- */
.detalle-pagina { margin-top: 26px; }
.detalle-pagina h2 {
  font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* ---------- planes dentro de la cuenta ---------- */
.mini-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.mini-plan {
  border: 1px solid var(--linea); border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.mini-plan.actual { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.mini-plan h3 { margin: 0; font-size: 17px; font-weight: 700; }
.mini-plan .precio-mini { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0; }
.mini-plan .precio-mini small { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--texto-2); }
.mini-plan .precio-mini .mas-iva { margin-left: 6px; white-space: nowrap; }
.mini-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; color: var(--texto-2); }
.mini-plan .btn { margin-top: auto; justify-content: center; }
/* Un plan por debajo del contratado se enseña para comparar, pero sin invitar a
   contratarlo: bajar de plan no es un botón, es una conversación. */
.mini-plan-inferior { background: #f4f6f4; }
.mini-plan-inferior h3, .mini-plan-inferior .precio-mini { color: var(--texto-2); }
.mini-plan .nota-plan { margin: auto 0 0; font-size: 14px; color: var(--texto-2); }
/* Lo que se cobra de verdad, debajo del precio por mes. */
.mini-plan .nota-precio { margin: -4px 0 0; font-size: 13.5px; color: var(--texto-2); }

/* Fila del conmutador de ciclo: el texto a la izquierda y el selector a la derecha,
   y apilados en cuanto no quepan. */
.linea-ciclo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 20px;
}
.linea-ciclo .sub { margin: 0; color: var(--texto-2); font-size: 15.5px; }
.linea-ciclo .selector-ciclo button { font-size: 14.5px; padding: 8px 18px; }

/* ---------- admin ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.numero { padding: 6px 24px 10px; border-left: 1px solid var(--linea); }
.numero:first-child { border-left: 0; padding-left: 0; }
.numero .n { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.1; margin: 0 0 4px; }
.numero .t { margin: 0; font-size: 14px; color: var(--texto-2); }
.buscador { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.buscador .campo { flex: 1 1 260px; }

/* ---------- utilidades ---------- */
.cargando { color: var(--texto-2); font-size: 15.5px; }
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.derecha { margin-left: auto; }
.apilado { display: grid; gap: 10px; }
.linea-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 700px) {
  /* En la web pública los enlaces de la cabecera se ocultan en móvil porque el hero los
     repite. En el panel no: son LA navegación, así que aquí vuelven. */
  /* Si el nombre y los enlaces no caben al lado del logotipo, la navegación baja entera
     a una segunda línea y se alinea a la derecha, en vez de comerse el margen lateral. */
  .cabecera-inner { flex-wrap: wrap; row-gap: 6px; }
  .cabecera nav { gap: 13px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  /* `:not([hidden])` es obligatorio: sin él este `display` pisa al `[hidden]` del
     navegador y «Administración» se enseñaba a todo el mundo en móvil. */
  .cabecera nav a:not(.btn):not([hidden]) { display: inline-flex; font-size: 14.5px; }
  .cabecera nav .nav-usuario { gap: 12px; padding-left: 13px; margin-left: 0; }
  .app-cab .acciones .btn { width: 100%; justify-content: center; }
  .formulario .fila { grid-template-columns: 1fr; }
  .tarjeta { padding: 22px 20px; }
  .acceso-caja { padding: 26px 22px 24px; }
  .numero { border-left: 0; border-top: 1px solid var(--linea); padding: 12px 0 8px; }
  .numero:first-child { border-top: 0; }
}