/* sellos.css · Styles of the trust system (docs/sellos/ESPEC-FINAL.md §2). A static file, not part of the compiled CSS: a page loads it
   with a <link> only when it draws something of the system, and the switch for it is on. With every switch off nothing links it. It uses
   the tokens of the site (--red, --ink, --line, --soft, --paper, --muted) and no colour of its own, so the red is the brand's. */

/* C1 · «Botón principal de tu página» in «Mi página» of the panel (app/panel/principal-section.tsx). */
.sello-principal-opciones{display:grid;gap:10px}
.sello-principal-opciones .consent{align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer}
.sello-principal-opciones .consent:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.sello-principal-opciones .consent:has(input:disabled){cursor:not-allowed;background:var(--soft)}
.sello-principal-opciones .consent:has(input:disabled) strong{color:var(--muted)}
.sello-principal-opciones .consent span{display:grid;gap:2px}
.sello-principal-opciones .consent small{font-size:14px;line-height:1.45;color:var(--muted)}
/* The preview: every row is drawn, only the one of the radio checked shows; with none checked, «Escribir» alone, which is what the
   page shows. It needs no script. */
.sello-principal-vista{display:grid;gap:10px;margin:18px 0;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--soft)}
.sello-principal-vista>p{margin:0}
.sello-principal-fila{display:none;flex-wrap:wrap;gap:10px;align-items:center}
.sello-principal-fila .primary-button,.sello-principal-fila .pill-button{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;font:700 15px/1.2 Raleway,Arial,sans-serif;pointer-events:none}
.sello-principal-fila .primary-button:hover{transform:none}
.sello-principal:not(:has(input[name="boton"]:checked)) .sello-principal-fila[data-op=""],
.sello-principal:has(input[name="boton"][value=""]:checked) .sello-principal-fila[data-op=""],
.sello-principal:has(input[name="boton"][value="telefono"]:checked) .sello-principal-fila[data-op="telefono"],
.sello-principal:has(input[name="boton"][value="mapa"]:checked) .sello-principal-fila[data-op="mapa"],
.sello-principal:has(input[name="boton"][value="whatsapp"]:checked) .sello-principal-fila[data-op="whatsapp"],
.sello-principal:has(input[name="boton"][value="reservar"]:checked) .sello-principal-fila[data-op="reservar"],
.sello-principal:has(input[name="boton"][value="sitio"]:checked) .sello-principal-fila[data-op="sitio"]{display:flex}

/* A · The lists by type and aspect (components/community/lista.tsx). The cards are those of «Mejor valoradas»; here a card sits in a box
   with the line of its aspect under it, and the block of links under «Mejor valoradas» is a row of pills. */
.lista-item{display:flex;flex-direction:column;gap:8px;min-width:0}
.lista-item>.vc{flex:1}
.lista-aspecto{margin:0;padding:8px 14px;border-left:3px solid var(--red);background:var(--soft);font-size:14px;line-height:1.45;font-weight:700;color:var(--ink)}
.lista-leyenda{margin-top:28px}
.lista-pie{margin-top:30px}
.lista-enlaces{margin:36px 0 70px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.lista-enlaces h2{margin:0 0 6px;font:700 20px/1.25 Raleway,Arial,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.lista-enlaces p{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--muted)}
.lista-enlaces p:last-child{margin:14px 0 0}
.lista-enlaces ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.lista-enlaces li a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:700 15px/1.2 Raleway,Arial,sans-serif;color:var(--ink);text-decoration:none}
.lista-enlaces li a:hover,.lista-enlaces li a:focus-visible{border-color:var(--red);color:var(--red)}
.lista-enlaces p a{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.lista-metodo .legal-list a{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}

/* D1 · The method of the Distinción Top (app/opiniones/distincion-top/page.tsx). The brand's red marks the Top and nothing else in the page. */
.top-categorias{display:grid;gap:12px;margin:22px 0;padding:0;list-style:none}
.top-categorias li{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;background:var(--paper)}
.top-categorias strong{font:700 17px/1.3 Raleway,Arial,sans-serif;color:var(--ink)}
.top-categorias span{font-size:16px;line-height:1.6;color:var(--muted)}
.top-aviso{margin:22px 0;padding:14px 18px;border-radius:10px;background:var(--soft);font-weight:700;color:var(--ink)}
.top-criterios{display:grid;gap:12px;margin:18px 0;padding-left:22px}
.top-criterios li{padding-left:4px;font-size:17px;line-height:1.65}
.top-criterios strong{color:var(--ink)}
.top-metodo h2{margin-top:36px}
.top-metodo p{margin:0 0 14px}
.lista-metodo p{margin:0 0 14px}
@media (max-width:600px){.lista-enlaces{padding:18px 16px}.top-categorias li{padding:14px}}

/* B · The seals (components/sellos/sello.tsx, app/panel/sellos-section.tsx, app/opiniones/sellos). The oak tokens are those of the design (DISENO-SELLOS.md §3), declared on the pieces themselves so that no selector outside the prefixes exists; the only
   red is the brand's, in Gran Añada and in the marks of the panel. No maroon and no purple: the seals are oak and cream. */
.sello-chip,.vc-sello,.sello-bloque,.sello-panel,.sello-niveles,.sello-metodo,.dist-page{--sello-crema:#FFF4E3;--roble-300:#D8B98A;--roble-700:#6F4421;--roble-800:#573418;--roble-900:#3A2210}
/* The page of the distinctions (app/distinciones, its own sheet) also uses the lightest, the dark-gold and the darkest oak of the design. */
.dist-page{--roble-100:#F1E2C8;--roble-200:#E6CFA6;--roble-600:#8A5A2B;--roble-950:#2E1A0C}
.sello-mini{flex:none;display:inline-block;vertical-align:middle}
.sello-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:3px 12px 3px 8px;border:1px solid var(--roble-700);border-radius:10px;background:var(--sello-crema);color:var(--roble-800);text-decoration:none;font:800 14.5px/1.2 Raleway,Arial,sans-serif}
.sello-chip:hover,.sello-chip:focus-visible{border-color:var(--roble-900);color:var(--roble-900)}
.sello-chip-mas{padding-left:8px;border-left:1px solid var(--roble-300);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.vc-sello{display:flex;align-items:center;gap:6px;margin-top:2px;font:700 13px/1.2 "DM Sans",Arial,sans-serif;color:var(--roble-800)}
.sello-bloque{display:flex;gap:20px;align-items:flex-start;margin:32px 0;padding:20px 22px;border:1px solid var(--roble-300);border-radius:14px;background:var(--sello-crema);color:var(--roble-800)}
.sello-bloque-img{flex:none;display:block;height:112px}.sello-bloque-img svg{display:block;height:112px;width:auto}
.sello-bloque-texto{display:grid;gap:6px;min-width:0}
.sello-bloque-texto p{margin:0;font-size:16px;line-height:1.55}
.sello-bloque-etiqueta{font:700 12px/1.2 Raleway,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sello-bloque h2{margin:0;font:800 22px/1.25 Raleway,Arial,sans-serif;color:var(--roble-900)}
.sello-bloque .text-link{color:var(--roble-800);font-weight:700}
@media (max-width:600px){.sello-bloque{flex-direction:column;padding:18px 16px}.sello-chip{font-size:14px}}
/* The tab «Sellos de tu vinícola» of the panel. */
.sello-panel{display:grid;gap:18px}
.sello-panel h3{margin:0}
.sello-panel-actual{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sello-panel-actual img{height:104px;width:auto}
.sello-provisional{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--soft);font:700 13px/1.3 Raleway,Arial,sans-serif;color:var(--ink)}
.sello-reqs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sello-reqs li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:16px;line-height:1.5}
.sello-reqs .sello-marca{flex:none;width:22px;font-weight:800;text-align:center}
.sello-reqs .sello-ok .sello-marca{color:var(--ink)}
.sello-reqs .sello-falta .sello-marca{color:var(--red)}
.sello-faltan{margin:0;padding-left:20px;font-weight:700;line-height:1.6}
.sello-riesgo{margin:0;padding:12px 14px;border-left:4px solid var(--red);border-radius:8px;background:var(--soft);font-weight:700}
.sello-placa{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.sello-placa-img{flex:none;display:block;height:120px}.sello-placa-img svg{display:block;height:120px;width:auto}
.sello-kit{display:grid;gap:10px}
.sello-kit ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sello-kit li a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:700 14px/1.2 Raleway,Arial,sans-serif;color:var(--ink);text-decoration:none}
.sello-terminos{margin:0;padding-left:22px;display:grid;gap:6px;line-height:1.55}
/* /opiniones/sellos */
.sello-metodo h2{margin-top:36px}
.sello-niveles{display:grid;gap:12px;margin:18px 0;padding:0;list-style:none}
.sello-niveles li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--roble-300);border-radius:12px;background:var(--sello-crema);color:var(--roble-900);font-size:17px;line-height:1.6}
/* The small print of the pages of the method (components/sellos/sello.tsx Notas): the promises word for word, in muted type, never a coloured notice (the lawyer's condition of 9 Oct 2026). */
.sello-notas{margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
.sello-notas .sello-notas-t{margin:0 0 10px;font:700 12px/1.3 Raleway,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sello-notas .sello-notas-lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sello-notas .sello-nota{font-size:14px;line-height:1.55;color:var(--muted)}
.sello-notas .sello-nota b{font-weight:700;color:var(--ink)}
/* The note of the provisional thresholds, under the ladder of /opiniones/sellos. */
.sello-metodo .sello-prov{margin:-6px 0 18px;font-size:14px;color:var(--muted)}
/* The link to /distinciones in the tab of the panel, and the terms of the kit folded in a <details> with their version in a quiet line. */
.sello-panel .sello-enlace{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sello-panel .sello-panel-enlace{margin:0}
.sello-terminos-pliegue>summary{cursor:pointer;font:700 14px/1.4 Raleway,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}
.sello-terminos-pliegue[open]>summary{margin-bottom:10px}
.sello-panel .sello-version{margin:0;font-size:13px;color:var(--muted)}