/* 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; }
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. */
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; }
/* 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; }
.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: top; }
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); }

/* 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; }