/* =============================================================
   Área de cliente — hoja propia y autosuficiente.

   NO carga ../styles.css a propósito, igual que el panel. La web pública es
   un escaparate: fondo verde oscuro, halos, animaciones. Esto es donde un
   cliente entra a mirar cómo va su obra y a bajarse una factura, muchas veces
   desde el móvil y a pleno sol. Manda la legibilidad.

   Identidad: cabecera en azul noche (el azul de la placa del logo, oscurecido)
   sobre zona de trabajo clara. El azul oscuro arriba no es decoración: los
   tres logos que tenemos llevan las letras en blanco y sobre fondo claro no
   se leen.

   OJO con el azul: #084A68 vale para texto sobre blanco (~9,5:1) pero no
   como relleno con texto encima salvo en blanco. Para el progreso se usa
   --avance, que está calculado para ambas cosas.
   ============================================================= */

:root{
  /* Zona de trabajo. El gris tira ligeramente a azul para que no parezca
     un gris de sistema pegado al azul de la marca. */
  --bg: #F4F6F8;
  --bg-2: #FFFFFF;
  --bg-3: #EAF0F4;

  /* Marca: paleta del logo (placa azul, "e" verde) */
  --marca: #084A68;          /* azul placa oscurecido, para títulos y texto destacado */
  --marca-honda: #04283A;    /* cabecera y pantalla de acceso, igual que la web pública */
  --avance: #17793E;         /* progreso, verde de la "e" oscurecido: legible sobre el fondo y con blanco encima */
  --avance-suave: #E2F3E8;

  --ink: #101B21;
  --ink-mute: #4A5A64;
  /* Aclarado justo hasta aguantar 5:1 sobre el fondo con brillo bajo. */
  --ink-dim: #5C6C76;

  --line: #E2E8ED;
  --line-strong: #C9D3DC;

  --ok-ink: #1A7A3F;
  --warn-ink: #8A5A00;
  --warn-bg: #FDF4E3;
  --bad-ink: #B3261E;
  --bad-bg: #FCEDEC;

  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Avenir Next", Avenir, var(--sans);
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; margin: 0; }
html{ -webkit-text-size-adjust: 100%; background: var(--bg); }
body.cuenta-body{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4{ font-family: var(--display); line-height: 1.25; font-weight: 700; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg{ display: block; }
.ic{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-img{ height: 32px; width: auto; display: block; }

/* El atributo hidden lo pone el navegador con display:none, pero cualquier
   display del autor lo pisa. Sin esto, la pantalla de acceso se queda encima
   del área ya cargada. */
[hidden]{ display: none !important; }

:focus-visible{ outline: 3px solid var(--avance); outline-offset: 2px; border-radius: 6px; }

/* Fuera de la vista, dentro del teclado y del lector de pantalla. Es lo que
   lleva el selector de archivo de la subida: con display:none desaparecía
   también para el Tab y la zona sólo se podía usar con ratón o con el dedo.
   Nada de display ni visibility aquí: cualquiera de los dos lo vuelve a
   sacar del recorrido. */
.visualmente-oculto{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   Acceso — el único sitio que sigue siendo verde entero: es la
   puerta de la marca, y ahí el logo blanco funciona.
   ============================================================= */
.cuenta-login{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--marca-honda);
}
.cuenta-login-box{
  width: 100%; max-width: 420px;
  background: var(--bg-2);
  border-radius: 22px;
  padding: 38px 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.cuenta-login-box .logo{
  display: flex; justify-content: center;
  background: var(--marca-honda);
  border-radius: 14px; padding: 14px;
  margin-bottom: 22px;
}
.cuenta-login-box .logo-img{ height: 36px; }
.cuenta-login-box h1{ font-size: 25px; text-align: center; margin-bottom: 8px; color: var(--marca); }
.cuenta-login-sub{
  text-align: center; color: var(--ink-mute);
  font-size: 14.5px; margin-bottom: 26px;
}
.cuenta-field{ margin-bottom: 16px; }
.cuenta-field label{
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-mute);
}
.cuenta-field input{
  width: 100%;
  padding: 13px 15px;
  font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar */
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  transition: border-color .2s, box-shadow .2s;
}
.cuenta-field input:focus{
  outline: none;
  border-color: var(--avance);
  box-shadow: 0 0 0 3px rgba(11,110,90,.14);
}
.cuenta-error{
  background: var(--bad-bg);
  border: 1px solid var(--bad-ink);
  color: var(--bad-ink);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.cuenta-back{
  display: block; text-align: center; margin-top: 20px;
  font-size: 13.5px; color: var(--ink-dim);
}
.cuenta-back:hover{ color: var(--marca); }
/* La política, también a la vista de quien todavía no ha entrado. */
.cuenta-legal{ margin: 10px 0 0; text-align: center; font-size: 12.5px; }
.cuenta-legal a{ color: var(--ink-dim); text-decoration: underline; }
.cuenta-legal a:hover{ color: var(--marca); }

/* Botones */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 15px; font-weight: 700;
  transition: background .2s, transform .15s var(--ease-out);
}
.btn-primary{ background: var(--avance); color: #FFFFFF; }
.btn-primary:hover{ background: #095B4A; }
.btn-primary:active{ transform: translateY(1px); }
.btn-block{ width: 100%; }

/* =============================================================
   Cabecera
   ============================================================= */
.cuenta-header{
  position: sticky; top: 0; z-index: 20;
  background: var(--marca-honda);
}
.cuenta-header-inner{
  max-width: 940px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 14px;
}
/* El logo es un enlace a la web. Con solo la altura de la imagen se queda en
   28px, por debajo de lo que un dedo acierta: se le da alto de toque. */
.cuenta-header a{ display: flex; align-items: center; min-height: 44px; }
.cuenta-header .logo-img{ height: 28px; }
.cuenta-header-spacer{ flex: 1; }
.cuenta-hola{ font-size: 14px; color: #A8BDB7; }
.cuenta-hola strong{ color: #FFFFFF; font-weight: 600; }
.cuenta-salir{
  padding: 8px 16px;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 100px;
  font-size: 13.5px; font-weight: 600;
  color: #FFFFFF;
  transition: background .2s, border-color .2s;
}
.cuenta-salir:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
@media (max-width: 520px){
  .cuenta-hola{ display: none; } /* el nombre ya sale en el saludo grande */
}

/* =============================================================
   Estructura
   ============================================================= */
.cuenta-main{
  max-width: 940px; margin: 0 auto;
  padding: 32px 24px 90px;
}
@media (max-width: 560px){ .cuenta-main{ padding: 24px 16px 70px; } }

/* Aviso en vivo: "tu proyecto se ha movido". Sale dentro de la página porque
   es lo que ve quien tiene el área delante; la notificación del sistema solo
   entra cuando la pestaña está de fondo. */
.aviso-vivo{
  position: sticky; top: 12px; z-index: 15;
  margin-bottom: 18px;
  background: var(--marca); color: #FFFFFF;
  border-radius: 12px; padding: 13px 16px;
  font-size: 14px; font-weight: 600; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,71,65,.26);
}

.cuenta-bienvenida{ margin-bottom: 28px; }
.cuenta-bienvenida h1{
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  color: var(--marca);
  margin-bottom: 6px;
  text-wrap: balance;
}
.cuenta-bienvenida p{ color: var(--ink-mute); font-size: 15.5px; }
/* La próxima cita, a la vista de quien sólo lee el saludo y se va. */
.cuenta-bienvenida .resumen-cita{ margin-top: 6px; color: var(--marca); font-weight: 600; }

.cuenta-bloque{ margin-bottom: 38px; }
.cuenta-bloque > h2{
  font-size: 19px;
  color: var(--marca);
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 10px;
}
.cuenta-bloque > h2 .ic{ width: 20px; height: 20px; color: var(--avance); }
.cuenta-bloque > .cuenta-sub{
  color: var(--ink-mute); font-size: 14.5px; margin-bottom: 16px;
}

/* =============================================================
   Seguimiento — el motivo por el que el cliente entra.

   Un cliente que espera una subvención no pregunta "¿en qué fase estoy?".
   Pregunta "¿cuánto queda?" y "¿desde cuándo?". Por eso cada tarjeta lleva
   contador de pasos, barra de avance, la fecha de cada fase cumplida y el
   tiempo que lleva parado en la actual.
   ============================================================= */
.seguimiento-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 820px){ .seguimiento-grid{ grid-template-columns: 1fr; } }

.track-card{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(16,32,29,.04);
}
@media (max-width: 560px){ .track-card{ padding: 18px 16px; } }

.track-head{ margin-bottom: 16px; }
.track-head h3{ font-size: 17px; color: var(--marca); }

/* Fila de cabecera: cuántos pasos llevas y el importe si lo hay. */
/* min-height: sin esto, la tarjeta que lleva importe crece y sus barras de
   avance dejan de alinearse con las de la tarjeta de al lado. Puestas a la
   misma altura se comparan de un vistazo. */
.track-meta{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 8px;
  min-height: 42px;
}
.track-cuenta{
  font-size: 13px; font-weight: 600; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.track-importe{
  font-size: 19px; font-weight: 700; color: var(--avance);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.track-importe span{
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em;
}

/* Barra de avance: lo primero que se mira de reojo. */
.track-barra{
  height: 7px; border-radius: 100px;
  background: var(--bg-3);
  overflow: hidden;
  margin-top: 12px;
}
.track-barra i{
  display: block; height: 100%;
  background: var(--avance);
  border-radius: 100px;
  transition: width .5s var(--ease-out);
}
.track-barra.parada i{ background: var(--bad-ink); }

/* Escalera de fases */
.track-steps{ list-style: none; padding: 0; margin: 18px 0 0; }
.track-step{
  position: relative;
  display: flex; align-items: flex-start; gap: 13px;
  padding-bottom: 18px;
}
.track-step:last-child{ padding-bottom: 0; }
.track-step:not(:last-child)::before{
  content: "";
  position: absolute; left: 11px; top: 25px; bottom: 0;
  width: 2px; background: var(--line-strong);
}
.track-step.done:not(:last-child)::before{ background: var(--avance); }

.track-dot{
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.track-dot svg{ width: 13px; height: 13px; stroke: #FFFFFF; stroke-width: 3.2; fill: none; opacity: 0; }
.track-step.done .track-dot{ background: var(--avance); border-color: var(--avance); }
.track-step.done .track-dot svg{ opacity: 1; }
.track-step.current .track-dot{
  border-color: var(--avance);
  background: var(--bg-2);
  box-shadow: 0 0 0 4px var(--avance-suave);
}
.track-step.current .track-dot::after{
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--avance);
}

.track-texto{ min-width: 0; padding-top: 1px; }
.track-label{
  display: block;
  font-size: 14.5px; font-weight: 500; color: var(--ink-dim);
}
.track-step.done .track-label{ color: var(--ink-mute); }
.track-step.current .track-label{ color: var(--ink); font-weight: 700; }

/* Fecha de la fase y tiempo en la fase actual. */
.track-cuando{
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.track-step.current .track-cuando{ color: var(--avance); font-weight: 600; }

.track-pendiente{
  font-size: 14px; color: var(--ink-mute);
  background: var(--bg);
  border-radius: 12px; padding: 12px 14px;
  margin-top: 14px;
}

/* Qué viene después: evita la llamada de "¿y ahora qué?". */
.track-siguiente{
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-mute);
}
.track-siguiente strong{ color: var(--ink); font-weight: 600; }

.track-nota{
  margin-top: 14px;
  background: var(--avance-suave);
  border-radius: 12px; padding: 13px 15px;
  font-size: 13.5px; color: var(--ink-mute); line-height: 1.55;
}
.track-nota strong{ display: block; color: var(--marca); margin-bottom: 3px; font-size: 12.5px; }

/* Estado especial: denegada. No es una fase más, es una parada. */
.track-alerta{
  margin-top: 14px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-ink);
  color: var(--bad-ink);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.5;
}
.track-alerta a{ text-decoration: underline; font-weight: 700; }

/* =============================================================
   Citas — cuándo va alguien a su casa.

   Lo que el equipo programa en el panel. Van aparte del seguimiento a
   propósito: aquello dice cuándo se cumplió cada fase, esto cuándo se
   presenta alguien en la puerta. La fecha va en letra ("martes 6 de
   octubre"), y el cuadradito del día es sólo para la vista: el lector de
   pantalla lee la frase.
   ============================================================= */
.cuenta-tel{ color: var(--marca); font-weight: 600; text-decoration: underline; }
.citas-lista{ list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cita-card{
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
}
/* La de hoy se distingue sin depender sólo del color: además lleva el "Hoy" escrito. */
.cita-card.hoy{ border-color: var(--avance); box-shadow: 0 0 0 3px var(--avance-suave); }
.cita-dia{
  flex-shrink: 0;
  width: 48px; padding: 6px 0;
  border-radius: 11px;
  background: var(--avance-suave); color: var(--avance);
  text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.2;
}
.cita-dia span{ display: block; font-size: 20px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cita-info{ flex: 1; min-width: 0; }
.cita-info h3{ font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.cita-cuando{ font-size: 13.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.cita-falta{ font-size: 12.5px; font-weight: 700; color: var(--avance); }
.cita-estado{
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 100px;
  background: var(--bg-3); color: var(--ink-mute);
}
.cita-estado.en-curso{ background: var(--warn-bg); color: var(--warn-ink); }
.cita-estado.hecha{ background: var(--avance-suave); color: var(--avance); }
/* En el móvil el estado baja a su propia línea: al lado, estrujaba la fecha
   hasta partirla en cinco renglones. Queda alineado con el texto, no con el
   cuadradito del día (48px de ancho + 14px de hueco). */
@media (max-width: 560px){
  .cita-card{ flex-wrap: wrap; row-gap: 8px; padding: 14px 16px; }
  .cita-info{ flex-basis: calc(100% - 62px); }
  .cita-estado{ margin-left: 62px; }
}

/* =============================================================
   Facturas
   ============================================================= */
.facturas-lista{ display: flex; flex-direction: column; gap: 10px; }
.factura-card{
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.factura-card:hover{ border-color: var(--avance); box-shadow: 0 2px 10px rgba(16,32,29,.07); }
.factura-icono{
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--avance-suave);
  display: flex; align-items: center; justify-content: center;
}
.factura-icono .ic{ width: 21px; height: 21px; color: var(--avance); }
.factura-info{ flex: 1; min-width: 0; }
.factura-info h4{
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.factura-info p{ font-size: 12.5px; color: var(--ink-dim); }
.factura-btn{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 100px;
  background: var(--avance); color: #FFFFFF;
  font-size: 14px; font-weight: 600;
  transition: background .2s;
}
.factura-btn:hover{ background: #095B4A; }
.factura-btn .ic{ width: 16px; height: 16px; stroke-width: 2.2; }
@media (max-width: 560px){
  .factura-card{ flex-wrap: wrap; }
  .factura-btn{ width: 100%; justify-content: center; }
}

/* =============================================================
   Subida de documentos
   ============================================================= */
.dropzone{
  display: block;
  position: relative; /* el selector oculto se queda dentro: enfocarlo no hace saltar la página */
  border: 2px dashed var(--line-strong);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-2);
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.dragging{
  border-color: var(--avance);
  background: var(--avance-suave);
}
.dropzone .ic{
  width: 32px; height: 32px; color: var(--avance);
  margin: 0 auto 12px; stroke-width: 1.7;
}
.dropzone-titulo{ font-size: 15.5px; font-weight: 700; margin-bottom: 4px; color: var(--marca); }
.dropzone-sub{ font-size: 13.5px; color: var(--ink-mute); }
/* El foco está en el selector, que no se ve: el anillo lo lleva la zona
   entera, que es lo que el cliente reconoce. Sólo con teclado
   (:focus-visible), para no dejar el recuadro marcado después de un clic. */
.dropzone:has(input[type="file"]:focus-visible){
  outline: 3px solid var(--avance); outline-offset: 2px;
  border-color: var(--avance);
  background: var(--avance-suave);
}
/* Navegadores sin :has(): mejor un anillo de más tras un clic que ninguno. */
@supports not selector(:has(*)){
  .dropzone:focus-within{ outline: 3px solid var(--avance); outline-offset: 2px; border-color: var(--avance); }
}

.doc-elegido{
  margin-top: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.doc-elegido-cab{
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.doc-elegido-nombre{
  flex: 1; min-width: 0;
  font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-elegido-peso{ font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.doc-quitar{
  color: var(--ink-mute); font-size: 20px; line-height: 1;
  padding: 4px 9px; border-radius: 8px;
}
.doc-quitar:hover{ color: var(--bad-ink); background: var(--bad-bg); }
.doc-elegido-campos{ display: flex; flex-wrap: wrap; gap: 10px; }
.doc-elegido select,
.doc-elegido input[type="text"]{
  flex: 1 1 200px;
  padding: 12px 14px;
  font-size: 16px; /* otra vez 16px por el zoom de iOS */
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
}
.doc-elegido select:focus,
.doc-elegido input[type="text"]:focus{
  outline: none; border-color: var(--avance);
  box-shadow: 0 0 0 3px rgba(11,110,90,.14);
}
.doc-enviar{
  flex: 0 0 auto;
  padding: 12px 24px; border-radius: 100px;
  background: var(--avance); color: #FFFFFF;
  font-size: 14.5px; font-weight: 700;
}
.doc-enviar:hover{ background: #095B4A; }
.doc-enviar:disabled{ opacity: .45; cursor: not-allowed; }
@media (max-width: 560px){ .doc-enviar{ width: 100%; } }

/* ---------- Documentos ya subidos ---------- */
.docs-lista{ display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.doc-card{
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 16px;
}
.doc-card-info{ flex: 1; min-width: 0; }
.doc-card-nombre{
  font-size: 14.5px; font-weight: 600; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-card-meta{ font-size: 12.5px; color: var(--ink-dim); }
.doc-chip{
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
  background: var(--bg-3);
  color: var(--ink-mute);
  margin-right: 7px;
}
.doc-chip.de-gurenergias{ background: var(--avance-suave); color: var(--avance); }
.doc-acciones{ display: flex; gap: 5px; flex-shrink: 0; }
.doc-accion{
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  transition: background .2s, color .2s;
}
.doc-accion:hover{ background: var(--bg-3); color: var(--marca); }
.doc-accion.borrar:hover{ background: var(--bad-bg); color: var(--bad-ink); }
.doc-accion .ic{ width: 18px; height: 18px; }

/* ---------- Aviso ---------- */
.cuenta-aviso{
  display: flex; gap: 11px;
  background: var(--warn-bg);
  border: 1px solid #E8C98A;
  border-radius: 13px;
  padding: 13px 15px;
  margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-mute);
}
.cuenta-aviso strong{ color: var(--warn-ink); display: block; margin-bottom: 3px; }

/* ---------- Estados vacíos / mensajes ---------- */
.cuenta-vacio{
  text-align: center;
  padding: 32px 22px;
  background: var(--bg-2);
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  color: var(--ink-mute);
  font-size: 14.5px;
}
.cuenta-msg{ font-size: 13.5px; margin-top: 10px; display: block; min-height: 18px; }
.cuenta-msg.ok{ color: var(--ok-ink); font-weight: 600; }
.cuenta-msg.error{ color: var(--bad-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; }
}

/* Pie del área de cliente. Discreto, pero la política de privacidad tiene que
   estar a un clic desde donde el cliente sube su documentación, no sólo desde
   la web pública. */
.cuenta-pie{
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-dim);
}
.cuenta-pie a{ color: var(--ink-dim); text-decoration: underline; }
.cuenta-pie a:hover{ color: var(--ink); }

/* Ojo para ver la contraseña (public/ojo-clave.js, que envuelve cada campo de
   contraseña en .clave-caja). El campo ocupa la caja entera y deja sitio a
   la derecha para el botón. */
.clave-caja{ position: relative; display: block; min-width: 0; }
.clave-caja > input{ width: 100%; padding-right: 46px; box-sizing: border-box; }
.clave-ojo{
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-mute); cursor: pointer;
}
.clave-ojo:hover{ color: var(--ink); background: rgba(0,0,0,.05); }
.clave-ojo:focus-visible{ outline: 2px solid currentColor; outline-offset: 1px; }
.clave-ojo svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }