/* Facturación EvolucionaT — hoja de estilos única, sin dependencias externas. */

:root {
  --navy: #1f3864;
  --navy-claro: #2e4d85;
  --acento: #2e74b5;
  --fondo: #f4f6fa;
  --panel: #ffffff;
  --texto: #1c2333;
  --suave: #667089;
  --borde: #dde3ee;
  --verde: #17794a;
  --verde-f: #d9f2e4;
  --ambar: #8a6100;
  --ambar-f: #fdf0cd;
  --rojo: #b3261e;
  --rojo-f: #fbdedc;
  --gris-f: #eceff5;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .05);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--acento); }

/* ----------------------------------------------------------------- LOGIN */
.pantalla-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: radial-gradient(1100px 500px at 50% -10%, #2e4d85 0%, #1f3864 55%, #16274a 100%);
}

.tarjeta-login {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border-radius: 14px;
  padding: 30px 28px 26px;
  box-shadow: 0 24px 60px rgba(8, 15, 35, .35);
}

/* En la entrada, el logo y el subtítulo van centrados en la tarjeta. */
.tarjeta-login .marca { justify-content: center; margin-bottom: 2px; }
.tarjeta-login .logo-img { margin: 0 auto; }
.tarjeta-login .sub { margin: 4px 0 20px; text-align: center; color: var(--suave); font-size: 13.5px; }
.tarjeta-login label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--suave); }

/* ----------------------------------------------------------------- MARCA */
.marca { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--navy); }
.marca b { font-weight: 800; }
.marca .logo {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}
.marca.grande { font-size: 21px; }
.marca.grande .logo { width: 38px; height: 38px; font-size: 20px; }

/* El logo de verdad, en lugar del nombre escrito */
.logo-img { height: 68px; width: auto; max-width: 100%; display: block; }
.logo-img.grande { height: 92px; }

/* ----------------------------------------------------------------- ESTRUCTURA */
/* El menú va dentro de la página, en una columna a la izquierda: hay un solo
   scroll para toda la web. Al bajar, baja todo junto. */
.con-menu { display: flex; align-items: stretch; }

.lateral {
  flex: 0 0 232px;
  width: 232px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  background: var(--panel);
  border-right: 1px solid var(--borde);
}

.lateral .marca { padding: 4px 8px 18px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--texto);
  text-decoration: none;
  font-size: 14.5px;
}
.lateral a span { width: 18px; text-align: center; color: var(--suave); }
.lateral a:hover { background: var(--gris-f); }
.lateral a.activo { background: var(--navy); color: #fff; font-weight: 600; }
.lateral a.activo span { color: #fff; }
/* «Mi cuenta» y «Salir» van justo debajo del menú, no al fondo de la página:
   así se ven de una vez con el resto de secciones. */
.lateral-pie {
  margin-top: 14px;
  border-top: 1px solid var(--borde);
  padding-top: 10px;
}

/* Separa del menú del negocio lo que es personal. */
.separador-menu {
  margin: 14px 0 2px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--borde);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--suave);
}

.principal { flex: 1 1 auto; min-width: 0; min-height: 100vh; }

header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 58px;
  padding: 0 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}
.quien { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hamburguesa { display: none; margin-right: auto; font-size: 22px; cursor: pointer; }

main { padding: 24px 26px 60px; max-width: 1700px; }

/* ----------------------------------------------------------------- TÍTULOS */
.titulo-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 18px;
}
.titulo-pagina h1 { font-size: 23px; width: 100%; }
.titulo-pagina p { margin: 0; color: var(--suave); font-size: 14px; }
.titulo-pagina .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- BOTONES */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { border-color: #c3ccdd; background: #fbfcfe; }
.boton.primario { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.boton.primario:hover { background: var(--navy-claro); }
.boton.fino { padding: 5px 10px; font-size: 13px; }
.boton.peligro { color: var(--rojo); border-color: #f2c9c6; }
.boton.peligro:hover { background: var(--rojo-f); }
.boton.ancho { width: 100%; justify-content: center; margin-top: 6px; padding: 10px; }

/* ----------------------------------------------------------------- AVISOS */
.aviso {
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--gris-f);
  font-size: 14px;
}
.aviso.ok    { background: var(--verde-f); border-color: #b6e2cb; color: var(--verde); }
.aviso.error { background: var(--rojo-f);  border-color: #f2c9c6; color: var(--rojo); }
.aviso.clave { background: #fffbe9; border-color: #f0e0a8; display: flex; flex-direction: column; gap: 6px; }
.aviso.clave small { color: var(--suave); }

/* Ventanita de aviso: para lo que no te puedes perder, como un correo enviado. */
.ventana-aviso {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 24px 18px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
  color: var(--texto);
  box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
}
.ventana-aviso::backdrop { background: rgba(16, 24, 40, .45); }
.ventana-aviso p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.ventana-aviso form { margin: 0; display: flex; justify-content: flex-end; }
.ventana-aviso.ok    { border-top: 3px solid var(--verde); }
.ventana-aviso.error { border-top: 3px solid var(--rojo); }
/* Si el navegador no entiende <dialog>, al menos que se vea centrada. */
.ventana-aviso.a-mano {
  display: block;
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Mientras se manda algo lento, el botón lo dice y no se deja pulsar otra vez. */
.boton[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ----------------------------------------------------------------- CIFRAS */
.rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.cifra {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.cifra.verde { border-left-color: var(--verde); }
.cifra.ambar { border-left-color: var(--ambar); }
.cifra.rojo  { border-left-color: var(--rojo); }
.cifra .etq { display: block; font-size: 12.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.cifra strong { display: block; margin: 4px 0 2px; font-size: 24px; letter-spacing: -.02em; }
.cifra small { color: var(--suave); font-size: 12.5px; }

/* ----------------------------------------------------------------- BLOQUES Y TABLAS */
.bloque {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 22px;
  overflow: hidden;
}
.bloque-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;              /* en pantallas estrechas, los botones bajan */
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
}
.bloque-cab h2 { font-size: 16px; min-width: 0; }
.bloque-cab .boton { margin-left: auto; }
/* Cuando hay más de un botón, el segundo se pega al primero. */
.bloque-cab .boton ~ .boton { margin-left: 0; }
.bloque .formulario { padding: 16px; }

.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0;
  background: #f7f9fc;
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave);
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfe; }
.tabla-datos {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.centro { text-align: center; }
.dinero { text-align: right; white-space: nowrap; }
.rojo-texto { color: var(--rojo); font-weight: 600; }
.nota { display: block; color: var(--suave); font-size: 12.5px; }
/* Fecha aún no cumplida: en gris y en cursiva, para que se lea como previsión. */
.prevista, small.prevista { color: #9aa3b8; font-style: italic; }
.vacio {
  background: var(--panel);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 24px;
  text-align: center;
  color: var(--suave);
}

.fila-acciones { white-space: nowrap; text-align: right; }
.fila-acciones .boton { margin-left: 4px; }
.en-linea { display: inline-block; }
.cobro { display: inline-flex; gap: 4px; margin-left: 4px; }
.cobro input { width: 86px; padding: 4px 8px; font-size: 13px; }
.oculto-total { display: none; }

/* Una fila que sigue ahí pero que ahora mismo no cuenta (un gasto fijo que
   todavía no ha empezado o que ya se terminó de pagar). */
.fila-apagada > td { opacity: .55; }

/* ----------------------------------------------------------------- ETIQUETAS */
.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.etiqueta.verde { background: var(--verde-f); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-f); color: var(--ambar); }
.etiqueta.rojo  { background: var(--rojo-f);  color: var(--rojo); }
.etiqueta.azul  { background: #dce9f8; color: var(--acento); }
.etiqueta.gris  { background: var(--gris-f); color: var(--suave); }
.etiqueta.morado  { background: #ece4fb; color: #6b3fc4; }
.etiqueta.naranja { background: #ffe4d1; color: #b1520c; }

.barra { width: 92px; height: 6px; border-radius: 99px; background: var(--gris-f); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--verde); }

/* ------------------------------------------------- AHORROS (PERSONAL) */
.medidor { padding: 16px; }
.barra-ancha {
  height: 12px;
  border-radius: 99px;
  background: var(--gris-f);
  overflow: hidden;
}
.barra-ancha span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--verde);
  transition: width .25s ease;
}
.barra-ancha span.ambar { background: var(--ambar); }
.barra-ancha span.rojo  { background: var(--rojo); }
.barra-ancha.pequena { height: 7px; max-width: 190px; }
.medidor-texto { margin: 12px 0 0; font-size: 14.5px; color: var(--suave); }
.medidor-texto strong { color: var(--texto); }

/* ----------------------------------------------------------------- FORMULARIOS */
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--texto);
}
input:focus, select:focus { outline: 2px solid #bfd6f2; border-color: var(--acento); }
input[type="checkbox"] { width: auto; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.formulario {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}
.formulario.estrecho { max-width: 520px; }
.formulario .separador {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--suave);
  margin: 22px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde);
}
.formulario .separador:first-child { margin-top: 0; }

.campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.campos > label { display: block; font-size: 13px; font-weight: 600; color: var(--suave); }
.campos > label input, .campos > label select { margin-top: 4px; font-weight: 400; color: var(--texto); }
.campos > label small { display: block; margin-top: 4px; font-weight: 400; font-size: 12px; color: var(--suave); }
.ancho-2 { grid-column: span 2; }
.ancho-3 { grid-column: 1 / -1; }

.con-boton { position: relative; display: block; }
.con-boton input { padding-right: 74px; }
.con-boton button {
  position: absolute;
  top: 5px; right: 5px;
  padding: 4px 9px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: var(--suave);
  cursor: pointer;
}
.con-boton button:hover { color: var(--acento); border-color: var(--acento); }

.interruptores { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--texto); }
.check small { color: var(--suave); font-weight: 400; }

.pie-formulario {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.pie-formulario small { color: var(--suave); font-size: 12.5px; }

.buscador { display: flex; gap: 8px; margin-bottom: 14px; }
.buscador input { max-width: 380px; }

/* ----------------------------------------------------------------- FICHAS DE ACCESO */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 14px; }
.ficha {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ficha > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  height: auto;
  padding: 14px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid var(--borde);
}
.ficha h3 { font-size: 15.5px; }
.ficha .enlace { font-size: 13px; word-break: break-all; }
.ficha-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ficha-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ficha-cuerpo .grupo { padding: 14px 16px; }
.ficha-cuerpo .grupo + .grupo { border-left: 1px solid var(--borde); }
.ficha h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin-bottom: 8px; }
.ficha dl { display: grid; grid-template-columns: 78px 1fr; gap: 5px 8px; margin: 0; font-size: 13.5px; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; word-break: break-word; }
.ficha-nota { padding: 10px 16px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--suave); background: #fbfcfe; }

.copiable { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.copiar, .ver {
  border: 1px solid var(--borde);
  border-radius: 5px;
  background: #fff;
  padding: 1px 7px;
  font: inherit;
  font-size: 11.5px;
  color: var(--suave);
  cursor: pointer;
}
.copiar:hover, .ver:hover { color: var(--acento); border-color: var(--acento); }
.secreto .oculto { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
code.grande { font-size: 16px; background: #fff; padding: 3px 8px; border-radius: 6px; border: 1px solid #f0e0a8; }

/* ----------------------------------------------------------------- FILTROS */
/* Barra de filtros: cada uno con su nombre encima, para que el desplegable
   pueda tener la primera opción en blanco y aun así se sepa qué es. */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px;
  margin-bottom: 16px;
}
.filtros .filtro { display: block; min-width: 0; }
.filtros .filtro > span {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--suave);
}
.filtros input, .filtros select {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 13.5px;
  background: #fbfcfe;
  color: var(--texto);
  text-overflow: ellipsis;
}
.filtros .ancho-busca { grid-column: span 2; }
.filtros .filtro-acciones {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}
.filtros .boton { padding: 8px 12px; white-space: nowrap; }
/* «Borrar filtros» sigue ahí cuando no hay nada que borrar, pero apagado. */
.filtros .boton.apagado { opacity: .45; pointer-events: none; }

@media (max-width: 720px) {
  .filtros { grid-template-columns: 1fr 1fr; padding: 10px; }
  .filtros .ancho-busca { grid-column: 1 / -1; }
  .filtros .filtro-acciones { grid-column: 1 / -1; }
  .filtros .filtro-acciones .boton { flex: 1 1 0; justify-content: center; }
}

/* ------------------------------------------- TRAER PROYECTOS A LA FACTURA */
.traer-proyectos {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fbfcfe;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.traer-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.traer-cab .check { margin: 0 0 0 auto; }
.traer-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 14px;
  margin-bottom: 10px;
}
.proyecto-facturable[hidden] { display: none; }
.proyecto-facturable small { display: block; color: var(--suave); font-size: 12.5px; font-weight: 400; }
/* Lo que contestó el servidor de correo, para saber por qué no sale un envío. */
.registro-smtp { padding: 0 16px 14px; }
.registro-smtp summary { cursor: pointer; font-size: 14px; color: var(--acento); }
.registro-smtp pre {
  margin: 10px 0 8px;
  padding: 12px;
  overflow-x: auto;
  background: #1c2333;
  color: #e8ecf5;
  border-radius: var(--radio);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La firma, tal cual saldrá en el correo. */
.firma-muestra {
  padding: 12px 14px;
  background: #fbfcfe;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 14px;
  color: var(--suave);
  overflow-wrap: anywhere;
}
.firma-muestra img { display: block; max-width: 100%; height: auto; margin-bottom: 10px; }

.lista-simple { margin: 0; padding-left: 18px; color: var(--suave); font-size: 14px; }
.lista-simple li { margin-bottom: 4px; }
.lista-simple strong { color: var(--texto); }

/* Bloques del formulario que aparecen según la categoría del proyecto */
.bloque-condicional[hidden] { display: none; }
.resumen-iva, .resumen-beneficio {
  align-self: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acento);
}
.resumen-beneficio { grid-column: 1 / -1; color: var(--verde); }

/* ----------------------------------------------------------------- HACER FACTURA */
.facturar-opcion { display: inline-block; position: relative; }
.facturar-opcion summary {
  display: inline-flex;
  align-items: center;
  color: inherit;
  list-style: none;
}
.facturar-opcion summary::before { content: none; }
.facturar-opcion summary::-webkit-details-marker { display: none; }
.elegir-opcion {
  position: absolute;
  right: 0;
  z-index: 5;
  margin-top: 6px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
  text-align: left;
}
.elegir-opcion span { font-size: 13px; color: var(--suave); }
.elegir-opcion select { width: 100%; }

/* ----------------------------------------------------------------- TABLA QUE SE VUELVE TARJETAS */
.tabla-datos { font-size: 13.5px; }
.tabla-datos td { padding: 9px 10px; }
.si { color: var(--verde); font-weight: bold; }
.no { color: var(--suave); }

@media (max-width: 1200px) {
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas,
  .tabla-tarjetas tbody,
  .tabla-tarjetas tr,
  .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas {
    border: 0;
    background: none;
    box-shadow: none;
  }
  .tabla-tarjetas tr {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .tabla-tarjetas tr:hover { background: var(--panel); }
  .tabla-tarjetas td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid #f1f4f9;
  }
  .tabla-tarjetas td::before {
    content: attr(data-col);
    flex: 0 0 auto;
    color: var(--suave);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
  }
  .tabla-tarjetas td:not([data-col])::before { content: none; }
  .tabla-tarjetas td:last-child { border-bottom: 0; }
  .tabla-tarjetas td[data-col="Proyecto"],
  .tabla-tarjetas td[data-col="Dominio"],
  .tabla-tarjetas td[data-col="Número"] {
    display: block;
    text-align: left;
    background: #f7f9fc;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-tarjetas td[data-col="Proyecto"]::before,
  .tabla-tarjetas td[data-col="Dominio"]::before,
  .tabla-tarjetas td[data-col="Número"]::before { content: none; }
  .tabla-tarjetas .nota { display: inline; }
  .tabla-tarjetas .fila-acciones { justify-content: flex-end; text-align: right; }
  .tabla-tarjetas .barra { display: none; }
}

/* ----------------------------------------------------------------- DAR DE BAJA / ELEGIR OPCIÓN */
.dar-baja, .facturar-opcion { display: inline-block; position: relative; }
.dar-baja summary, .facturar-opcion summary { list-style: none; }
.dar-baja summary::before, .facturar-opcion summary::before { content: none; }
.dar-baja summary::-webkit-details-marker, .facturar-opcion summary::-webkit-details-marker { display: none; }
.baja-form, .elegir-opcion {
  position: absolute;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  max-width: calc(100vw - 24px);
  margin-top: 6px;
  padding: 12px;
  text-align: left;
  /* Cuelgan de una celda de acciones, que va en nowrap: aquí el texto sí parte. */
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
}
.baja-form span, .elegir-opcion span { font-size: 12.5px; color: var(--suave); }
.baja-form select, .baja-form input, .elegir-opcion select { width: 100%; font-size: 13.5px; }

/* ----------------------------------------------------------------- GESTORÍA */
.trimestre.vacio-trimestre { opacity: .6; }
.pie-trimestre {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #f7f9fc;
  border-top: 1px solid var(--borde);
  font-size: 13.5px;
  color: var(--suave);
}
.pie-trimestre span { flex: 1 1 340px; }
.titulo-pagina .acciones select { width: auto; }

/* ----------------------------------------------------------------- CIFRAS DEL LISTADO */
.cifras-listado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.cifra-listado {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 13px 16px;
}
.cifra-listado.roja  { border-left-color: var(--rojo); }
.cifra-listado.verde { border-left-color: var(--verde); }
.cifra-listado .etq {
  display: block;
  font-size: 12px;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cifra-listado strong { display: block; margin: 3px 0 2px; font-size: 25px; letter-spacing: -.02em; }
.cifra-listado.roja strong { color: var(--rojo); }
.cifra-listado small { color: var(--suave); font-size: 12.5px; }

.cifra-listado.desglose { padding: 0; }
.cifra-listado.desglose summary { padding: 13px 16px; }
.cifra-listado.desglose summary::before { content: none; }
.cifra-listado.desglose summary:hover { background: #fafbfe; }
.cifra-listado.desglose small { color: var(--acento); font-weight: 600; }
.cifra-listado.desglose details[open] small::after { content: ' ▾'; }
.cifra-listado.desglose table { border-top: 1px solid var(--borde); }
.cifra-listado.desglose[open] { grid-column: 1 / -1; }

/* ----------------------------------------------------------------- TAREAS: HILO */
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
textarea:focus { outline: 2px solid #bfd6f2; border-color: var(--acento); }

.hilo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mensaje {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  max-width: 760px;
}
.mensaje.nuestro { background: #f2f7fd; border-color: #cfe0f5; align-self: flex-end; }
.mensaje header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 0 0 6px;
  background: none;
  border: 0;
  font-size: 13px;
}
.mensaje header span { color: var(--suave); font-size: 12.5px; }
.mensaje div { font-size: 14.5px; line-height: 1.6; }

.responder { padding: 0 16px 16px; }
.responder-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.responder-pie small { color: var(--suave); font-size: 12.5px; }
.responder-pie select { width: auto; margin-left: 6px; }
.responder-pie label { font-size: 13.5px; color: var(--suave); display: flex; align-items: center; }

/* ----------------------------------------------------------------- PLEGABLES */
details summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--acento);
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '▸ '; }
details[open] summary::before { content: '▾ '; }
.resumen-boton { font-weight: 600; font-size: 14px; }
.fila-plegable td { padding: 0 12px 10px; border-bottom: 1px solid var(--borde); }
.fila-plegable .campos { padding-bottom: 8px; }
input[type="file"] { padding: 6px; background: #fff; font-size: 13px; }

/* ----------------------------------------------------------------- MÓVIL Y TABLETA */

/* Nada puede desbordar a lo ancho: ni una tabla, ni una imagen, ni un texto largo. */
html, body { max-width: 100%; overflow-x: hidden; }
img, table { max-width: 100%; }
td, th { overflow-wrap: anywhere; }

@media (max-width: 1200px) {
  main { max-width: 100%; }
}

@media (max-width: 900px) {
  /* --- el menú se guarda detrás de la hamburguesa ---
     Aquí sí va flotando por encima de la página, así que es él quien rueda
     por dentro: por debajo no hay nada que mover. */
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 30;
    width: 82vw;
    max-width: 300px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
  }
  #menu-movil:checked ~ .lateral { transform: none; }
  .principal { min-width: 0; }
  .hamburguesa {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: auto;
    border-radius: 8px;
    border: 1px solid var(--borde);
    font-size: 20px;
  }
  header { padding: 0 14px; gap: 8px; }
  .quien { font-size: 13px; gap: 6px; }
  main { padding: 16px 12px 60px; }

  /* --- títulos y acciones --- */
  .titulo-pagina h1 { font-size: 20px; }
  .titulo-pagina .acciones { margin-left: 0; width: 100%; }
  .titulo-pagina .acciones .boton { flex: 1 1 auto; justify-content: center; }

  /* --- formularios a una columna --- */
  .campos { grid-template-columns: 1fr; }
  .ancho-2, .ancho-3 { grid-column: auto; }
  .formulario { padding: 14px; }
  .pie-formulario { flex-wrap: wrap; }
  .pie-formulario .boton { flex: 1 1 auto; justify-content: center; }

  /* --- filtros: buscador arriba y desplegables a dos columnas --- */
  .filtros { padding: 10px; }
  .filtros .busca { flex: 1 1 100%; }
  .filtros select { flex: 1 1 calc(50% - 4px); max-width: none; }
  .filtros .boton { flex: 1 1 calc(50% - 4px); justify-content: center; }

  /* --- líneas de factura y de cobro: cada fila, una tarjeta --- */
  .tabla-lineas thead { display: none; }
  .tabla-lineas, .tabla-lineas tbody, .tabla-lineas tr, .tabla-lineas td { display: block; width: 100%; }
  .tabla-lineas tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 10px;
    margin-bottom: 10px;
    background: #fbfcfe;
  }
  .tabla-lineas td { padding: 4px 0; }
  .tabla-lineas td::before {
    content: attr(data-col);
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--suave);
    margin-bottom: 2px;
  }
  .tabla-lineas [name="linea_cant[]"],
  .tabla-lineas [name="linea_precio[]"] { width: 100%; }
  .tabla-lineas td:last-child { text-align: right; width: 100%; }
  .pie-lineas { flex-direction: column; align-items: stretch; }
  .pie-lineas .resumen-iva { margin-left: 0; }

  /* --- fichas de acceso y bloques --- */
  .ficha-cuerpo { grid-template-columns: 1fr; }
  .ficha-cuerpo .grupo + .grupo { border-left: 0; border-top: 1px solid var(--borde); }
  .ficha > header { flex-direction: column; align-items: flex-start; }
  .ficha-acciones { justify-content: flex-start; }
  .fichas { grid-template-columns: 1fr; }

  /* --- mensajes de las tareas --- */
  .mensaje { max-width: 100%; }
  .responder-pie { flex-direction: column; align-items: stretch; }
  .responder-pie .boton { justify-content: center; }

  /* --- cifras y desgloses --- */
  .cifras-listado { grid-template-columns: 1fr; }
  .rejilla-cifras { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cifra strong { font-size: 20px; }
  .pie-trimestre { flex-direction: column; align-items: stretch; }
  .pie-trimestre .boton { justify-content: center; }

  /* --- menús desplegables que se salían de la pantalla --- */
  .baja-form, .elegir-opcion {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 16px;
    z-index: 60;
  }
}

@media (max-width: 1200px) {
  /* Las tablas grandes se leen como fichas, sin arrastrar a los lados. */
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas,
  .tabla-tarjetas tbody,
  .tabla-tarjetas tr,
  .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas { border: 0; background: none; box-shadow: none; }
  .tabla-tarjetas tfoot { display: block; }
  .tabla-tarjetas tfoot tr { background: #f7f9fc; }
  .tabla-tarjetas tfoot th { display: flex; justify-content: space-between; padding: 8px 14px; }
  .tabla-tarjetas tr {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .tabla-tarjetas tr:hover { background: var(--panel); }
  .tabla-tarjetas td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid #f1f4f9;
  }
  .tabla-tarjetas td::before {
    content: attr(data-col);
    flex: 0 0 auto;
    color: var(--suave);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
  }
  .tabla-tarjetas td:not([data-col])::before { content: none; }
  .tabla-tarjetas td:last-child { border-bottom: 0; }
  .tabla-tarjetas td[data-col="Proyecto"],
  .tabla-tarjetas td[data-col="Dominio"],
  .tabla-tarjetas td[data-col="Número"],
  .tabla-tarjetas td[data-col="Proveedor"],
  .tabla-tarjetas td[data-col="Cliente"]:first-child {
    display: block;
    text-align: left;
    background: #f7f9fc;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-tarjetas td[data-col="Proyecto"]::before,
  .tabla-tarjetas td[data-col="Dominio"]::before,
  .tabla-tarjetas td[data-col="Número"]::before,
  .tabla-tarjetas td[data-col="Proveedor"]::before { content: none; }
  .tabla-tarjetas .nota { display: inline; }
  .tabla-tarjetas .fila-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    background: #fbfcfe;
  }
  .tabla-tarjetas .fila-acciones .boton { margin: 0; }
  .tabla-tarjetas .barra { display: none; }
}

/* --------------------------------------------------------------- PORTFOLIO */
.rejilla-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
}

.tarjeta-portfolio {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--sombra);
}

.tarjeta-portfolio img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: var(--gris-f);
}

.tarjeta-portfolio-cuerpo {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tarjeta-portfolio-cuerpo strong {
  font-size: 15px;
  color: var(--texto);
}

.tarjeta-portfolio-cuerpo .fila-acciones {
  margin-top: 8px;
  padding: 0;
  border: 0;
}

.tarjeta-portfolio {
  position: relative;
  cursor: grab;
}

.tarjeta-portfolio:active { cursor: grabbing; }

.tarjeta-portfolio.en-construccion { border-color: var(--ambar); }

/* Se atenúa la que se está arrastrando y se resalta donde va a caer. */
.tarjeta-portfolio.arrastrando { opacity: 0.4; }

.tarjeta-portfolio.destino-arrastre {
  outline: 2px dashed var(--acento);
  outline-offset: 2px;
}

.tarjeta-portfolio-asa {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -2px;
  user-select: none;
}

.etiqueta-construccion {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(10, 10, 11, 0.75);
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Móvil estrecho: los botones de acción ocupan toda la fila. */
@media (max-width: 560px) {
  .tabla-tarjetas .fila-acciones { justify-content: stretch; }
  .tabla-tarjetas .fila-acciones .boton,
  .tabla-tarjetas .fila-acciones form,
  .tabla-tarjetas .fila-acciones button { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .titulo-pagina p { font-size: 13px; }
  .rejilla-cifras { grid-template-columns: 1fr; }
  .boton { padding: 9px 14px; }      /* dedos, no ratón */
  .boton.fino { padding: 7px 11px; }
  input, select, textarea { font-size: 16px; }   /* evita el zoom de iOS al escribir */
}

/* ================================================================= ESCRITORIO FLUIDO
   El diseño se adapta al ancho real de la pantalla: el menú y los márgenes crecen y
   encogen con ella, las tablas se compactan, las columnas menos importantes se
   esconden cuando no caben y, si aun así una tabla no cabe, se convierte sola en
   fichas (ver «apretada» al final y la función ajustarTablas de app.js). */

@media (min-width: 901px) {
  .lateral { flex-basis: clamp(196px, 14.5vw, 260px); width: clamp(196px, 14.5vw, 260px); }
}

@media (min-width: 1201px) {
  /* Se aprovecha todo el ancho; los márgenes se ajustan a la pantalla. */
  main { max-width: 2400px; padding: 22px clamp(16px, 2vw, 34px) 60px; }
  header { padding: 0 clamp(16px, 2vw, 34px); }

  /* Las palabras ya no se parten por la mitad: solo si una sola no cabe. */
  td, th { overflow-wrap: break-word; word-break: normal; }

  /* La primera columna (nombre) siempre con un ancho decente. */
  .tabla-datos td[data-col="Proyecto"],
  .tabla-datos td[data-col="Número"],
  .tabla-datos td[data-col="Dominio"],
  .tabla-datos td[data-col="Proveedor"] { min-width: 190px; }
}

/* Pantallas medianas: tablas más compactas y botones de la fila en dos líneas. */
@media (min-width: 1201px) and (max-width: 1700px) {
  .tabla-datos { font-size: 13px; }
  .tabla-datos td { padding: 8px 8px; }
  .tabla-datos thead th { padding: 9px 8px; letter-spacing: 0; font-size: 11.5px; }
  .tabla-datos .fila-acciones { white-space: normal; width: 230px; }
  .tabla-datos .fila-acciones .boton,
  .tabla-datos .fila-acciones form,
  .tabla-datos .fila-acciones select,
  .tabla-datos .fila-acciones details { margin: 2px 0 2px 4px; vertical-align: middle; }
  .cifra-listado strong { font-size: 22px; }
}

/* Columnas de segunda importancia: solo se esconden si la tabla no cabe (lo decide
   ajustarTablas en app.js, primero una y luego la otra), nunca porque sí. */
table.oculta-sec .col-sec { display: none; }
table.oculta-sec2 .col-sec2 { display: none; }

/* Tabla que, aun así, no cabe: la función ajustarTablas (app.js) le pone «apretada» y se lee
   como fichas, igual que en el móvil. Muestra también las columnas escondidas. */
table.tabla-tarjetas.apretada .col-sec,
table.tabla-tarjetas.apretada .col-sec2 { display: flex; }

/* Las tablas grandes se leen como fichas, sin arrastrar a los lados. */
table.tabla-tarjetas.apretada thead { display: none; }
table.tabla-tarjetas.apretada,
table.tabla-tarjetas.apretada tbody,
table.tabla-tarjetas.apretada tr,
table.tabla-tarjetas.apretada td { display: block; width: 100%; }
table.tabla-tarjetas.apretada { border: 0; background: none; box-shadow: none; }
table.tabla-tarjetas.apretada tfoot { display: block; }
table.tabla-tarjetas.apretada tfoot tr { background: #f7f9fc; }
table.tabla-tarjetas.apretada tfoot th { display: flex; justify-content: space-between; padding: 8px 14px; }
table.tabla-tarjetas.apretada tr {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 10px;
  overflow: hidden;
}
table.tabla-tarjetas.apretada tr:hover { background: var(--panel); }
table.tabla-tarjetas.apretada td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  text-align: right;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid #f1f4f9;
}
table.tabla-tarjetas.apretada td::before {
  content: attr(data-col);
  flex: 0 0 auto;
  color: var(--suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: left;
}
table.tabla-tarjetas.apretada td:not([data-col])::before { content: none; }
table.tabla-tarjetas.apretada td:last-child { border-bottom: 0; }
table.tabla-tarjetas.apretada td[data-col="Proyecto"],
table.tabla-tarjetas.apretada td[data-col="Dominio"],
table.tabla-tarjetas.apretada td[data-col="Número"],
table.tabla-tarjetas.apretada td[data-col="Proveedor"],
table.tabla-tarjetas.apretada td[data-col="Cliente"]:first-child {
  display: block;
  text-align: left;
  background: #f7f9fc;
  border-bottom: 1px solid var(--borde);
}
table.tabla-tarjetas.apretada td[data-col="Proyecto"]::before,
table.tabla-tarjetas.apretada td[data-col="Dominio"]::before,
table.tabla-tarjetas.apretada td[data-col="Número"]::before,
table.tabla-tarjetas.apretada td[data-col="Proveedor"]::before { content: none; }
table.tabla-tarjetas.apretada .nota { display: inline; }
table.tabla-tarjetas.apretada .fila-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  background: #fbfcfe;
}
table.tabla-tarjetas.apretada .fila-acciones .boton { margin: 0; }
table.tabla-tarjetas.apretada .barra { display: none; }

/* ---- Tareas (lista de pendientes) ---- */
.todo-lista { list-style: none; margin: 0; padding: 4px 16px; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.todo-item:last-child { border-bottom: 0; }
.todo-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo-item.hecha .todo-texto { text-decoration: line-through; color: var(--suave); }
.todo-check {
  width: 22px; height: 22px; flex: none; padding: 0; cursor: pointer;
  border: 2px solid var(--suave); border-radius: 6px; background: var(--panel);
  color: #fff; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.todo-check:hover { border-color: var(--verde); }
.todo-item.hecha .todo-check { background: var(--verde); border-color: var(--verde); }
.todo-borrar { opacity: .5; }
.todo-item:hover .todo-borrar { opacity: 1; }
.todo-nueva { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; }
.todo-nueva input[type="text"] { flex: 1; min-width: 200px; }