/* Portal RIOSA — identidad tomada de www.riosa.com (29-sep-2026):
   Lato, barra de menú verde lima, enlaces azules, franja de pie azul acero y
   el fondo de cerditos y pollitos. Sólo modo claro, como la web: los logos son
   JPG sobre blanco. Texto de la barra lima y del pie en blanco, como la web
   (decisión de Hugo, 29-sep-2026). */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("brand/fonts/lato-normal-latin-400.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: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("brand/fonts/lato-normal-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("brand/fonts/lato-normal-latin-700.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: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("brand/fonts/lato-normal-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("brand/fonts/lato-italic-latin-400.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 {
  color-scheme: light;
  --lime: #c3e50a;          /* barra de menú de riosa.com */
  --blue: #2882b9;          /* enlaces de riosa.com */
  --blue-strong: #1f6a98;   /* botones y enlaces con texto pequeño (≥4,5:1 sobre blanco) */
  --steel: #73aed1;         /* franja del pie de riosa.com */
  --navy: #0e2e44;          /* texto sobre la franja del pie */
  --ink: #33373a; --muted: #6b7175; --line: #dfe3e6; --paper: #f7f8f5; --card: #ffffff;
  --accent: var(--blue-strong); --accent-ink: #ffffff;
  --warn: #9a5b00; --bad: #a3261f; --good: #2f6b3a;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); line-height: 1.55; font-size: 16px;
       background: #ffffff url("brand/fondo-cerdopollo.png") repeat; background-size: 340px auto; }
.page { max-width: 1140px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column;
        background: var(--card); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
        box-shadow: 0 0 24px rgba(0, 0, 0, .06); }

/* --- cabecera --- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem;
       padding: 1rem 1.5rem; flex-wrap: wrap; }
.brand-logo { display: block; line-height: 0; }
.brand-logo img { height: 56px; width: auto; max-width: 100%; }
.who { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; justify-content: flex-end; }
.company { font-weight: 700; }
.chip { font-size: .72rem; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem;
        margin-right: .25rem; color: var(--muted); white-space: nowrap; }
.toplinks { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem;
            text-transform: uppercase; letter-spacing: .02em; }
.toplinks a, .toplinks button.link { color: var(--blue); text-decoration: none; font-weight: 700;
            text-transform: uppercase; letter-spacing: .02em; font-size: .85rem; }
.toplinks a:hover, .toplinks button.link:hover { text-decoration: underline; }
.toplinks .sep { color: var(--muted); }
.toplinks form { display: inline; margin: 0; }

/* --- barra lima con las pestañas --- */
.bar { background: var(--lime); min-height: 8px; }
.tabs { display: flex; gap: .15rem; flex-wrap: wrap; justify-content: center; padding: calc(.3rem - 3px) 1rem; }
/* Como en riosa.com (Hugo, 29-sep): texto blanco; activo y al pasar el ratón, azul. */
.tabs a { padding: .4rem .8rem; color: #ffffff; text-decoration: none;
          font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.tabs a:hover, .tabs a[aria-current="page"] { color: var(--blue); }
/* Una línea por grupo, empezando por su nombre (Hugo, 30-sep-2026). */
.tabs.grouped { flex-direction: column; gap: 0; padding: 0 1rem; }
.tabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: calc(.3rem - 3px) 0; }
.tabs-row + .tabs-row { border-top: 1px solid rgba(255,255,255,.55); }
.tabs.grouped a { padding: .4rem .55rem; }
.tabs-group { min-width: 7.6rem; margin-right: .3rem; padding: .2rem .6rem; border-radius: 3px;
              background: rgba(255,255,255,.92); color: #3c4850; font-weight: 700; font-size: .78rem;
              text-transform: uppercase; letter-spacing: .05em; text-align: center; }
@media (max-width: 640px) { .tabs-group { min-width: 0; } }

main { flex: 1; width: 100%; padding: 1.75rem 1.5rem 2.5rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1.5rem 1.75rem; }
.narrow { max-width: 440px; margin: 2rem auto; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; text-wrap: balance; color: #4a5056; }
.intro, .note, .aside, .muted { color: var(--muted); }
form label { display: block; margin: .9rem 0; font-size: .9rem; }
input { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit;
        color: inherit; background: #fff; border: 1px solid #c9cfd3; border-radius: 4px; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button { font: inherit; font-weight: 700; padding: .6rem 1.2rem; border: 0; border-radius: 4px;
         background: var(--accent); color: var(--accent-ink); cursor: pointer; letter-spacing: .02em; }
button:hover { background: #185a82; }
button.link { background: none; color: var(--accent); padding: 0; }
a { color: var(--blue-strong); }
.msg { padding: .6rem .8rem; border-radius: 4px; border: 1px solid; }
.msg.error { color: var(--bad); border-color: currentColor; }
.msg.ok { color: var(--good); border-color: currentColor; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: #f5f9e6; }
td.kg, td.money, th.kg, th.money { text-align: right; }
td.st-pending { color: var(--warn); } td.st-settled { color: var(--good); } td.st-not_payable { color: var(--bad); }
td.dl a { font-weight: 700; }
/* --- certificados: los cuatro en horizontal, con su logo --- */
.certs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.certs a { display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; padding: 1.1rem .9rem 1rem;
           border: 1px solid var(--line); border-radius: 6px; text-align: center; color: var(--ink); text-decoration: none; }
.certs a:hover, .certs a:focus-visible { border-color: var(--blue); background: #f5f9fc; }
.cert-logo { display: flex; align-items: center; justify-content: center; height: 100px; margin-bottom: .4rem; }
.cert-logo img { max-height: 100px; max-width: 100%; width: auto; height: auto; }
.certs strong { font-size: 1rem; }
.cert-go { margin-top: auto; padding-top: .5rem; color: var(--blue-strong); font-weight: 700; font-size: .92rem; }

/* --- lema y avisos bajo el menú (páginas con sesión) --- */
.notice { padding: .75rem 1.5rem .8rem; border-bottom: 1px solid var(--line); background: #fbfdf3; text-align: center; }
.notice p { margin: 0; }
.notice-motto { font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--blue-strong); letter-spacing: .01em; }
.notice-text { margin-top: .2rem !important; font-size: .92rem; color: var(--ink); }

/* --- páginas de texto (privacidad) --- */
.prose { max-width: 820px; }
.prose p, .prose li { max-width: 72ch; }
.prose h2 { margin-top: 1.8rem; }
.prose td { vertical-align: top; }

/* --- noticias de riosa.com (como el bloque de la web) --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news { padding: 1rem 1.75rem 0; border-top: 1px solid var(--line); margin-top: 1rem; }
.news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; padding-top: 1.25rem; }
.news-item { display: flex; flex-direction: column; align-items: flex-start; }
.news-item h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .5rem; letter-spacing: -.01em; text-wrap: balance; }
.news-item h3 a { color: #5a6066; text-decoration: none; }
.news-item h3 a:hover { color: var(--blue-strong); }
.news-item p { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; flex: 1; }
.news-more { background: #4f9f4f; color: #fff; text-decoration: none; font-size: .9rem; padding: .45rem 1rem;
             border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.news-more:hover { background: #3f873f; }
.news-all { text-align: right; font-size: .85rem; margin: 1rem 0 0; }
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .news-grid { grid-template-columns: 1fr; } .news { padding: 1rem 1rem 0; } }

/* --- pie, como el de riosa.com: franja azul acero, texto blanco, logo que
   asoma por encima, columnas con separador blanco y viñetas «·» --- */
footer { margin-top: 5rem; }
.foot-band { background: var(--steel); color: #ffffff; display: grid;
             grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(0, 1fr));
             padding: 1.5rem 2rem 1.75rem; font-size: .84rem; line-height: 1.6; }
.foot-band a { color: #ffffff; text-decoration: none; }
.foot-band a:hover { text-decoration: underline; }
.foot-brand { padding-right: 1rem; }
/* La palabra RIOSA (24 px de 156, medido) sale por encima de la franja: su borde cae donde empieza el verde. */
.foot-brand img { width: 156px; height: auto; display: block; margin-top: calc(-1.5rem - 24px); background: #fff; }
.foot-brand p { font-style: italic; margin: .6rem 0 0; font-size: .8rem; max-width: 17ch; }
.foot-col { padding: 0 1rem 0 1.5rem; }
.foot-col + .foot-col, .foot-brand + .foot-col { border-left: 1px solid rgba(255, 255, 255, .5); margin-top: 2.6rem; padding-top: 0; }
.foot-col h4 { margin: -2.6rem 0 .9rem; color: #ffffff; font-size: .82rem; font-weight: 700;
               letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.foot-band ul { list-style: none; margin: 0; padding: 0; }
.foot-band li { margin: 0; }
.foot-band ul.dots li::before { content: "· "; }
.foot-band li.gap { margin-top: 1.1rem; }
.social { display: flex; gap: 1.1rem; margin-top: 1.1rem; }
.social a { color: #3d4a54; display: inline-flex; }
.social a:hover { color: #ffffff; }
.foot-certs { display: flex; justify-content: center; align-items: center; gap: 2rem; padding: 1.25rem 1rem .25rem; flex-wrap: wrap; }
.foot-certs a { display: inline-flex; line-height: 0; border-radius: 4px; }
.foot-certs img { height: 96px; width: auto; transition: transform .15s; }
.foot-certs a:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .foot-certs img { transition: none; } }
.foot-motto { text-align: center; font-weight: 700; color: #7b8187; font-size: 1.9rem; letter-spacing: -.01em; margin: 1.5rem 0 .25rem; text-wrap: balance; }
@media (max-width: 460px) { .foot-motto { font-size: 1.4rem; } .foot-certs img { height: 72px; } }
.foot-legal .rights { text-transform: none; }
.foot-legal { text-align: center; color: var(--muted); font-size: .7rem; letter-spacing: .2em;
              text-transform: uppercase; padding: 1rem 1rem 1.5rem; line-height: 1.5; }
@media (max-width: 760px) {
  .foot-band { grid-template-columns: 1fr 1fr; row-gap: 2rem; padding: 1.5rem 1.25rem; }
  .foot-col + .foot-col, .foot-brand + .foot-col { border-left: 0; margin-top: 0; }
  .foot-col h4 { margin-top: 0; text-align: left; } .foot-col { padding: 0 .5rem; }
  .top { justify-content: center; } .who { justify-content: center; }
  main { padding: 1.25rem 1rem 2rem; } .card { padding: 1rem; }
}
@media (max-width: 460px) { .foot-band { grid-template-columns: 1fr; } th, td { padding: .45rem .4rem; } }

/* --- estadísticas (paleta de referencia dataviz, validada CVD) --- */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #7a52cc; --series-5: #c0398a; --series-6: #0e7c86; --viz-grid: #e6e9ec; --viz-axis: #6b7175; }
h2 { font-size: 1.1rem; margin: 2rem 0 .25rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.tile-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tile-value { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-note { font-size: .75rem; color: var(--muted); }
.chart { margin: 0 0 1.5rem; }
.chart figcaption { font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
@media (max-width: 760px) { .chart-grid { grid-template-columns: 1fr; } }
svg.viz { width: 100%; height: auto; display: block; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-baseline { stroke: var(--viz-axis); stroke-width: 1; }
.viz-axis { fill: var(--viz-axis); font-size: 11px; font-family: inherit; }
.viz-bar.viz-s1 { fill: var(--series-1); }
.viz-bar:hover { opacity: .8; }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.viz-s1 { stroke: var(--series-1); } .viz-line.viz-s2 { stroke: var(--series-2); } .viz-line.viz-s3 { stroke: var(--series-3); }
.viz-line.viz-s4 { stroke: var(--series-4); } .viz-line.viz-s5 { stroke: var(--series-5); } .viz-line.viz-s6 { stroke: var(--series-6); }
.viz-dot { stroke: var(--card); stroke-width: 2; }
.viz-dot.viz-s1 { fill: var(--series-1); } .viz-dot.viz-s2 { fill: var(--series-2); } .viz-dot.viz-s3 { fill: var(--series-3); }
.viz-dot.viz-s4 { fill: var(--series-4); } .viz-dot.viz-s5 { fill: var(--series-5); } .viz-dot.viz-s6 { fill: var(--series-6); }
.legend { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0 0 .25rem; font-size: .8rem; color: var(--muted); }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.key.viz-s1 { background: var(--series-1); } .key.viz-s2 { background: var(--series-2); } .key.viz-s3 { background: var(--series-3); }
.key.viz-s4 { background: var(--series-4); } .key.viz-s5 { background: var(--series-5); } .key.viz-s6 { background: var(--series-6); }
.data-table summary { cursor: pointer; color: var(--accent); margin-bottom: .5rem; }
.data-table .table-wrap { margin-bottom: 1rem; }

/* --- Mi cuenta --- */
a.link { color: var(--accent); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 1rem 0; }
.facts dt { color: var(--muted); font-size: .85rem; }
.facts dd { margin: 0; }
.narrow-form { max-width: 420px; }

/* --- años: botones que se marcan y desmarcan (sin JS) --- */
.years { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.1rem 1.5rem .9rem; }
.years form { margin: 0; }
.years-label { font-weight: 700; font-size: .9rem; margin-right: .2rem; }
.year { font: inherit; font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
        padding: .3rem .8rem; border-radius: 4px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.year:hover { border-color: var(--blue); color: var(--blue-strong); }
.year:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.year.on { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
.years-hint { font-size: .82rem; color: var(--muted); margin-left: .3rem; }
tr.year-row th { text-align: left; background: #f3f7e3; color: var(--blue-strong); font-size: .95rem; padding: .4rem .6rem; }
/* Banda verde con el mes (p. ej. «Octubre 2026») en los listados de portes. */
tr.month-row th { text-align: left; background: var(--lime); color: var(--navy); font-weight: 700; font-size: .95rem; padding: .4rem .6rem; letter-spacing: .02em; }
tr.month-row th.dl { text-align: center; font-weight: 600; font-size: .8rem; white-space: nowrap; }
tr.month-row label.month-all { cursor: pointer; display: inline-flex; align-items: center; gap: 0; margin: 0; }
tr.month-row label.month-all.dl-box { display: inline-flex; width: 4.8rem; overflow: visible; }
tbody tr.year-row:hover { background: none; }

/* enlace de Hugo a la administración de riosa.com: discreto, al pie de la tarjeta */
.admin-links { display: flex; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .78rem; }
.admin-links a { color: var(--muted); text-decoration: none; }
.admin-links a:hover, .admin-links a:focus-visible { color: var(--blue-strong); text-decoration: underline; }

/* --- administración --- */
.admin-strip { padding: .45rem 1.5rem; background: #eef3f7; border-bottom: 1px solid var(--line); color: var(--blue-strong); font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.chip-admin { background: var(--blue-strong); color: #fff; border-color: var(--blue-strong); }
.search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1.2rem; }
.search input { flex: 1 1 260px; max-width: 420px; }
.button-link { margin-left: auto; font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; }
.state { display: inline-block; padding: .05rem .5rem; border-radius: 3px; font-size: .82rem; font-weight: 700; }
.state.ok { background: #e7f3e9; color: var(--good); } .state.bad { background: #f8e5e3; color: var(--bad); }
.state.warn { background: #fbf0dc; color: var(--warn); }
.bad { color: var(--bad); }
.crumbs { margin: 0 0 .2rem; font-size: .88rem; }
.candidate { border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; margin: 0 0 .8rem; }
.candidate header { margin-bottom: .4rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .5rem 0 1rem; }
.inline-form .grow { flex: 1 1 280px; max-width: 420px; }
label.check { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; margin: 0; }
label.check input { width: auto; margin: 0; }
button.small { padding: .3rem .7rem; font-size: .85rem; }
button.danger { background: var(--bad); border-color: var(--bad); }
button.ghost { background: #fff; color: var(--blue-strong); border: 1px dashed var(--blue); }
.toolbar { margin: .2rem 0 1rem; }
.suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.suggestions form { margin: 0; }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 .5rem; }
.actions-row form, .actions-row p { margin: 0; }
.user-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.user-actions form { margin: 0; }
.user-actions details { position: relative; }
.user-actions summary { cursor: pointer; color: var(--blue-strong); font-size: .88rem; padding: .3rem 0; }
.user-actions details[open] { flex-basis: 100%; }
.user-actions details form { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
table.events td { font-size: .88rem; vertical-align: top; }
tr.admin-row td { background: #f3f7fb; }

/* franja roja de «ver como» (sólo lectura) */
.viewing { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1rem;
           padding: .5rem 1rem; background: var(--bad); color: #fff; font-weight: 700; }
.viewing form { margin: 0; }
.viewing button.link { color: #fff; text-decoration: underline; font-weight: 700; }

/* tramo entre análisis separados por meses sin datos */
.viz-line.viz-gap { stroke-dasharray: 5 5; stroke-opacity: .7; }

/* gráficas anchas de proveedor: todos los meses, rótulos más finos */
.viz-fine .viz-axis { font-size: 10px; }

.notice-text strong { font-weight: 700; }

/* nombre de la empresa con su CIF debajo (Hugo, 30-sep-2026) */
.company-block { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
                 background: #eef3f6; border: 1px solid #cfdbe3; border-radius: 8px; padding: .3rem .7rem; }
.company-cif { font-size: .8rem; font-weight: 400; color: var(--muted); letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* filtro por grupo en Empresas (administración) */
.group-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.group-filter a { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 700;
                  color: var(--muted); text-decoration: none; background: #fff; }
.group-filter a:hover { border-color: var(--blue); color: var(--blue-strong); }
.group-filter a[aria-current="page"] { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
.group-filter .count { font-weight: 400; opacity: .8; margin-left: .15rem; font-variant-numeric: tabular-nums; }


/* selector de idioma: desplegable onhover arriba (escritorio) + lista explícita (móvil) */
.langsel { position: relative; display: inline-block; margin-left: .6rem; }
.langsel-current { font: inherit; font-weight: 700; font-size: .85rem; color: var(--blue); background: none; border: 0; padding: .15rem .3rem; cursor: pointer; }
.langsel-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 8.5rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: .25rem 0; z-index: 50; }
.langsel:hover .langsel-menu, .langsel:focus-within .langsel-menu { display: block; }
.langsel-menu a { display: block; padding: .35rem .9rem; color: var(--ink); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.langsel-menu a:hover { background: #f5f9fc; color: var(--blue-strong); }
.langsel-menu a.on { font-weight: 700; color: var(--blue-strong); }
.langsel-explicit { display: none; }
@media (max-width: 640px) {
  .langsel { display: none; }
  .langsel-explicit { display: flex; flex-wrap: wrap; gap: .05rem .3rem; justify-content: center; width: 100%; padding: .25rem 0 .1rem; font-size: .78rem; }
  .langsel-explicit a { color: var(--blue-strong); text-decoration: none; padding: .1rem .22rem; }
  .langsel-explicit a.on { color: var(--ink); font-weight: 700; }
}

/* Caja de la contraseña generada en el alta (pwgen.js) */
#pwgen-btn { margin: -.3rem 0 .6rem; }
.pwgen-out { margin: 0 0 1rem; padding: .7rem .85rem; background: #f6f9fb;
  border: 1px solid #d9e3ea; border-left: 4px solid var(--lime); border-radius: 4px; }
.pwgen-value { display: inline-block; font-family: Consolas, Menlo, monospace;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: #1e2a33;
  word-break: break-all; user-select: all; vertical-align: middle; margin-right: .5rem; }
.pwgen-hint { margin: .5rem 0 0; }

/* Casilla de aceptación de privacidad / aviso legal en el alta */
.consent { display: flex; align-items: flex-start; gap: .55rem; margin: .4rem 0 1.1rem; font-size: .82rem;
           color: var(--muted); line-height: 1.5; border: 1px solid var(--line); border-radius: 6px;
           padding: .7rem .85rem; background: var(--paper); }
.consent input { margin-top: .15rem; flex: 0 0 auto; }
/* Casilla «Mostrar contraseña» bajo los campos de contraseña. */
.showpw { display: flex; align-items: center; gap: .45rem; margin: -.3rem 0 .6rem; font-size: .85rem; color: var(--muted); cursor: pointer; }
.showpw input { flex: 0 0 auto; cursor: pointer; }

/* protección de datos (RGPD) */
.msg.warn { color: var(--warn); border-color: currentColor; }
.rgpd-doc { border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; margin: 0 0 .9rem; }
.rgpd-doc h3 { margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rgpd-doc .chip.req { color: var(--bad); border-color: currentColor; }
.rgpd-doc .chip.opt { color: var(--muted); }
.rgpd-doc .chip.ok { color: var(--good); border-color: currentColor; }
.rgpd-body { margin: .5rem 0 .2rem; padding: .6rem .8rem; background: var(--paper); border-radius: 4px;
             font-size: .92rem; max-height: 22rem; overflow-y: auto; }
.rgpd-accept { display: flex; align-items: flex-start; gap: .45rem; margin: .6rem 0 0; font-weight: 600; }
.rgpd-accept input { width: auto; margin: .2rem 0 0; }
.rgpd-sign { border-top: 2px solid var(--line); margin-top: 1.2rem; padding-top: 1rem; }
.rgpd-sign label { display: block; margin: .6rem 0; max-width: 420px; }
/* Línea de aclaración (cliente/proveedor) encima de cada casilla de frase. */
.rgpd-scope { margin: .9rem 0 -.2rem; font-size: .82rem; font-weight: 700; color: var(--blue-strong); text-transform: uppercase; letter-spacing: .03em; }
/* «Revocar»: botón con borde rojo y texto visible (antes salía rojo sobre rojo) */
button.link.danger { background: none; color: var(--bad); border: 1px solid var(--bad);
                     border-radius: 4px; padding: .3rem .75rem; margin-top: .5rem;
                     font-weight: 700; font-size: .85rem; text-decoration: none; }
button.link.danger:hover { background: var(--bad); color: #fff; }
.rgpd-datos { max-width: 480px; }
.rgpd-datos label { display: block; margin: .5rem 0; font-size: .9rem; }
.rgpd-datos textarea { display: block; width: 100%; resize: none; margin-top: .3rem;
                       padding: .6rem .7rem; font: inherit; }
/* sub-navegación de «Mi cuenta» */
.subnav { display: flex; flex-wrap: wrap; gap: .1rem .2rem; margin: .4rem 0 1.3rem;
          border-bottom: 1px solid var(--line); }
.subnav a { padding: .45rem .85rem; color: var(--blue-strong); text-decoration: none;
            font-weight: 700; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--blue); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue-strong); }
.cuenta-pie { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .85rem; }
.inline-mail { display: inline; margin: 0 0 0 .5rem; }
button:disabled { background: #cfd3d6; border-color: #cfd3d6; color: #8a9196; cursor: default; }
/* Columna de descargas: la casilla NO debe heredar el input a pantalla completa;
   casilla y enlace en la misma línea, y botón/casillas centrados en la columna.
   .dl-box: caja de ancho FIJO centrada en la columna, con la casilla a su izquierda. Como todas las cajas
   miden lo mismo, la casilla de «Todo el mes» cae justo encima de las de las filas aunque su texto sea
   más largo (el texto sobresale hacia la derecha) (5-nov-2026). */
td.dl input[type="checkbox"], th.dl input[type="checkbox"] {
  display: inline-block; width: auto; margin: 0 .35rem 0 0; vertical-align: middle; }
th.dl, td.dl { text-align: center; white-space: nowrap; }
.dl-box { display: inline-block; width: 4.8rem; text-align: left; white-space: nowrap; }
/* Casillas y radios: NO heredan el input{display:block;width:100%} de los campos
   de texto (si no, salían a pantalla completa y descuadraban el texto al lado). */
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; }

/* Solicitud de pedido (formulario de pedido → correo a comercial) */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sec-head h1 { margin: 0; }
a.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700;
        padding: .55rem 1.1rem; border-radius: 4px; text-decoration: none; letter-spacing: .02em; }
a.btn:hover { background: #185a82; }
/* Secundario («Empezar de nuevo»): blanco con borde, para no competir con
 * «Enviar solicitud», que es la acción principal. */
a.btn.ghost { background: #fff; color: var(--blue-strong); border: 1px solid var(--line); }
a.btn.ghost:hover { background: var(--paper); border-color: var(--blue-strong); }
/* «+ Añadir otro producto» bajo las líneas del pedido (pedido_lineas.js). */
button.link.add-line { display: inline-block; margin: .35rem 0 .25rem; font-size: .92rem; }
button.link.add-line[hidden] { display: none; }
.order-form .table-wrap { margin: .75rem 0 .25rem; }
table.order-lines { width: 100%; border-collapse: collapse; }
table.order-lines th { text-align: left; font-size: .85rem; color: var(--muted); padding: .3rem .4rem; }
table.order-lines td { padding: .25rem .4rem; vertical-align: middle; }
/* Las cuatro celdas de una línea, iguales y alineadas (Hugo, 14-oct-2026): el
 * `input` global trae margin-top (para formularios con etiqueta encima) y cada
 * control —desplegable, texto, fecha con su icono— mide distinto. Altura fija. */
table.order-lines select, table.order-lines input { margin: 0; height: 2.6rem; line-height: 1.2; }
table.order-lines th.kg, table.order-lines td.kg { text-align: right; width: 8.5rem; }
.order-form select, .order-form input, .order-form textarea { font: inherit; width: 100%;
        padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
.order-form td.kg input { text-align: right; }
.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; margin: 1rem 0; }
.order-fields label, .order-notes { display: block; font-size: .9rem; color: var(--muted); }
.order-fields label input { margin-top: .25rem; }
.order-notes { margin: 0 0 1rem; } .order-notes textarea { margin-top: .25rem; }
.order-actions { display: flex; align-items: center; gap: 1.25rem; }
.order-note { border: 1px solid var(--line); border-left: 4px solid var(--lime); background: var(--paper);
        padding: .8rem 1rem; border-radius: 4px; margin: .25rem 0 1rem; }
.order-note p { margin: .2rem 0; } .order-note p:first-child { color: var(--ink); }
h2.sub { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.small { font-size: .85rem; }
@media (max-width: 620px) { .order-fields { grid-template-columns: 1fr; } }

/* Estado de las órdenes enviadas */
.st { display: inline-block; padding: .1rem .5rem; border-radius: 3px; font-size: .85rem; font-weight: 700; }
.st-pendiente { background: #fff3d6; color: var(--warn); }
.st-aprobada  { background: #dff0e2; color: var(--good); }
.st-convertida{ background: #dde9f4; color: var(--blue-strong); }
.st-rechazada { background: #f6dcda; color: var(--bad); }

/* Separador entre «Pedidos pendientes de confirmar» y «Pedidos confirmados» */
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0 1rem; }
.order-cancel-form { margin-top: .75rem; }
.order-cancel-form button.link.danger { font-size: .9rem; }

/* DeCA entrantes: filtro de dirección y bloque de subida en «Viajes». */
.filtro-dir { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 1.1rem; }
.filtro-dir a { padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 3px;
  color: var(--blue-strong); text-decoration: none; font-size: .9rem; }
.filtro-dir a:hover { border-color: var(--blue-strong); }
.filtro-dir a[aria-current="page"] { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
.deca { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.deca-upload { display: flex; flex-direction: column; gap: .75rem; margin: .5rem 0 1.25rem; max-width: 34rem; }
.deca-or { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.deca-url { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 100%; }
.deca-url:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--paper); }
/* Aviso mientras se procesa un envío lento: subida de DeCA, pedidos (procesando.js).
 * El boton sigue en su color —no en el gris de :disabled— para que se lea
 * «trabajando», no «roto». */
.procesando-aviso { display: flex; align-items: center; gap: .6rem; margin: -.5rem 0 1rem;
  max-width: 34rem; color: var(--ink); font-size: .9rem; }
.procesando-aviso[hidden] { display: none; }
.spin { flex: 0 0 auto; width: 1rem; height: 1rem; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: deca-spin .8s linear infinite; }
@keyframes deca-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
button.procesando:disabled { background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); opacity: .8; cursor: progress; }
/* El de «Cancelar este pedido» es un enlace rojo: mientras procesa sigue
 * pareciendo él mismo, no un botón azul. */
button.link.danger.procesando:disabled { background: none; border-color: var(--bad);
  color: var(--bad); opacity: .7; }
/* En pedidos el aviso va DENTRO del formulario, bajo el botón: con el margen
 * negativo de arriba (pensado para DeCA, donde va fuera) se montaba sobre él. */
.order-form .procesando-aviso, .order-cancel-form .procesando-aviso { margin: .9rem 0 0; }
/* Mientras una acción procesa, las demás de la página quedan atenuadas y sin
 * efecto (procesando.js pone .enviando en el body): no se lanzan dos a la vez. */
body.enviando form[data-procesando] button[type=submit]:not(.procesando),
body.enviando .procesando-bloquea { pointer-events: none; opacity: .4; }

/* Zona de subir un fichero (.subef): reutilizada del Estudio de Uttera —
   mismo componente (uttera-portal/static/subir.js + tema.css), adaptada a los
   tokens de este portal. Borde discontinuo = «suéltalo aquí» sin escribirlo. */
.subef { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .8rem; border: 1.5px dashed var(--line); border-radius: 10px;
  background: var(--card); cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.subef:hover, .subef:focus-visible, .subef.sobre { border-color: var(--accent); background: var(--paper); }
.subef.sobre { border-style: solid; }
.subef:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper); }
.subef-i { flex: 0 0 auto; color: var(--accent); }
.subef-b { font-size: .88rem; font-weight: 600; color: var(--accent); }
.subef-n { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; flex: 1 1 6rem; }
.subef-n:empty { display: none; }

/* Documentación del transportista (4-nov-2026) */
.muted { color: var(--muted); }
.doc-forms { display: flex; flex-wrap: wrap; gap: 0 2rem; }
.doc-forms .doc-upload { margin-top: .25rem; }
.doc-upload label { margin: 0; }
.doc-upload select { display: block; margin-top: .25rem; max-width: 100%; }
.subtabs { display: flex; gap: 1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.subtabs a { padding: .3rem 0; text-decoration: none; }
.subtabs a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--accent); }

/* Cabecera de la columna de descarga: «Enviar a mi correo» y «Descargar ZIP» apilados. Tamaño FIJO
   (no depende del ancho de la columna): los dos iguales, al ancho del texto más largo + un margen (Hugo, 5-nov). */
th.dl .dl-actions { display: inline-flex; flex-direction: column; gap: .3rem; align-items: stretch; vertical-align: middle; }
th.dl .dl-actions button { width: auto; padding-left: .9rem; padding-right: .9rem; }

/* Pie de certificados en las páginas de Documentación (5-nov-2026). */
.certs-pie { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* Listado interno de empresas: nombre recortado con «…» (el completo, al pasar el ratón) para que la tabla
   quepa en la ventana sin barra horizontal (Hugo, 5-nov-2026). */
td.co-name a { display: inline-block; max-width: 17rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; }

/* Verificación de firma de facturas (/verificar). La CSP del portal (default-src 'self')
   prohíbe estilos y scripts inline, así que va aquí y en static/verificar.js. */
.vfe #vfe-res { margin-top: 1.1rem; max-width: 34rem; }
.vfe-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  display: flex; gap: 13px; align-items: flex-start; }
.vfe-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; margin-top: 2px;
  box-shadow: 0 0 0 4px rgba(0,0,0,.04); background: #9aa3b2; }
.vfe-dot.g { background: #22a06b; } .vfe-dot.y { background: #e3a008; }
.vfe-dot.r { background: #d64545; } .vfe-dot.n { background: #9aa3b2; }
.vfe-card h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.vfe-card .sub { color: var(--muted); font-size: .92rem; margin: 0 0 .4rem; }
.vfe-meta { font-size: .88rem; color: var(--ink); } .vfe-meta div { margin-top: .2rem; }
.vfe-meta b { font-weight: 600; }
.vfe-spin { display: inline-block; width: 15px; height: 15px; border: 2.5px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: vfesp .7s linear infinite;
  vertical-align: -2px; }
@keyframes vfesp { to { transform: rotate(360deg); } }
.vfe-back { margin-top: 1.2rem; }