/* Portal de clientes Arisgestión · Imagen corporativa
   Colores tomados del logotipo (azul «Aris» y rojo «gestion financiera») y de la web
   www.arisgestion.com (paleta Odoo: #3D95F3, #142A2E, #F0F4F5). Tipografía de la web: PT Sans,
   alojada en el propio portal (licencia SIL Open Font License; ver static/fonts/OFL.txt). */
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/pt-sans-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/pt-sans-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/pt-sans-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/pt-sans-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/pt-sans-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Marca */
  --marca-azul: #0A2BE6;        /* azul del logotipo (#0020F8), suavizado lo justo para pantalla */
  --marca-rojo: #D81010;        /* rojo del logotipo */
  --web-azul: #3D95F3;          /* color 1 de la web */
  --web-oscuro: #142A2E;        /* color 5 de la web */
  --web-claro: #F0F4F5;         /* color 3 de la web */
  /* Uso en la interfaz */
  --primario: var(--marca-azul);
  --primario-claro: var(--web-azul);
  --acento: var(--marca-rojo);
  --titulos: var(--web-oscuro);
  --fondo: var(--web-claro);
  --superficie: #ffffff;
  --texto: #212529;
  --texto-suave: #52606d;
  --borde: #dbe3e6;
  --ok: #1e7b4f;      --ok-fondo: #e3f4ea;
  --info: #0A56A6;    --info-fondo: #e6f0fd;
  --aviso: #8a5300;   --aviso-fondo: #fdf0d9;
  --peligro: #a51b1b; --peligro-fondo: #fde7e5;
  --neutro: #52606d;  --neutro-fondo: #eef1f4;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 42, 46, .06), 0 1px 3px rgba(20, 42, 46, .08);
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: "PT Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--texto);
       background: var(--fondo); line-height: 1.5; }
a { color: var(--info); }
a:hover { color: var(--primario); }
h1 { font-size: 1.7rem; margin: 0 0 .25rem; color: var(--titulos); }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; color: var(--titulos); }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--titulos); }
.suave { color: var(--texto-suave); }
.centrado { text-align: center; }
.pequeno { font-size: .875rem; }
.oculto-accesible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: absolute; left: -999px; top: 0; background: var(--primario); color: #fff; padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--web-azul); outline-offset: 2px; }

/* Cabecera: blanca con el logotipo y los filetes azul y rojo del logo */
.cabecera { background: #fff; color: var(--texto); border-bottom: 3px solid var(--marca-azul);
            box-shadow: 0 2px 0 var(--marca-rojo); }
.cabecera-dentro { max-width: var(--ancho-max); margin: 0 auto; padding: .6rem var(--margen-lateral); display: flex; align-items: center;
                   gap: 1.25rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--titulos); }
.marca img { height: 46px; width: auto; display: block; }
.marca span { font-size: .8rem; color: var(--texto-suave); border-left: 1px solid var(--borde); padding-left: .75rem; line-height: 1.2; }
.menu { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.menu a { color: var(--titulos); text-decoration: none; padding: .45rem .75rem; border-radius: 8px; font-size: 1rem; font-weight: 700; }
.menu a:hover { background: var(--web-claro); color: var(--primario); }
.menu a.activo { color: var(--primario); background: #e8ecfd; }
.menu a.destacado { background: var(--acento); color: #fff; }
.menu a.destacado:hover { background: #b80d0d; color: #fff; }
.usuario-menu { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--texto-suave); }
.usuario-menu a, .usuario-menu button { color: var(--info); }
.boton-enlace { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.barra-empresa { background: #e8ecfd; color: var(--titulos); border-bottom: 1px solid #d3dafb; }
.barra-empresa form { max-width: var(--ancho-max); margin: 0 auto; padding: .4rem var(--margen-lateral); display: flex; gap: .5rem; align-items: center; font-size: .9rem; }
.barra-empresa select { padding: .25rem .4rem; border-radius: 6px; border: 1px solid #c6cff7; }

/* Contenido */
/* Ancho fluido: ocupa la pantalla con márgenes proporcionales y solo se limita en monitores muy anchos */
:root { --ancho-max: 1680px; --margen-lateral: clamp(1rem, 3vw, 2.5rem); }
main { max-width: var(--ancho-max); margin: 0 auto; padding: 1.5rem var(--margen-lateral) 3rem; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
           padding: 1.25rem; margin-bottom: 1.25rem; }
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla-2 { display: grid; gap: 1.25rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 860px) { .rejilla-2 { grid-template-columns: 1fr; } }
.kpi { text-align: left; }
.kpi .valor { font-size: 1.6rem; font-weight: 700; color: var(--primario); }
.kpi .valor.positivo { color: var(--ok); }
.kpi .valor.negativo { color: var(--peligro); }

/* Accesos rápidos */
.accesos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.acceso { display: block; padding: 1rem; border-radius: var(--radio); background: var(--superficie); border: 2px solid var(--borde);
          text-decoration: none; color: var(--texto); }
.acceso:hover { border-color: var(--primario-claro); }
.acceso strong { display: block; color: var(--primario); }

/* Botones y formularios */
.boton { display: inline-block; padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--primario); background: var(--primario);
         color: #fff; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.boton:hover { background: var(--primario-claro); color: #fff; }
.boton.secundario { background: #fff; color: var(--primario); }
.boton.aviso { background: var(--aviso); border-color: var(--aviso); }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); }
.boton.acento { background: var(--acento); border-color: var(--acento); }
.boton.acento:hover { background: #b80d0d; border-color: #b80d0d; }
.boton.pequeno { padding: .3rem .65rem; font-size: .85rem; }
.formulario p, .campo { margin: 0 0 1rem; }
.formulario label, .campo label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; max-width: 560px; padding: .55rem .65rem; border: 1px solid #b6c4d1; border-radius: 8px; font: inherit; background: #fff; }
textarea { max-width: 100%; }
input[type=file] { padding: .5rem 0; }
.helptext, .ayuda { display: block; color: var(--texto-suave); font-size: .85rem; }
.errorlist { color: var(--peligro); margin: .25rem 0; padding-left: 1.1rem; font-size: .9rem; }
ul.checks, .formulario ul { list-style: none; padding: 0; margin: 0; }
.formulario ul li label { display: inline; font-weight: 400; }
.grupo-campos { border: 1px solid var(--borde); border-radius: 8px; padding: .75rem 1rem 0; margin: 0 0 1rem; }
.grupo-campos legend { font-weight: 600; padding: 0 .4rem; color: var(--texto-suave); }
.filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filtros p, .filtros .campo { margin: 0; }
.filtros input, .filtros select { width: auto; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones form { display: inline; }
.bloque-motivo { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }

/* Tablas */
.tabla-contenedor { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; color: var(--texto-suave); font-weight: 600; border-bottom: 2px solid var(--borde); padding: .5rem .6rem; white-space: nowrap; }
td { border-bottom: 1px solid var(--borde); padding: .55rem .6rem; vertical-align: top; }
tr:hover td { background: #f8fafc; }
td.num, th.num { text-align: right; }
.vacio { color: var(--texto-suave); padding: 1rem 0; }

/* Etiquetas de estado */
.etiqueta { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.etiqueta-ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta-info { background: var(--info-fondo); color: var(--info); }
.etiqueta-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta-peligro { background: var(--peligro-fondo); color: var(--peligro); }
.etiqueta-neutro { background: var(--neutro-fondo); color: var(--neutro); }
.contador { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--acento); color: #fff;
            font-size: .75rem; text-align: center; margin-left: .25rem; }

/* Pestañas */
.pestanas { display: flex; gap: .25rem; border-bottom: 2px solid var(--borde); margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--texto-suave); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestanas a.activa { color: var(--primario); border-color: var(--primario); font-weight: 600; }

/* Mensajes */
.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensajes li { padding: .75rem 1rem; border-radius: 8px; margin-bottom: .5rem; border-left: 4px solid; }
.mensajes .success { background: var(--ok-fondo); border-color: var(--ok); }
.mensajes .info { background: var(--info-fondo); border-color: var(--info); }
.mensajes .warning { background: var(--aviso-fondo); border-color: var(--aviso); }
.mensajes .error { background: var(--peligro-fondo); border-color: var(--peligro); }
.aviso-caja { background: var(--aviso-fondo); border-left: 4px solid var(--aviso); padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.aviso-corregir ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* Historial / conversación */
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { padding: .5rem 0 .5rem 1rem; border-left: 3px solid var(--borde); margin-left: .25rem; }
.mensaje { padding: .75rem 1rem; border-radius: 10px; margin-bottom: .75rem; background: var(--neutro-fondo); }
.mensaje.propio { background: var(--info-fondo); }
.mensaje.interno { background: var(--aviso-fondo); border: 1px dashed var(--aviso); }
.mensaje .meta { font-size: .8rem; color: var(--texto-suave); margin-bottom: .25rem; }
.mensaje .cuerpo { white-space: pre-wrap; }

/* Gráfico SVG */
.grafico svg { width: 100%; height: auto; }
.grafico .ingresos { fill: var(--marca-azul); }
.grafico .gastos { fill: var(--marca-rojo); }
.grafico .eje { stroke: var(--borde); }
.grafico text { font-size: 12px; fill: var(--texto-suave); }
.leyenda { display: flex; gap: 1rem; font-size: .85rem; color: var(--texto-suave); }
.leyenda span::before { content: ""; display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.leyenda .l-ingresos::before { background: var(--marca-azul); }
.leyenda .l-gastos::before { background: var(--marca-rojo); }

/* Matriz de control */
.si { color: var(--ok); font-weight: 700; }
.no { color: var(--peligro); font-weight: 700; }

/* Acceso (login) */
.pantalla-acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
                   background: linear-gradient(160deg, var(--marca-azul) 0%, var(--web-azul) 100%); }
.caja-acceso { background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.caja-acceso h1 { text-align: center; }
.caja-acceso .logo-acceso { display: block; height: 70px; width: auto; margin: 0 auto 1rem; }
.caja-acceso .boton { width: 100%; margin-top: .5rem; }
.caja-acceso input { max-width: 100%; }

/* Paginación y pie */
.paginacion { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.pie { text-align: center; color: #d5e0e2; background: var(--web-oscuro); font-size: .85rem; padding: 1.25rem 1rem; border-top: 3px solid var(--marca-azul); }
.pie a { color: #fff; }
.bienvenida-pasos { counter-reset: paso; list-style: none; padding: 0; }
.bienvenida-pasos li { counter-increment: paso; padding: .75rem 0 .75rem 3rem; position: relative; }
.bienvenida-pasos li::before { content: counter(paso); position: absolute; left: 0; top: .6rem; width: 2rem; height: 2rem; border-radius: 50%;
                               background: var(--primario); color: #fff; text-align: center; line-height: 2rem; font-weight: 700; }
/* --- Cuadro de mando (cifras destacadas) ------------------------------------------- */
.encabezado-tarjeta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.encabezado-tarjeta h2 { margin: 0; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; }
.indicador { border: 1px solid var(--borde); border-radius: var(--radio); padding: .85rem 1rem; background: var(--superficie); }
.indicador-nombre { font-size: .85rem; color: var(--texto-suave); }
.indicador-valor { font-size: 1.55rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.indicador-valor.positivo { color: var(--ok); }
.indicador-valor.negativo { color: var(--peligro); }
.indicador-variacion { font-size: .85rem; margin-top: .15rem; color: var(--texto-suave); }
.indicador-variacion.positivo { color: var(--ok); }
.indicador-variacion.negativo { color: var(--peligro); }

/* --- Expediente activo ---------------------------------------------------------------- */
.tarjeta.destacada { border-left: 4px solid var(--acento); }
.separador { margin-top: 2rem; }
.solicitud { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 0; border-bottom: 1px solid var(--borde); }
.solicitud:last-child { border-bottom: 0; }
.formulario.en-linea { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.formulario.en-linea p { margin: 0; }
.evento-exp { font-size: .9rem; padding: .4rem .75rem; margin: .25rem 0 .75rem; border-left: 3px solid var(--borde); color: var(--texto-suave); }

/* --- Preguntas frecuentes -------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--borde); padding: .65rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--primario); }
.faq details p { margin: .5rem 0 0; }

/* --- Revisión de facturas ---------------------------------------------------------------- */
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.tabla-importes { width: 100%; margin-bottom: 1rem; }
.tabla-importes input { width: 100%; max-width: 9rem; }
.confianza { font-weight: 700; }
.confianza-alta { color: var(--ok); }
.confianza-media { color: var(--aviso); }
.confianza-baja { color: var(--peligro); }

/* --- Indicadores de dirección -------------------------------------------------------------- */
table.barras td:nth-child(2) { width: 60%; }
svg.barra { width: 100%; height: 14px; display: block; }
svg.barra .fondo { fill: var(--neutro-fondo); }
svg.barra .valor { fill: var(--primario); }
.direccion-buzon { font-size: 1.1rem; word-break: break-all; padding: .6rem .8rem; background: var(--info-fondo); border-radius: 8px; }
.tarjeta.ejemplo { border: 2px dashed var(--borde); background: var(--fondo); }
.tarjeta.ejemplo h2 .etiqueta { vertical-align: middle; margin-right: .4rem; }

/* --- Consultas unificadas, envío simple y desglose de gastos ------------------------------- */
.etiqueta-encargo { background: var(--primario); color: #fff; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zona-ficheros { border: 2px dashed var(--borde); border-radius: var(--radio); padding: 1.25rem; background: var(--fondo); }
.zona-ficheros input[type=file] { display: block; margin: .5rem 0; }
.boton.grande { padding: .8rem 1.6rem; font-size: 1.05rem; }
table.partidas td:nth-child(2) { width: 40%; }
svg.barra-gasto { width: 100%; height: 14px; display: block; }
svg.barra-gasto rect { fill: var(--marca-rojo); }
.filtros input[type=search] { min-width: 18rem; padding: .5rem .65rem; border: 1px solid var(--borde); border-radius: 8px; font: inherit; }

/* Gráfica: eje de importes y, por mes, el detalle de ingresos y gastos al pasar el cursor o pinchar */
.grafico .guia { stroke: var(--borde); stroke-dasharray: 3 4; }
.grafico .eje-importe { font-size: 12px; fill: var(--texto-suave); }
.grafico-dibujo { position: relative; }
.grafico-zonas { position: absolute; top: 0; bottom: 0; left: 8%; right: 0; display: grid; }
.grafico-zonas.meses-1 { grid-template-columns: repeat(1, 1fr); }
.grafico-zonas.meses-2 { grid-template-columns: repeat(2, 1fr); }
.grafico-zonas.meses-3 { grid-template-columns: repeat(3, 1fr); }
.grafico-zonas.meses-4 { grid-template-columns: repeat(4, 1fr); }
.grafico-zonas.meses-5 { grid-template-columns: repeat(5, 1fr); }
.grafico-zonas.meses-6 { grid-template-columns: repeat(6, 1fr); }
.grafico-zonas.meses-7 { grid-template-columns: repeat(7, 1fr); }
.grafico-zonas.meses-8 { grid-template-columns: repeat(8, 1fr); }
.grafico-zonas.meses-9 { grid-template-columns: repeat(9, 1fr); }
.grafico-zonas.meses-10 { grid-template-columns: repeat(10, 1fr); }
.grafico-zonas.meses-11 { grid-template-columns: repeat(11, 1fr); }
.grafico-zonas.meses-12 { grid-template-columns: repeat(12, 1fr); }
.mes-zona.mes-1 { grid-column: 1; }
.mes-zona.mes-2 { grid-column: 2; }
.mes-zona.mes-3 { grid-column: 3; }
.mes-zona.mes-4 { grid-column: 4; }
.mes-zona.mes-5 { grid-column: 5; }
.mes-zona.mes-6 { grid-column: 6; }
.mes-zona.mes-7 { grid-column: 7; }
.mes-zona.mes-8 { grid-column: 8; }
.mes-zona.mes-9 { grid-column: 9; }
.mes-zona.mes-10 { grid-column: 10; }
.mes-zona.mes-11 { grid-column: 11; }
.mes-zona.mes-12 { grid-column: 12; }
.mes-zona { grid-row: 1; position: relative; cursor: pointer; border-radius: 6px; outline: none; }
.mes-zona:hover, .mes-zona:focus, .mes-zona:focus-within { background: rgba(10, 86, 166, .08); }
.mes-zona:focus-visible { box-shadow: inset 0 0 0 2px var(--primario); }
.mes-detalle { display: none; position: absolute; z-index: 20; top: 4px; left: 50%; transform: translateX(-50%);
  width: 19rem; max-width: 80vw; padding: .75rem .9rem; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: .85rem; cursor: default; }
.mes-detalle.derecha { left: auto; right: 0; transform: none; }
.mes-zona:first-child .mes-detalle:not(.derecha) { left: 0; transform: none; }
.mes-zona:hover .mes-detalle, .mes-zona:focus .mes-detalle, .mes-zona:focus-within .mes-detalle { display: block; }
.mes-detalle-titulo { font-weight: 700; color: var(--titulos); margin-bottom: .4rem; }
.mes-bloque { margin-bottom: .5rem; }
.mes-total, .mes-partida { display: flex; justify-content: space-between; gap: .75rem; }
.mes-total { font-weight: 600; padding: .15rem 0; border-bottom: 1px solid var(--borde); }
.mes-total.l-ingresos::before, .mes-total.l-gastos::before { display: none; }
.mes-total.l-ingresos span::before, .mes-total.l-gastos span::before { content: ""; display: inline-block; width: .7rem;
  height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.mes-total.l-ingresos span::before { background: var(--marca-azul); }
.mes-total.l-gastos span::before { background: var(--marca-rojo); }
.mes-partida { color: var(--texto-suave); padding: .1rem 0 .1rem 1.05rem; }
.mes-partida span:last-child { white-space: nowrap; }
.mes-resultado { border-bottom: 0; border-top: 2px solid var(--borde); margin-top: .2rem; }
.leyenda .pequeno { margin-left: auto; }

/* Expedientes: filas simples y bloques plegables */
.miga { margin: 0 0 .5rem; font-size: .9rem; }
.fila-expediente { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem .5rem; border-bottom: 1px solid var(--borde); }
.fila-expediente:last-of-type { border-bottom: 0; }
.fila-expediente.enlazada { color: inherit; text-decoration: none; border-radius: var(--radio); }
.fila-expediente.enlazada:hover, .fila-expediente.enlazada:focus-visible { background: var(--fondo); }
.fila-expediente.enlazada strong { color: var(--primario); }
details.plegable > summary { cursor: pointer; list-style-position: inside; }
details.plegable[open] > summary { margin-bottom: .75rem; }
@media (max-width: 600px) { .fila-expediente { flex-direction: column; align-items: flex-start; gap: .4rem; } }

/* Adaptación a pantallas pequeñas */
img, svg { max-width: 100%; }
.tabla-contenedor { overflow-x: auto; }
@media (max-width: 900px) {
  .cabecera-dentro { gap: .6rem; }
  .menu { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .menu a { white-space: nowrap; font-size: .95rem; padding: .4rem .6rem; }
  .usuario-menu { margin-left: auto; }
}
@media (max-width: 600px) {
  main { padding-top: 1rem; }
  .tarjeta { padding: 1rem; }
  .encabezado { align-items: flex-start; }
  .encabezado .boton, .encabezado .acciones { width: 100%; }
  .encabezado .acciones { display: flex; flex-direction: column; gap: .5rem; }
  .marca span { display: none; }
  .barra-empresa form { flex-wrap: wrap; }
  .barra-empresa select { flex: 1; min-width: 0; }
}
/* La gráfica no se encoge por debajo de lo legible: en el móvil se desliza en horizontal y el detalle del
   mes sale fijo abajo (si no, el desplazamiento lo recortaría) */
@media (max-width: 700px) {
  .grafico-lienzo { overflow-x: auto; }
  .grafico-dibujo { min-width: 620px; }
  .mes-detalle, .mes-detalle.derecha, .mes-zona:first-child .mes-detalle:not(.derecha) { position: fixed; top: auto;
    bottom: 1rem; left: 1rem; right: 1rem; width: auto; max-width: none; transform: none; max-height: 60vh; overflow-y: auto; }
  .grafico text { font-size: 22px; }
  .tarjeta .num { white-space: nowrap; }
  svg.barra-gasto { display: none; }
}
.encabezado > div:first-child { flex: 1 1 28rem; }
.encabezado > div:first-child > p { margin: .35rem 0; max-width: 70rem; }
.indicador-valor.pequeno-valor { font-size: 1.15rem; }

/* Cabecera a todo el ancho y menú siempre en una sola línea en ordenador */
.cabecera-dentro { max-width: none; }
.cabecera-cliente .cabecera-dentro { flex-wrap: nowrap; }
.cabecera-cliente .menu { flex-wrap: nowrap; }
.menu a { white-space: nowrap; }
.menu a.destacado { margin-left: .35rem; }
.usuario-menu { white-space: nowrap; margin-left: auto; }
@media (max-width: 1400px) {
  .marca span { display: none; }
  .menu a { padding: .4rem .55rem; font-size: .95rem; }
}
@media (max-width: 900px) {
  .cabecera-cliente .cabecera-dentro { flex-wrap: wrap; }
}
.marca { flex-shrink: 0; }
/* Por debajo de 1150 px el menú del cliente baja a su propia fila, también en una sola línea */
@media (max-width: 1150px) {
  .cabecera-cliente .cabecera-dentro { flex-wrap: wrap; }
  .cabecera-cliente .menu { order: 3; flex-basis: 100%; overflow-x: auto; }
}
/* Cabecera alineada con el contenido y menú centrado entre el logotipo y el usuario */
.cabecera-dentro { max-width: var(--ancho-max); }
.cabecera-cliente .menu { justify-content: center; }
.cabecera-cliente .usuario-menu { margin-left: 0; }
@media (max-width: 1150px) { .cabecera-cliente .menu { justify-content: flex-start; } .cabecera-cliente .usuario-menu { margin-left: auto; } }


/* ===== Solicitudes, al estilo de Jira ===== */
:root { --jira-gris: #dfe1e6; --jira-gris-texto: #42526e; --jira-azul: #0052cc; --jira-azul-fondo: #deebff;
        --jira-verde: #006644; --jira-verde-fondo: #e3fcef; --jira-amarillo: #974f0c; --jira-amarillo-fondo: #fff0b3;
        --tipo-consulta: #0e7c86; --tipo-encargo: #0052cc; --tipo-gestion: #6554c0; --columna-fondo: #f4f5f7; }
.tipo-icono { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
  border-radius: 3px; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; vertical-align: -.15rem; flex-shrink: 0; }
.tipo-consulta { background: var(--tipo-consulta); } .tipo-encargo { background: var(--tipo-encargo); } .tipo-gestion { background: var(--tipo-gestion); }
.tipo-texto { font-size: .9rem; }
.lozenge { display: inline-block; padding: .1rem .4rem; border-radius: 3px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; vertical-align: .05rem; }
.lozenge-por-hacer { background: var(--jira-gris); color: var(--jira-gris-texto); }
.lozenge-en-curso { background: var(--jira-azul-fondo); color: var(--jira-azul); }
.lozenge-esperando { background: var(--jira-amarillo-fondo); color: var(--jira-amarillo); }
.lozenge-hecho { background: var(--jira-verde-fondo); color: var(--jira-verde); }
.lozenge-cerrada { background: var(--jira-gris); color: var(--jira-gris-texto); }
.prioridad { font-weight: 700; white-space: nowrap; }
.prioridad-urgente { color: #de350b; } .prioridad-normal { color: #ff991f; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #00875a; color: #fff; font-size: .68rem; font-weight: 700; flex-shrink: 0; vertical-align: middle; }
.avatar-gestoria { background: var(--jira-azul); }
.vacio-avatar { background: var(--jira-gris); color: var(--jira-gris-texto); }
.clave { font-size: .85rem; color: var(--jira-gris-texto); font-weight: 600; white-space: nowrap; }
td.clave a { color: var(--jira-gris-texto); }
.contador { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 1rem; background: var(--jira-gris);
  color: var(--jira-gris-texto); font-size: .75rem; text-align: center; }
.contador.aviso { background: var(--jira-amarillo-fondo); color: var(--jira-amarillo); }

/* Barra de filtros rápidos y conmutador Tablero / Lista */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.barra-filtros .buscar { flex: 1 1 18rem; max-width: 26rem; }
.barra-filtros select, .barra-filtros .buscar { padding: .45rem .6rem; border: 1px solid #b6c4d1; border-radius: 6px; font: inherit; background: #fff; }
.casilla { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.conmutador { margin-left: auto; display: inline-flex; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; background: #fff; }
.conmutador a { padding: .4rem .9rem; text-decoration: none; color: var(--jira-gris-texto); font-weight: 600; }
.conmutador a.activa { background: var(--jira-azul-fondo); color: var(--jira-azul); }

/* Tablero */
.tablero { display: grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.25rem; }
.tablero-columna { background: var(--columna-fondo); border-radius: 6px; padding: .6rem; min-height: 8rem; }
.tablero-columna h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--jira-gris-texto); margin: .2rem .2rem .7rem; }
.tarjeta-solicitud { display: flex; flex-direction: column; gap: .45rem; background: #fff; border-radius: 4px; padding: .65rem .7rem;
  margin-bottom: .5rem; box-shadow: 0 1px 2px rgba(9, 30, 66, .25); text-decoration: none; color: var(--texto); }
.tarjeta-solicitud:hover, .tarjeta-solicitud:focus-visible { background: #f4f8ff; }
.tarjeta-solicitud.urgente { border-left: 3px solid #de350b; }
.tarjeta-resumen { font-weight: 600; line-height: 1.3; }
.tarjeta-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; }
.etiqueta-area { font-size: .72rem; background: var(--columna-fondo); color: var(--jira-gris-texto); border-radius: 3px; padding: .05rem .35rem; }
.tarjeta-pie { display: flex; align-items: center; gap: .4rem; }
.pie-derecha { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; }
.tablero-vacio { color: var(--texto-suave); font-size: .85rem; text-align: center; margin: 1.5rem 0; }
.tabla-solicitudes td { vertical-align: middle; }

/* Vista de una solicitud: columna principal y panel de detalles */
.incidencia { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: start; }
.incidencia-principal > h1 { margin-top: .25rem; }
.incidencia-principal section { margin-bottom: 1.75rem; }
.incidencia-principal h2 { font-size: 1rem; margin-bottom: .5rem; }
.descripcion { background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: .9rem 1rem; }
.incidencia-lateral { background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: 1rem; position: sticky; top: 1rem; }
.estado-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.estado-acciones .lozenge { font-size: .85rem; padding: .3rem .6rem; }
.detalles { display: grid; grid-template-columns: 7rem 1fr; gap: .55rem .75rem; margin: 0 0 1rem; font-size: .92rem; }
.detalles dt { color: var(--jira-gris-texto); font-weight: 600; }
.detalles dd { margin: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pequeno-titulo { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--jira-gris-texto); }
.adjuntos { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.adjuntos li { margin-bottom: .5rem; }
.subtareas { list-style: none; padding: 0; margin: 0; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); }
.subtarea { padding: .7rem .9rem; border-bottom: 1px solid var(--borde); }
.subtarea:last-child { border-bottom: 0; }
.subtarea.pendiente { border-left: 3px solid #ff991f; }
.subtarea-cabecera { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.subtarea form { margin-top: .6rem; }
.actividad { list-style: none; padding: 0; margin: 1rem 0 0; }
.actividad .comentario { display: flex; gap: .75rem; margin-bottom: 1.1rem; }
.actividad .comentario .meta { font-size: .88rem; color: var(--texto-suave); margin-bottom: .2rem; }
.actividad .cambio { font-size: .88rem; color: var(--texto-suave); padding: .35rem 0 .35rem 1rem; border-left: 2px solid var(--borde); margin: 0 0 .6rem .8rem; }
.comentar { display: flex; gap: .75rem; align-items: flex-start; }
.comentar > div { flex: 1; }
.comentar textarea { max-width: 100%; }
@media (max-width: 900px) {
  .incidencia { grid-template-columns: 1fr; }
  .incidencia-lateral { position: static; order: -1; }
  .conmutador { margin-left: 0; }
}

/* Crear solicitud: tipo en tarjetas con su explicación */
.formulario-solicitud { max-width: 52rem; }
.tipos-solicitud { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tipos-solicitud legend { font-weight: 600; margin-bottom: .5rem; }
.tipo-opcion { display: flex; gap: .6rem; align-items: flex-start; border: 2px solid var(--borde); border-radius: 8px; padding: .8rem; cursor: pointer; background: #fff; }
.tipo-opcion:has(input:checked) { border-color: var(--jira-azul); background: #f4f8ff; }
.tipo-opcion-cuerpo { display: flex; flex-direction: column; gap: .25rem; }
.ayuda { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: .2rem; }
.acciones-formulario { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 600px) { .tipos-solicitud { grid-template-columns: 1fr; } }

/* Detalle de gastos */
tr.seleccionada td { background: var(--info-fondo); }
.periodos { flex-wrap: nowrap; overflow-x: auto; }
.periodos a { white-space: nowrap; }
.barra-filtros select, .barra-filtros .buscar { width: auto; max-width: none; }
.barra-filtros .buscar { flex: 1 1 16rem; max-width: 24rem; }
.detalles dd { flex-wrap: nowrap; }
.tipo-opcion input[type=radio] { width: auto; margin: .3rem 0 0; flex-shrink: 0; }
.tipo-opcion-titulo { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.formulario label.tipo-opcion { display: flex; font-weight: 400; margin: 0; }

/* ===== Solicitudes más sencillas para el cliente ===== */
.lozenge { text-transform: none; letter-spacing: 0; font-size: .8rem; padding: .15rem .55rem; border-radius: 1rem; }
.etiqueta-urgente { background: #ffebe6; color: #bf2600; }
.aviso-ok { background: var(--jira-verde-fondo); color: var(--jira-verde); border-radius: 8px; padding: .65rem 1rem; font-weight: 600; margin: 0 0 1rem; }
.te-necesitamos h2 { margin-bottom: .25rem; }
.titulo-fila { font-weight: 600; }

/* Filtros de un clic (botones redondeados) y buscador */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 2rem; border: 1px solid var(--borde);
  background: #fff; color: var(--texto); text-decoration: none; font-weight: 600; font-size: .92rem; }
.chips a:hover { border-color: var(--jira-azul); }
.chips a.activa { background: var(--jira-azul); border-color: var(--jira-azul); color: #fff; }
.chips a.activa .contador { background: rgba(255, 255, 255, .25); color: #fff; }
.chips a.chip-aviso { border-color: #ffc400; }
.chips a.chip-aviso.activa { background: #ffc400; border-color: #ffc400; color: #172b4d; }
.buscador { display: inline-flex; gap: .4rem; align-items: center; }
.buscador input[type=search] { width: 14rem; max-width: 100%; padding: .45rem .6rem; border: 1px solid #b6c4d1; border-radius: 6px; font: inherit; }

/* Tablero del cliente: la columna «Te necesitamos», destacada y la primera */
.tablero-cliente .columna-esperando { background: #fffae6; outline: 2px solid #ffe380; }
.tablero-cliente .columna-esperando h3 { color: var(--jira-amarillo); }
.columna-ayuda { margin: -.3rem .2rem .6rem; color: var(--jira-amarillo); }
.tarjeta-tipo { font-size: .88rem; display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.vacio-grande { text-align: center; padding: 2.5rem 1.5rem; }
.vacio-grande p { max-width: 36rem; margin: .5rem auto 1.25rem; color: var(--texto-suave); }

/* Barra de progreso de una solicitud: Recibida → En marcha → Terminada */
.subtitulo-solicitud { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: -.4rem; }
.progreso { list-style: none; display: flex; padding: 0; margin: 1rem 0 1.25rem; counter-reset: paso; max-width: 40rem; }
.progreso li { flex: 1; position: relative; text-align: center; font-size: .9rem; color: var(--texto-suave); }
.progreso li::before { content: ""; position: absolute; top: .95rem; left: -50%; width: 100%; height: 3px; background: var(--jira-gris); z-index: 0; }
.progreso li:first-child::before { display: none; }
.progreso li.hecho::before, .progreso li.actual::before { background: #36b37e; }
.progreso .punto { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--jira-gris); color: var(--jira-gris-texto); font-weight: 700; margin-bottom: .3rem; }
.progreso li.hecho .punto { background: #36b37e; color: #fff; }
.progreso li.actual .punto { background: var(--jira-azul); color: #fff; box-shadow: 0 0 0 4px var(--jira-azul-fondo); }
.progreso li.actual.esperando .punto { background: #ffab00; color: #172b4d; box-shadow: 0 0 0 4px #fff0b3; }
.progreso li.actual .paso-texto { color: var(--texto); font-weight: 600; }
.progreso .paso-texto { display: block; }
.progreso li.esperando strong { color: var(--jira-amarillo); }
.que-hacer { background: #fffae6; border: 1px solid #ffe380; border-left: 5px solid #ffab00; border-radius: 6px; padding: .8rem 1rem; margin: 0 0 1.5rem; }

/* Conversación como un chat */
.chat .comentario .burbuja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 0 12px 12px 12px; padding: .6rem .85rem; max-width: 46rem; }
.chat .comentario.propio { flex-direction: row-reverse; }
.chat .comentario.propio .burbuja { background: #e9f2ff; border-color: #cce0ff; border-radius: 12px 0 12px 12px; }
.chat .cambio { border-left: 0; text-align: center; padding: .2rem 0; margin: 0 0 .8rem; }
.cerrar-solicitud { border-top: 1px solid var(--borde); padding-top: .8rem; margin-top: 1rem; }
.cerrar-solicitud p { margin: 0 0 .4rem; }

/* Nueva solicitud en pasos numerados */
.pasos-formulario .paso { border: 0; padding: 0; margin: 0 0 1.5rem; }
.pasos-formulario legend { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.numero-paso { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--jira-azul); color: #fff; font-size: .9rem; }
.pasos-formulario .tipos-solicitud { margin: 0; }
.formulario .casilla-urgente label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.formulario .casilla-urgente input { width: auto; }
@media (max-width: 600px) {
  .buscador { width: 100%; }
  .buscador input[type=search] { flex: 1; width: auto; }
  .progreso { font-size: .8rem; }
}

/* ===== Solicitudes del cliente, versión sencilla (filas grandes, frases claras, una columna) ===== */
.boton-grande { font-size: 1.05rem; padding: .75rem 1.3rem; }
.solicitud-fila { display: flex; align-items: center; gap: 1rem; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: .6rem; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); }
.solicitud-fila:hover, .solicitud-fila:focus-visible { border-color: var(--jira-azul); background: #f7faff; }
.solicitud-fila.te-necesita { border-left: 6px solid #ffab00; }
.solicitud-fila.apagada { box-shadow: none; }
.solicitud-cuerpo { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.solicitud-titulo { font-size: 1.1rem; color: var(--titulos); }
.solicitud-estado { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; }
.te-necesita .solicitud-estado, .estado-grande.te-necesita { color: var(--jira-amarillo); font-weight: 700; }
.punto-aviso { width: .7rem; height: .7rem; border-radius: 50%; background: #ffab00; flex-shrink: 0; }
.solicitud-ir { font-size: 1.8rem; color: var(--texto-suave); line-height: 1; }
.terminadas summary { margin-bottom: .6rem; }
.solicitud-simple { max-width: 56rem; }
.solicitud-simple section { margin: 1.75rem 0; }
.estado-grande { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .3rem; }
.enviar-pedido { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .7rem; }
.enviar-pedido label { width: 100%; margin: 0; }
.enviar-pedido input[type=file] { width: auto; flex: 1; }
.formulario.responder label { font-weight: 700; }
.adjuntar { margin: .6rem 0 1rem; }
.adjuntar summary { cursor: pointer; color: var(--info); }
.cerrar-solicitud { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 1rem; }
@media (max-width: 600px) {
  .solicitud-fila { padding: .9rem; }
  .encabezado .boton-grande { width: 100%; text-align: center; }
}


/* Solicitudes del cliente: tablero al estilo de Jira, simplificado (tres columnas en lenguaje llano) */
.tablero-simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; align-items: start; }
.columna-simple { background: var(--columna-fondo); border-radius: 10px; padding: .8rem; min-height: 10rem; }
.columna-simple h2 { font-size: 1.05rem; margin: .2rem .3rem .8rem; display: flex; align-items: center; gap: .5rem; }
.columna-te-toca { background: #fffae6; outline: 2px solid #ffe380; }
.columna-te-toca h2 { color: var(--jira-amarillo); }
.columna-terminado { background: #f1f8f4; }
.tarjeta-simple { display: flex; flex-direction: column; gap: .4rem; background: #fff; border-radius: 8px; padding: .85rem .9rem;
  margin-bottom: .6rem; box-shadow: 0 1px 3px rgba(9, 30, 66, .2); text-decoration: none; color: var(--texto);
  border: 2px solid transparent; }
.tarjeta-simple:hover, .tarjeta-simple:focus-visible { border-color: var(--jira-azul); }
.tarjeta-simple strong { font-size: 1.05rem; color: var(--titulos); line-height: 1.3; }
.tarjeta-frase { font-size: .95rem; }
.columna-te-toca .tarjeta-frase { color: var(--jira-amarillo); font-weight: 700; }
.tarjeta-simple .tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.columna-vacia { color: var(--texto-suave); text-align: center; margin: 1.5rem .5rem; }
@media (max-width: 900px) { .tablero-simple { grid-template-columns: 1fr; } .columna-simple { min-height: 0; } }

/* ===== Solicitudes del cliente: aspecto sobrio, como el Jira real (sin colores llamativos) ===== */
.tablero-sobrio { gap: .75rem; }
.tablero-sobrio .columna-simple, .tablero-sobrio .columna-te-toca, .tablero-sobrio .columna-terminado {
  background: #f4f5f7; outline: 0; border-radius: 4px; padding: .5rem; min-height: 6rem; }
.tablero-sobrio .columna-simple h2, .tablero-sobrio .columna-te-toca h2 {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5e6c84; margin: .35rem .3rem .6rem; }
.tablero-sobrio .contador { background: #dfe1e6; color: #42526e; font-size: .72rem; }
.tablero-sobrio .tarjeta-simple { border: 0; border-radius: 3px; padding: .6rem .7rem; gap: .3rem; margin-bottom: .4rem;
  box-shadow: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31); }
.tablero-sobrio .tarjeta-simple:hover, .tablero-sobrio .tarjeta-simple:focus-visible { background: #ebecf0; border: 0; }
.tablero-sobrio .tarjeta-simple strong { font-size: .92rem; font-weight: 600; color: #172b4d; }
.tablero-sobrio .tarjeta-frase, .tablero-sobrio .columna-te-toca .tarjeta-frase { font-size: .82rem; font-weight: 400; color: #5e6c84; }
.tablero-sobrio .tarjeta-pie .pequeno { font-size: .75rem; color: #6b778c; }
.tablero-sobrio .avatar { width: 1.45rem; height: 1.45rem; font-size: .62rem; background: #0052cc; }
.tablero-sobrio .columna-vacia { font-size: .82rem; color: #6b778c; margin: 1rem .5rem; }
.tablero-sobrio .columna-simple > a.pequeno { display: inline-block; margin: .3rem; font-size: .8rem; }

.incidencia-sobria h1 { font-size: 1.5rem; }
.incidencia-sobria .estado-frase { display: flex; align-items: center; gap: .6rem; color: #42526e; margin: .2rem 0 .4rem; }
.incidencia-sobria .lozenge { text-transform: uppercase; letter-spacing: .02em; font-size: .72rem; border-radius: 3px; padding: .1rem .4rem; }
.incidencia-sobria .progreso li.hecho .punto, .incidencia-sobria .progreso li.hecho::before,
.incidencia-sobria .progreso li.actual::before { background: #0052cc; }
.incidencia-sobria .progreso li.actual.esperando .punto { background: #0052cc; color: #fff; box-shadow: 0 0 0 4px #deebff; }
.incidencia-sobria .progreso li.esperando strong { color: #42526e; font-weight: 600; }
.incidencia-sobria .progreso .punto { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
.incidencia-sobria .progreso li::before { top: .8rem; height: 2px; }
.incidencia-sobria .progreso { font-size: .82rem; max-width: 30rem; }
.incidencia-sobria h2 { font-size: .95rem; color: #172b4d; }
.incidencia-sobria .subtareas { border-radius: 3px; }
.incidencia-sobria .subtarea.pendiente { border-left: 0; }
.incidencia-sobria .lozenge-hecho { background: #e3fcef; color: #006644; }
/* Comentarios planos, como en Jira: sin burbujas ni alineación a la derecha */
.incidencia-sobria .chat .comentario, .incidencia-sobria .chat .comentario.propio { flex-direction: row; }
.incidencia-sobria .chat .comentario .burbuja, .incidencia-sobria .chat .comentario.propio .burbuja {
  background: transparent; border: 0; border-radius: 0; padding: 0; max-width: none; }
.incidencia-sobria .chat .comentario .meta { font-size: .82rem; color: #6b778c; }
.incidencia-sobria .chat .comentario .meta strong { color: #172b4d; }
.incidencia-sobria .chat .cambio { text-align: left; font-size: .82rem; color: #6b778c; padding-left: 2.35rem; }
.incidencia-sobria .avatar { background: #0052cc; }
.incidencia-sobria .incidencia-lateral { border-radius: 3px; }
.incidencia-sobria .formulario.responder label { font-size: .9rem; }

/* Tablero del cliente: títulos más grandes y un color de fondo suave por columna */
.tablero-sobrio .columna-simple { padding: 0 0 .5rem; border-radius: 8px; overflow: hidden; }
.tablero-sobrio .columna-simple h2, .tablero-sobrio .columna-te-toca h2 {
  font-size: 1.1rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 .6rem; padding: .75rem .9rem; color: #fff; }
.tablero-sobrio .columna-simple .tarjeta-simple, .tablero-sobrio .columna-simple .columna-vacia,
.tablero-sobrio .columna-simple > a.pequeno { margin-left: .55rem; margin-right: .55rem; }
.tablero-sobrio .columna-te-toca { background: #fff4d6; }
.tablero-sobrio .columna-te-toca h2 { background: #c77700; }
.tablero-sobrio .columna-haciendo { background: #e3edfd; }
.tablero-sobrio .columna-haciendo h2 { background: #0052cc; }
.tablero-sobrio .columna-terminado { background: #e2f5ea; }
.tablero-sobrio .columna-terminado h2 { background: #1f845a; }
.tablero-sobrio .columna-simple h2 .contador { background: rgba(255, 255, 255, .25); color: #fff; font-size: .8rem; }
.tablero-sobrio .tarjeta-simple strong { font-size: 1rem; }
/* Letra de las tarjetas del tablero del cliente, un poco más grande */
.tablero-sobrio .tarjeta-simple strong { font-size: 1.1rem; }
.tablero-sobrio .tarjeta-frase, .tablero-sobrio .columna-te-toca .tarjeta-frase { font-size: .95rem; }
.tablero-sobrio .tarjeta-pie .pequeno { font-size: .85rem; }
.tablero-sobrio .avatar { width: 1.65rem; height: 1.65rem; font-size: .7rem; }

/* --- Facturas para Sage: bandeja y revisión lado a lado ------------------------------------- */
.contadores-facturas { margin-bottom: 1.25rem; }
.contadores-facturas .kpi { display: block; margin: 0; text-decoration: none; color: inherit; }
.contadores-facturas .kpi:hover { border-color: var(--primario-claro); }
.revision-factura { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.visor-factura { position: sticky; top: 1rem; padding: .5rem; height: calc(100vh - 2rem); min-height: 32rem; margin: 0; }
.visor-factura iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; background: var(--neutro-fondo); }
.visor-factura img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; object-fit: contain; }
.visor-factura .vacio { padding: 2rem 1rem; }
.datos-factura { min-width: 0; }
.campo-factura { position: relative; }
.origen-dato { display: inline-block; margin-top: .2rem; padding: 0 .45rem; border-radius: 999px; font-size: .78rem;
               background: var(--neutro-fondo); color: var(--neutro); }
.campo-factura .origen-dato + .origen-dato { margin-left: .3rem; }
.dudoso-texto { background: var(--aviso-fondo); color: var(--aviso); font-weight: 700; }
.campo-factura.dudoso input, td.dudoso input { border-color: var(--aviso); box-shadow: 0 0 0 2px var(--aviso-fondo); }
.avisos-factura summary { cursor: pointer; }
.acciones-revision { position: sticky; bottom: 0; background: var(--superficie); padding: .75rem 0 .25rem;
                     border-top: 1px solid var(--borde); align-items: center; }
@media (max-width: 1100px) {
  .revision-factura { grid-template-columns: 1fr; }
  .visor-factura { position: static; height: 70vh; min-height: 20rem; }
}
.visor-factura iframe { height: calc(100% - 1.75rem); }
.visor-ayuda { margin: .35rem .25rem 0; }

/* --- Mis documentos en carpetas ------------------------------------------------------------- */
.buscador-documentos { display: flex; gap: .5rem; align-items: center; }
.buscador-documentos input { min-width: 14rem; padding: .5rem .65rem; border: 1px solid var(--borde); border-radius: 8px; font: inherit; }
.carpetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 1.25rem; }
.carpeta { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: .75rem; row-gap: .2rem;
           padding: 1.1rem 1.25rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
           box-shadow: var(--sombra); color: inherit; text-decoration: none; }
.carpeta:hover, .carpeta:focus-visible { border-color: var(--primario-claro); color: inherit; }
.carpeta .carpeta-icono { grid-row: 1 / span 3; width: 2.4rem; height: 2.4rem; fill: #f2b84b; }
.carpeta-nombre { font-weight: 700; font-size: 1.1rem; color: var(--titulos); }
.carpeta-desc { font-size: .9rem; color: var(--texto-suave); }
.carpeta-n { font-size: .85rem; color: var(--primario); font-weight: 700; }
.carpeta-intercambio { background: var(--info-fondo); border-color: #b9d3f5; }
.carpeta-intercambio .carpeta-icono { fill: var(--primario-claro); }
.subcarpetas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.subcarpeta { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; background: var(--superficie);
              border: 1px solid var(--borde); border-radius: 8px; color: var(--texto); text-decoration: none; }
.subcarpeta .carpeta-icono { width: 1.2rem; height: 1.2rem; fill: #f2b84b; }
.subcarpeta .carpeta-n { color: var(--texto-suave); font-weight: 400; }
.subcarpeta:hover { border-color: var(--primario-claro); color: var(--texto); }
.subcarpeta.activa { border-color: var(--primario); background: var(--info-fondo); font-weight: 700; }
.subcarpeta.vacia { color: var(--texto-suave); }
.subcarpeta.vacia .carpeta-icono { fill: #d9dee2; }
.subcarpeta.todas { border-style: dashed; color: var(--info); }
@media (max-width: 600px) { .buscador-documentos input { min-width: 0; width: 100%; } .buscador-documentos { flex: 1 1 100%; } }

/* --- Procesamiento: gestor de colas, análisis manual y «Mis envíos» -------------------------- */
.servicio-estado { margin-top: .35rem; }
.resultado-procesamiento h2 { margin-top: 0; }
.resultado-manual { border-left: 4px solid var(--aviso); }
.resultado-procesado, .resultado-resuelto { border-left: 4px solid var(--ok); }
.resultado-en_cola, .resultado-procesando { border-left: 4px solid var(--info); }
.datos-procesamiento { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem 1rem; margin: .75rem 0 0; }
.datos-procesamiento dt { font-size: .8rem; color: var(--texto-suave); }
.datos-procesamiento dd { margin: 0; font-weight: 600; }
.pasos-procesamiento { list-style: none; padding: 0; margin: 0; }
.pasos-procesamiento li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--borde); font-size: .92rem; }
.pasos-procesamiento li:last-child { border-bottom: 0; }
.paso-marca { flex: 0 0 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
              font-weight: 700; font-size: .85rem; }
.paso-ok .paso-marca { background: var(--ok-fondo); color: var(--ok); }
.paso-fallo .paso-marca { background: var(--peligro-fondo); color: var(--peligro); }
.paso-info .paso-marca { background: var(--neutro-fondo); color: var(--neutro); }
.texto-leido summary { cursor: pointer; }
.texto-leido pre { max-height: 24rem; overflow: auto; white-space: pre-wrap; font-size: .82rem; background: var(--fondo);
                   padding: .75rem; border-radius: 6px; }
.resolver-form { margin-top: 1rem; }
.procesamiento-doc { margin: 0 0 .5rem; }
.explicacion-envios p { margin: .25rem 0; }

/* Código del expediente (SOL-n), visible para el cliente */
.codigo-expediente { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: #5e6c84; }

/* --- Mis documentos en árbol: carpetas a la izquierda, contenido a la derecha ------------------ */
.explorador { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 1.25rem; align-items: start; }
.explorador-contenido { min-width: 0; }
.arbol { padding: .75rem .5rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.arbol-raiz { display: block; padding: .35rem .5rem; font-weight: 700; color: var(--titulos); border-radius: 4px; }
.arbol-lista { list-style: none; margin: 0; padding: 0 0 0 .9rem; }
.arbol > .arbol-lista { padding-left: 0; }
.arbol-lista li { margin: 0; }
.arbol summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.arbol summary::-webkit-details-marker { display: none; }
.arbol summary::before { content: "▸"; width: .9rem; flex: none; color: var(--texto-suave); font-size: .8rem; }
.arbol details[open] > summary::before { content: "▾"; }
.arbol-hoja { padding-left: .9rem; }
.arbol a { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; padding: .3rem .5rem; border-radius: 4px;
  color: var(--texto); text-decoration: none; }
.arbol a:hover, .arbol a:focus-visible { background: var(--info-fondo); }
.arbol a.activo, .arbol-raiz.activo { background: var(--info-fondo); font-weight: 700; color: var(--primario); }
.arbol a.vacia { color: var(--texto-suave); }
.arbol-icono { flex: none; position: relative; width: 1rem; height: .75rem; margin-top: .15rem; background: #f2b84b; border-radius: 1px 2px 2px 2px; }
.arbol-icono::before { content: ""; position: absolute; left: 0; top: -.2rem; width: .45rem; height: .25rem; background: #f2b84b; border-radius: 2px 2px 0 0; }
.arbol a.vacia .arbol-icono, .arbol a.vacia .arbol-icono::before { background: #d9dee2; }
.arbol a.intercambio .arbol-icono, .arbol a.intercambio .arbol-icono::before { background: var(--primario-claro); }
.arbol-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.arbol-n { font-size: .8rem; color: var(--texto-suave); font-weight: 400; }
@media (max-width: 800px) {
  .explorador { grid-template-columns: 1fr; }
  .arbol { position: static; max-height: none; }
}

/* Avisos de la gestoría: contador en la cabecera y filas sin leer */
.contador-avisos { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #c9372c;
  color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
.aviso-nuevo td { background: var(--info-fondo); }

/* Menú «Sage»: bandeja para pasar las facturas a Sage */
.pestanas .contador { margin-left: .25rem; }
.paso-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primario);
  color: #fff; font-weight: 700; font-size: .9rem; margin-right: .35rem; vertical-align: middle; }
.aviso-sage { border-left: 5px solid var(--primario); background: var(--info-fondo); }
.aviso-pendiente { padding: .6rem .9rem; border-radius: var(--radio); background: var(--aviso-fondo); color: var(--aviso); margin: 0 0 1rem; }
.acciones-fila { white-space: nowrap; }
.acciones-fila form { display: inline-block; margin-left: .35rem; vertical-align: top; }
.opciones-fila { margin-top: .35rem; white-space: normal; font-size: .85rem; }
.opciones-fila input { width: 7rem; margin-top: .2rem; }
.como-importar { margin: 0 0 .8rem; }
.servicios-estado { margin: 0 0 1rem; color: var(--texto-suave); }

/* Subpestanas (Administración › Configuración y Registro e indicadores) */
.subpestanas { display: flex; gap: .35rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.subpestanas a { padding: .25rem .7rem; border-radius: 999px; text-decoration: none; color: var(--texto-suave);
  border: 1px solid var(--borde); font-size: .9rem; }
.subpestanas a.activa { background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600; }

/* Pendiente: tarjetas de tareas y lista para clasificar lo que envían los clientes */
.tareas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.tarea { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); text-decoration: none; box-shadow: var(--sombra); }
.tarea:hover, .tarea:focus-visible { border-color: var(--primario); }
.tarea.activa { border: 2px solid var(--primario); background: var(--info-fondo); }
.tarea-nombre { font-weight: 600; color: var(--titulos); }
.tarea-numero { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--texto-suave); }
.tarea.con-trabajo .tarea-numero { color: var(--primario); }
.tarea-ayuda { font-size: .85rem; color: var(--texto-suave); flex: 1; }
.tarea-boton { font-size: .9rem; font-weight: 600; color: var(--primario); margin-top: .3rem; }
.filtro-rapido { display: flex; gap: .3rem; }
.filtro-rapido a { padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--borde); text-decoration: none; color: var(--texto-suave); font-size: .9rem; }
.filtro-rapido a.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.form-clasificar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.form-clasificar select { padding: .3rem .4rem; border: 1px solid var(--borde); border-radius: 6px; font: inherit; font-size: .9rem; }
.form-clasificar select { width: auto; flex: none; }
.form-clasificar select[name^=tipo] { flex: 1 1 14rem; min-width: 12rem; }
.clasificar-todas { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .75rem; padding: .6rem .75rem;
  background: var(--info-fondo); border: 1px solid var(--borde); border-radius: 8px; }
.clasificar-todas select { width: auto; flex: 1 1 16rem; max-width: 26rem; padding: .35rem .45rem; border: 1px solid var(--borde);
  border-radius: 6px; font: inherit; }
/* Filtro del inicio del cliente: rango de meses o un día (solo los que tienen datos) */
.filtro-periodo { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .75rem 0 .2rem; }
.filtro-periodo .campo { margin: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.filtro-periodo select { width: auto; min-width: 9rem; padding: .35rem .5rem; border: 1px solid var(--borde); border-radius: 6px;
  font: inherit; font-size: .9rem; }
.filtro-periodo #p-dia { min-width: 14rem; }
.filtro-periodo #p-ano { min-width: 6rem; }
.filtro-periodo .boton, .filtro-periodo > a { margin-bottom: .15rem; }
.filtro-ayuda { margin: 0 0 .5rem; }

/* Ingresos y gastos (gestoría) */
.acciones-encabezado { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones-encabezado .filtros select { padding: .45rem .5rem; border: 1px solid var(--borde); border-radius: 8px; font: inherit; }
td.negativo, span.negativo { color: var(--peligro); }
span.positivo { color: var(--ok); }
.pie-actualizar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.tabla-meses-ig .barras-ig-th { width: 30%; }
.barras-ig { vertical-align: middle; }
.barras-ig-svg { display: block; width: 100%; height: 1.4rem; }
.barras-ig-svg .ingreso { fill: var(--ok); }
.barras-ig-svg .gasto { fill: var(--peligro); opacity: .75; }
.leyenda-ig.ingreso { background: var(--ok); }
.leyenda-ig.gasto { background: var(--peligro); opacity: .75; }
.leyenda-ig { display: inline-block; width: .8rem; height: .5rem; border-radius: 2px; vertical-align: middle; }
.tabla-meses-ig tfoot th, tr.fila-actual td { font-weight: 700; }
.cuenta-ig { font-variant-numeric: tabular-nums; font-weight: 600; }
.cuenta-ig.ingreso { color: var(--ok); }
.cuenta-ig.gasto { color: var(--peligro); }
details.tarjeta > summary { cursor: pointer; }
@media (max-width: 700px) { .tabla-meses-ig .barras-ig-th, .barras-ig { display: none; } }

/* Mes opcional al clasificar: un botón que despliega el desplegable de meses */
.elegir-mes { display: inline-flex; align-items: center; gap: .3rem; }
.elegir-mes > summary { list-style: none; cursor: pointer; padding: .28rem .55rem; border: 1px dashed var(--borde); border-radius: 6px;
  font-size: .85rem; color: var(--texto-suave); background: var(--superficie); white-space: nowrap; }
.elegir-mes > summary::-webkit-details-marker { display: none; }
.elegir-mes[open] > summary { border-style: solid; border-color: var(--primario); color: var(--primario); }
.elegir-mes select, .clasificar-todas .elegir-mes select { flex: none; width: auto; max-width: none; }
.tabla-clasificar td:last-child { min-width: 26rem; }
@media (max-width: 700px) { .tabla-clasificar td:last-child { min-width: 0; } }

/* «Por clasificar»: los ficheros que llegaron en un mismo ZIP, bajo su nombre y carpeta */
.fila-zip td { background: var(--info-fondo); border-top: 2px solid var(--borde); }
.dentro-zip td:first-child { padding-left: 1.75rem; }

/* Panel «Procesando» de Pendiente (09/11/2026) */
.procesando { border-left: 4px solid var(--primario-claro); }
.procesando-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.procesando-total { font-size: 1.4rem; color: var(--primario); }
.procesando progress { accent-color: var(--primario); height: .7rem; width: 7rem; vertical-align: middle; }
.procesando progress.barra-total { width: 100%; height: 1rem; margin: .25rem 0 .5rem; }
.tabla-procesando td { vertical-align: middle; }
.propuesta { margin: .3rem 0 0; }
.propuesta .etiqueta { margin-right: .3rem; }