@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-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 {
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #2f3033;
  --muted: #727579;
  --paper: #f3f4f2;
  --white: #ffffff;
  --dark: #302f2f;
  --teal: #07566a;
  --teal-dark: #043d4d;
  --gold: #9b8e25;
  --gold-soft: #d7ca73;
  --line: #e3e4e0;
  --shadow: 0 24px 70px rgba(33, 38, 39, 0.12);
  --max: 1120px;
}

.config-page {
  min-height: 100svh;
  background: #f2f3f1;
}

.configurator {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  min-height: calc(100svh - 56px);
}

.config-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 24px;
  background: var(--white);
  border-right: 1px solid rgba(43, 44, 46, 0.12);
}

.config-panel-heading h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 2.2rem;
  line-height: 1;
}

.config-panel label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
}

.config-panel input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--teal);
}

.config-panel output {
  color: var(--teal);
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
}

.config-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.config-actions .button {
  min-height: 44px;
  padding: 0 16px;
}

.config-code {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid rgba(43, 44, 46, 0.18);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #f7f8f6;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.config-preview {
  min-width: 0;
  overflow: auto;
  background: var(--white);
}

.config-preview .hero {
  min-width: 1120px;
}

@media (max-width: 880px) {
  .configurator {
    grid-template-columns: 1fr;
  }

  .config-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(43, 44, 46, 0.12);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 9px clamp(18px, 4vw, 58px);
  color: var(--white);
  background: var(--ink);
}

.desktop-nav,
.header-contact {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  font-size: 0.74rem;
  font-weight: 850;
}

.desktop-nav a,
.header-contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header-contact {
  justify-content: flex-end;
  line-height: 1.25;
}

.header-contact span {
  color: rgba(255, 255, 255, 0.76);
}

.dashboard-topbar {
  position: relative;
}

/* Flotante: fija respecto a la ventana, asi sigue a la vista al hacer scroll.
   En reposo queda justo debajo de la cabecera (60px + 16px de aire). */
.session-bar {
  position: fixed;
  top: 76px;
  right: clamp(18px, 4vw, 58px);
  pointer-events: none;
  z-index: 31;
}

.session-bar .session-countdown {
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(20, 22, 24, 0.22);
}

.session-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 22, 24, 0.55);
}

/* Aviso "¿Sigues trabajando?": oscurece y difumina la pagina para que se note y para
   que, si nadie esta delante, los datos de detras no se lean. Por encima del aviso inicial. */
.session-warn-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 22, 24, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.session-warn-overlay[hidden] {
  display: none;
}

.session-warn-overlay .session-warn-box {
  text-align: center;
  justify-items: center;
  border-top-color: #d9534f;
}

.session-warn-overlay .session-warn-box .button {
  justify-self: center;
}

.session-warn-overlay .session-intro-box p strong.session-warn-seconds {
  display: inline-block;
  min-width: 1.6ch;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 1.4rem;
  color: #b3261e;
}

.session-warn-error {
  color: #b3261e;
  font-weight: 700;
}

.session-intro-box {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: 28px;
  background: var(--white);
  border-top: 4px solid var(--gold);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.session-intro-box h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.25rem;
  line-height: 1.25;
}

.session-intro-box p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.session-intro-box p strong {
  color: var(--teal-dark);
}

.session-intro-box .button {
  justify-self: start;
  margin-top: 6px;
}

.session-countdown {
  padding: 8px 20px;
  color: var(--teal-dark);
  background: var(--gold-soft);
  border-radius: 999px;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.session-countdown--warning {
  color: #2f1010;
  background: #f3b7b7;
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-button,
.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 51vw) minmax(340px, 500px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  justify-content: start;
  width: 100%;
  min-height: min(640px, calc(100svh - 52px));
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 80px) 46px 0;
  background: var(--white);
  overflow: visible;
}

.hero-visual {
  position: relative;
  z-index: 0;
  height: clamp(
    var(--hero-visual-min, 464px),
    var(--hero-visual-fluid, 33.25vw),
    var(--hero-visual-max, 482px)
  );
  min-height: 0;
  overflow: visible;
}

.image-stack {
  position: absolute;
  top: var(--hero-effect-y, 0px);
  left: var(--hero-effect-x, -4%);
  width: auto;
  height: var(--hero-effect-height, 100%);
  aspect-ratio: 1040 / 913;
  background-image: url("../img/portada-vesmar.webp");
  background-position: var(--hero-photo-x, center) var(--hero-photo-y, bottom);
  background-size: var(--hero-photo-size, cover);
  transform: scale(var(--hero-effect-scale, 1.28));
  transform-origin: left top;
}

.effect-mask {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--hero-svg-scale, 1));
  transform-origin: center;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-width: 500px;
  padding-top: 0;
  text-align: left;
}

.pretitle,
.tag {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section h2,
.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1.65rem, 2.45vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.section h2 span {
  color: var(--teal);
}

.hero-copy h1 {
  display: grid;
  gap: 0.08em;
  max-width: 500px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(2.05rem, 3.05vw, 3.05rem);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy h1 span {
  display: block;
  overflow-wrap: anywhere;
}

.hero-copy h1 .title-accent {
  color: var(--teal);
}

.hero-logo {
  display: block;
  width: min(330px, 100%);
  height: auto;
  margin: 0 0 22px;
  padding: 0;
  background: var(--white);
  border-radius: 4px;
}

.hero-copy p:not(.pretitle) {
  max-width: 480px;
  margin: 20px 0 0;
  color: #4d5052;
  font-size: clamp(0.96rem, 1.15vw, 1.06rem);
  font-weight: 650;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-weight: 950;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button.primary {
  color: var(--white);
  background: var(--teal);
  border-color: var(--teal);
}

.button.ghost {
  color: var(--ink);
  background: transparent;
}

.request-bar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  gap: 16px;
  width: min(1240px, calc(100% - 36px));
  margin: -74px auto 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.request-bar div {
  min-height: 58px;
  padding: 10px 18px;
  background: #f4f4f2;
  border-radius: 4px;
}

.request-bar span {
  display: block;
  color: #a0a19e;
  font-size: 0.76rem;
  font-weight: 850;
}

.request-bar strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 0.92rem;
}

.request-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 12px 20px;
  color: var(--white);
  background: var(--teal);
  border-radius: 4px;
  font-weight: 950;
}

.section {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(68px, 8vw, 110px) 0;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(30px, 5.8vw, 72px);
  align-items: center;
}

.about-copy p:not(.tag),
.service-grid p,
.steps p {
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 600;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  color: #55585a;
  font-size: 0.9rem;
  font-weight: 800;
}

.check-list li::before {
  position: absolute;
  top: 2px;
  left: 0;
  content: "✓";
  color: var(--teal);
  font-weight: 950;
}

.about-image {
  overflow: hidden;
  border-radius: 140px 8px 8px 8px;
}

.about-image img {
  width: 100%;
  aspect-ratio: 1.15;
  object-fit: cover;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 clamp(62px, 6.5vw, 90px);
}

.stats article {
  text-align: center;
}

.stats strong {
  display: block;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(2.35rem, 4.6vw, 4.2rem);
  font-weight: 500;
  line-height: 0.95;
}

.stats strong::first-letter {
  color: var(--teal);
}

.stats span {
  display: block;
  margin-top: 12px;
  color: #8a8b88;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.services {
  width: 100%;
  max-width: none;
  background: #eceeeb;
}

.services > * {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.section-heading {
  text-align: center;
}

.section-heading h2 {
  max-width: 680px;
  margin: 0 auto;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.service-grid article {
  min-height: 220px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.service-grid h3 {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-family: var(--font);
  font-size: 1.45rem;
  line-height: 1.05;
}

.gallery {
  padding-top: clamp(62px, 6.8vw, 96px);
}

.gallery .section-heading h2 {
  max-width: 680px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, 16vw);
  gap: 16px;
  margin-top: 40px;
}

.gallery-item {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  border-radius: 6px;
}

.gallery-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 10px 12px;
  color: var(--white);
  background: rgba(47, 48, 51, 0.78);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.2;
}

.method {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: clamp(30px, 5.8vw, 72px);
}

.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.steps span {
  color: var(--gold);
  font-weight: 950;
}

.steps strong {
  display: block;
  margin-top: 8px;
  color: var(--teal-dark);
  font-family: var(--font);
  font-size: 1.28rem;
}

.steps p {
  margin-bottom: 0;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr);
  gap: clamp(30px, 5.8vw, 72px);
  align-items: start;
}

.contact-copy p {
  max-width: 520px;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 600;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.contact-form label,
.contact-form .field-wide {
  display: grid;
  gap: 7px;
}

.contact-form .field-wide {
  grid-column: 1 / -1;
}

.contact-form span {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
}

.contact-form textarea {
  min-height: 124px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid rgba(7, 86, 106, 0.28);
  outline-offset: 2px;
  border-color: var(--teal);
}

.contact-form .button {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 190px;
}

.site-footer {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 4px;
  padding: 10px clamp(18px, 4vw, 48px);
  background: var(--white);
  border-top: 1px solid var(--line);
}

.site-footer span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.developer-logo {
  width: min(130px, 42vw);
  height: auto;
}

.login-page {
  min-height: 100svh;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    url("../img/portada-vesmar.webp") center / cover;
}

.login-main {
  display: grid;
  width: 100%;
  max-width: 100vw;
  min-height: calc(100svh - 56px);
  place-items: center;
  padding: clamp(32px, 6vw, 72px) 18px;
  overflow: hidden;
}

.login-panel {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 420px;
  padding: clamp(26px, 4vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.login-panel img {
  width: min(260px, 100%);
  max-width: 100%;
}

.login-panel h1 {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--ink);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
}

.login-form input:focus {
  outline: 2px solid rgba(7, 86, 106, 0.28);
  outline-offset: 2px;
  border-color: var(--teal);
}

.dashboard-page {
  min-height: 100svh;
  background: #f6f7f5;
}

/* minmax(0, 1fr) y no 1fr: 1fr equivale a minmax(auto, 1fr), o sea "como minimo lo
   que mida el contenido", y una tabla o un formulario ancho estiraba toda la pagina
   y aparecia scroll horizontal. Con 0 la columna se encoge y el contenido se adapta. */
.dashboard-main {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  min-height: calc(100svh - 56px);
}

.dashboard-sidebar {
  display: grid;
  align-content: start;
  gap: 30px;
  padding: 28px;
  background: var(--white);
  border-right: 1px solid var(--line);
}

.dashboard-sidebar img {
  width: min(220px, 100%);
  height: auto;
}

.dashboard-sidebar nav {
  display: grid;
  gap: 8px;
}

.dashboard-sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  color: var(--ink);
  background: #f4f5f3;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 950;
}

/* Casillas de permisos en la ficha de un administrador */
.permisos {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 6px 0 0;
  padding: 16px;
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.permisos legend {
  padding: 0 8px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.permisos__intro,
.permisos__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.permisos__note {
  grid-column: 1 / -1;
}

.admins-form .permiso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.admins-form .permiso input {
  flex: none;
  width: 18px;
  min-height: 0;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--teal);
}

.permiso span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.permiso b {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.permiso small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Trabajador de una obra: su tarjeta y, debajo, la casilla "Responsable" */
.obra-trabajador {
  display: grid;
  gap: 4px;
  align-content: start;
}

.admins-form .obra-trabajador__resp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.admins-form .obra-trabajador__resp input {
  flex: none;
  width: 16px;
  min-height: 0;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--teal);
}

.admins-form .obra-trabajador__resp:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}

/* Campo del formulario que ocupa las dos columnas */
.admins-form label.campo-ancho {
  grid-column: 1 / -1;
}

/* Dos desplegables seguidos (A cargo de / Obra): mitad y mitad, ocupando las dos columnas del formulario */
.admins-form .campos-par--ancho {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 680px) {
  .admins-form .campos-par--ancho {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Calle, numero y codigo postal en una sola linea (ocupa las dos columnas del formulario) */
.admins-form .campos-direccion {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 8.5rem;
  gap: 14px;
}

@media (max-width: 680px) {
  /* En movil la calle va sola arriba y numero + codigo postal juntos debajo */
  .admins-form .campos-direccion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admins-form .campos-direccion .campo-calle {
    grid-column: 1 / -1;
  }
}

/* Cantidad de unidades bajo cada herramienta del catalogo (el campo numerico no debe encogerse como una casilla) */
.admins-form .catalogo-cantidad input[type="number"] {
  flex: none;
  width: 4.5rem;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 3px 6px;
}

/* Nota bajo dos campos seguidos: ocupa las dos columnas del formulario */
.admins-form .campo-ancho-hint {
  grid-column: 1 / -1;
  margin-top: -6px;
}

/* "(opcional)" junto al nombre de un campo del formulario */
.campo-opcional {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* Datos secundarios bajo el nombre de una obra en la lista (contratante, responsable) */
.obra-detalle {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Mapa para elegir el punto de una obra (Leaflet + OpenStreetMap) */
.obra-mapa {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.obra-mapa__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.obra-mapa__boton {
  padding: 8px 16px;
  color: var(--teal-dark);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.obra-mapa__boton:hover:not(:disabled) {
  border-color: var(--teal);
}

.obra-mapa__boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.obra-mapa__estado {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.obra-mapa__estado--error {
  color: #b3261e;
}

.obra-mapa__otros {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.obra-mapa__otros:empty {
  display: none;
}

.obra-mapa__otro {
  padding: 8px 12px;
  color: var(--ink);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.obra-mapa__otro:hover {
  border-color: var(--teal);
}

/* isolation: el mapa no puede quedar por encima de la cabecera ni del contador de sesion */
.obra-mapa__mapa {
  isolation: isolate;
  height: 380px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

@media (max-width: 680px) {
  .obra-mapa__mapa {
    height: 300px;
  }
}

/* Nombres de los trabajadores dentro de la lista de obras y de la ficha */
.obra-equipo {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: baseline;
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada trabajador son dos celdas de la misma rejilla: el nombre y sus etiquetas (Responsable, Inactivo).
   Asi todas las etiquetas quedan en una columna, alineadas, sea cual sea el largo del nombre. */
.obra-equipo li {
  display: contents;
}

.obra-equipo li > span {
  white-space: nowrap;
}

.obra-marca .obra-etiqueta {
  margin-left: 6px;
}

/* En las tarjetas (pantallas estrechas) no hay sitio para dos columnas fijas: cada trabajador es una linea pegada
   a la derecha (las etiquetas quedan alineadas al borde) y, si no cabe, la etiqueta baja sin partir el nombre. */
@media screen and (max-width: 1279px) {
  .obra-equipo {
    display: block;
    min-width: 0;
  }

  .obra-equipo li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    margin: 0 0 4px;
  }
}

.obra-sin {
  color: var(--muted);
}

.obra-etiqueta {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  margin: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e9dfa8;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.obra-etiqueta--gris {
  background: var(--line);
  color: var(--muted);
}

/* Ficha de una obra (pagina Ver) */
.obra-ficha__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.obra-ficha__estado {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.obra-ficha__estado--on {
  background: #c9e6d0;
  color: #1f6b34;
}

.obra-ficha__estado--off {
  background: var(--line);
  color: var(--muted);
}

.obra-ficha__estado--pendiente {
  background: #faeacb;
  color: #8a5a00;
}

.obra-ficha__estado--rechazada {
  background: #f6d3d3;
  color: #8a1f1f;
}

.obra-ficha__estado--cancelada {
  background: var(--line);
  color: var(--muted);
}

.fichajes-filtros {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: #d64545;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  vertical-align: middle;
}

.admins-form label.fichajes-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.fichajes-fuera {
  color: #8a1f1f;
  font-weight: 800;
}

.fichajes-parte-celda {
  max-width: 220px;
}

.fichajes-parte-preview {
  display: inline-block;
  color: var(--ink);
  font-size: 0.85rem;
  cursor: help;
}

.fichajes-revisar summary {
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}

.fichajes-revisar-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 220px;
  margin-top: 8px;
}

.fichajes-revisar-form input[type="datetime-local"] {
  min-height: 38px;
  font-size: 0.85rem;
}

.fichajes-revisar-form .button {
  min-height: 36px;
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* Foto y estado juntos en la cabecera de la ficha de un trabajador */
.ficha-persona {
  display: flex;
  align-items: center;
  gap: 14px;
}

.horas-extra-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ficha-persona .worker-thumb--preview {
  margin-bottom: 0;
}

/* Dentro de una ficha las listas de obras y herramientas van a la izquierda, tambien en pantallas estrechas */
.obra-ficha .obra-equipo li {
  justify-content: flex-start;
}

.obra-ficha__subtitulo {
  margin: 26px 0 12px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obra-ficha__bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.obra-ficha__bloques h2 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obra-datos {
  display: grid;
  gap: 12px;
  margin: 0;
}

.obra-datos dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.obra-datos dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* Lista de casillas en varias columnas (trabajadores de una obra) */
.permisos--lista {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.permisos--lista legend,
.permisos--lista .permisos__intro,
.permisos--lista .permisos__note {
  grid-column: 1 / -1;
}

/* Seccion bloqueada para este rol: se ve, pero apagada, con candado y sin poder pulsarse. */
.dashboard-sidebar .nav-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  color: var(--ink);
  background: #f4f5f3;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 950;
  opacity: 0.5;
  cursor: not-allowed;
  user-select: none;
}

.nav-locked__icon {
  flex: none;
}

/* Icono a la derecha de cada opcion del menu */
.nav-icon {
  flex: none;
  color: var(--teal);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fondo distinto cuando entras como propietario, para que se note el rol de un vistazo */
.dashboard-sidebar--owner {
  background: #c2d5da;
  border-right-color: rgba(7, 86, 106, 0.4);
}

.dashboard-sidebar--owner a {
  background: #eef6f5;
  border-color: rgba(7, 86, 106, 0.3);
}

.dashboard-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-content: start;
  gap: 28px;
  padding: clamp(28px, 3.5vw, 60px);
}

.dashboard-content h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.dashboard-welcome {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.dashboard-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  color: var(--muted);
  background: var(--white);
  border: 1px dashed rgba(47, 48, 51, 0.26);
  border-radius: 6px;
  font-weight: 800;
}

.dashboard-success {
  margin: 0;
  padding: 10px 12px;
  color: #2b6b3f;
  background: #eaf7ee;
  border: 1px solid #b9e0c3;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Filtro Activos / Inactivos / Todos encima de las tablas */
.list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.list-filter a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.list-filter a span {
  min-width: 1.5em;
  padding: 1px 6px;
  color: var(--muted);
  background: #f0f1ef;
  border-radius: 999px;
  font-size: 0.72rem;
  text-align: center;
}

.list-filter a:hover {
  border-color: var(--teal);
}

.list-filter a[aria-current="true"] {
  color: var(--white);
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.list-filter a[aria-current="true"] span {
  color: var(--teal-dark);
  background: var(--white);
}

.admins-table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admins-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.admins-table th,
.admins-table td {
  padding: 8px 5px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

/* Solo las cabeceras y los botones van en una linea; el resto de celdas pueden
   partirse (p.ej. "Oficial de obra") para que la tabla quepa sin scroll lateral. */
.admins-table th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admins-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Una IP (sobre todo IPv6, de hasta 39 caracteres) o un email largo no tienen
   espacios donde partirse y ensanchaban la tabla entera (obligando a un scroll
   lateral aunque sobrara sitio): se les permite partirse para que nunca
   empujen al resto fuera. */
.admins-table td[data-label="IP"],
.admins-table td[data-label="Email"] {
  overflow-wrap: anywhere;
}

.admins-row--inactive {
  background: #e3ccc9;
  color: var(--muted);
}

/* Obras en marcha: fondo verde suave (las inactivas siguen en tono rojizo) */
.admins-row--activa {
  background: #e6f3e9;
}

.worker-thumb {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.worker-thumb--empty {
  background: var(--surface, #eef1f0);
}

.worker-thumb--preview {
  width: 84px;
  height: 84px;
  margin-bottom: 8px;
}

.photo-crop {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 10px;
}

.photo-crop__stage {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  border-radius: 12px;
  background: #222;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.photo-crop__stage--drag {
  cursor: grabbing;
}

.photo-crop__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
}

/* Guia circular: oscurece lo que quedara fuera del circulo de la miniatura. */
.photo-crop__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0, transparent 48%, rgba(0, 0, 0, 0.55) 48.5%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.photo-crop__zoom {
  width: 280px;
  max-width: 100%;
}

.admins-row--inactive .admin-badge {
  opacity: 0.65;
}

.admin-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-badge--owner {
  color: var(--teal-dark);
  background: #e2f0ec;
}

.admin-badge--admin {
  color: #555;
  background: #eee;
}

.admins-toggle-form {
  margin: 0;
}

.vacaciones-resolver-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.vacaciones-motivo-input {
  min-width: 160px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.78rem;
}

.admins-toggle-btn {
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.admins-toggle-btn--off {
  color: #9a3b3b;
  background: #fbeaea;
  border-color: #e8b4b4;
}

.admins-toggle-btn--off:hover {
  background: #f6d8d8;
}

.admins-toggle-btn--on {
  color: #2b6b3f;
  background: #eaf7ee;
  border-color: #b9e0c3;
}

.admins-toggle-btn--on:hover {
  background: #d9f0e0;
}

.admins-action-note {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.admins-actions-cell {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Acciones que pueden pasar a una segunda linea si no caben (Ver y Editar arriba, el boton debajo) */
.admins-actions-cell--envuelve {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Marca de "asignado a una obra" en la lista de trabajadores: icono en pantalla ancha, texto en las tarjetas */
.en-obra {
  display: inline-block;
  margin-left: 1px;
  color: var(--teal);
  vertical-align: -2px;
  cursor: help;
}

.estado-celda {
  white-space: nowrap;
}

.en-obra-texto {
  display: none;
  white-space: normal;
}

/* Tabla de obras: filas de varias lineas (nombre + contratante, direccion, nombres de trabajadores), todo alineado arriba.
   La celda de acciones vuelve a ser una celda normal para que la fila y su linea no se corten. */
.admins-table--obras td {
  vertical-align: top;
}

.admins-table--obras td.admins-actions-cell {
  display: table-cell;
}

.admins-table--obras td.admins-actions-cell > * {
  display: inline-block;
  margin: 0 8px 6px 0;
  vertical-align: middle;
}

.obra-nombre {
  display: block;
  color: var(--ink);
  font-size: 0.86rem;
}

.admins-edit-link {
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.admins-edit-link:hover {
  color: var(--teal-dark);
}

/* Para poder usar la misma pinta de enlace en un <button> (ej. "Traducir"),
   que por defecto trae su propio borde, fondo y tipografia. */
button.admins-edit-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

button.admins-edit-link:disabled {
  color: var(--muted);
  cursor: default;
}

.traduccion-resultado {
  display: block;
  color: var(--teal-dark);
  font-style: italic;
}

.admins-form-card {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admins-form-card h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.1rem;
}

.admins-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admins-form label {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
}

/* El selector de archivo tiene un ancho minimo propio (el texto "Ningun archivo
   seleccionado"); sin esto se salia de la caja en moviles estrechos. */
.admins-form input[type="file"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admins-form label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admins-form input,
.admins-form select {
  min-height: 44px;
  padding: 8px 12px;
  color: var(--ink);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.admins-form .button {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 680px) {
  .admins-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pantallas estrechas: cada fila de las tablas con .admins-table-wrap--cards pasa a ser una tarjeta con el nombre
   de cada dato a la izquierda y su valor a la derecha, sin scroll horizontal.
   Solo en pantalla: al imprimir (Actividad -> PDF) se mantiene la tabla normal. */
@media screen and (max-width: 1279px) {
  .admins-table-wrap--cards {
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .admins-table-wrap--cards .admins-table,
  .admins-table-wrap--cards .admins-table tbody,
  .admins-table-wrap--cards .admins-table tr,
  .admins-table-wrap--cards .admins-table td {
    display: block;
    width: 100%;
  }

  /* Cabecera oculta a la vista pero disponible para lectores de pantalla. */
  .admins-table-wrap--cards .admins-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admins-table-wrap--cards .admins-table tbody tr {
    margin-bottom: 12px;
    padding: 4px 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .admins-table-wrap--cards .admins-table tbody tr.admins-row--inactive {
    background: #e3ccc9;
  }

  .admins-table-wrap--cards .admins-table tbody tr.admins-row--activa {
    background: #e6f3e9;
  }

  .admins-table-wrap--cards .admins-table td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 9px 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .admins-table-wrap--cards .admins-table td[data-label]::before {
    content: attr(data-label);
    flex: none;
    margin-right: auto;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
  }

  .admins-table-wrap--cards .admins-table td[colspan] {
    display: block;
    text-align: left;
  }

  .admins-table-wrap--cards .admins-table tbody tr td:last-child {
    border-bottom: 0;
  }

  .admins-table-wrap--cards .admins-actions-cell {
    flex-wrap: wrap;
  }

  .admins-table-wrap--cards .en-obra {
    display: none;
  }

  .admins-table-wrap--cards .en-obra-texto {
    display: block;
    color: var(--teal);
    font-weight: 700;
  }
}

@media (max-width: 980px) {
  .site-header {
    justify-content: flex-end;
    min-height: 54px;
  }

  .desktop-nav,
  .header-contact {
    display: none;
  }

  .nav-button {
    display: flex !important;
    position: relative;
    z-index: 3;
    flex-direction: column;
    gap: 4px;
    justify-self: end;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 6px;
    cursor: pointer;
  }

  .nav-button span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0;
    background: var(--white);
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    right: 18px;
    left: 18px;
    display: grid;
    padding: 12px;
    background: var(--dark);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .mobile-nav a {
    padding: 13px 8px;
    font-weight: 850;
  }

  .nav-toggle:checked ~ .mobile-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 0 16px 94px;
  }

  .hero-visual {
    height: 420px;
    min-height: 0;
    order: 1;
    margin-inline: -16px;
  }

  .hero-copy {
    order: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: 760px;
    padding-top: 0;
    align-items: center;
    text-align: center;
  }

  .hero-logo {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .request-bar,
  .about,
  .method,
  .contact {
    grid-template-columns: 1fr;
  }

  .request-bar {
    margin-top: -64px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, 28vw);
  }

  .dashboard-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* En movil no hay sitio para que flote debajo del menu sin taparlo (el
     panel se apila y el logo queda justo ahi), pero tampoco queremos una
     fila nueva en blanco. Se mete dentro de la propia barra oscura del
     menu, pegada al borde derecho (en el panel no hay boton de hamburguesa
     que tapar). */
  .session-bar {
    top: 30px;
    right: clamp(14px, 4vw, 30px);
    transform: translateY(-50%);
  }
}

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  .site-header {
    display: none;
  }

  .hero {
    width: 100vw;
    max-width: 100vw;
  }

  .hero-copy,
  .hero-copy p:not(.pretitle) {
    width: 100%;
    max-width: calc(100vw - 48px);
    overflow-wrap: anywhere;
  }

  .hero-visual {
    height: 320px;
    overflow: hidden;
  }

  .image-stack {
    top: 0;
    left: -34%;
    width: auto;
    height: 100%;
  }

  .hero-copy h1,
  .section h2,
  .section-heading h2 {
    font-size: clamp(1.75rem, 7vw, 2.2rem);
  }

  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.05;
  }

  .hero-logo {
    width: min(330px, calc(100vw - 28px));
    max-width: 100%;
    padding: 7px 0;
  }

  .hero-copy p:not(.pretitle) {
    font-size: 0.94rem;
  }

  .hero-actions {
    display: grid;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
    gap: 12px;
  }

  .gallery-featured {
    grid-column: auto;
    grid-row: auto;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .request-bar {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 12px;
  }

  .request-bar a {
    min-width: 0;
  }

  .section,
  .services > *,
  .stats {
    width: calc(100% - 32px);
  }

  .check-list,
  .stats {
    grid-template-columns: 1fr;
  }

  .about-image {
    border-radius: 80px 6px 6px 6px;
  }

  .site-footer {
    padding-block: 10px;
  }

  .login-main {
    padding-inline: 16px;
    justify-items: start;
  }

  .login-panel {
    width: min(320px, calc(100vw - 72px));
    max-width: 100%;
  }
}

/* ==========================================================
   Refinamiento de diseño y responsive (v2)
   ========================================================== */

:root {
  --radius: 10px;
  --shadow-soft: 0 10px 34px rgba(33, 38, 39, 0.08);
  --shadow-hover: 0 18px 44px rgba(33, 38, 39, 0.16);
}

/* Header */
.site-header {
  gap: 24px;
  min-height: 60px;
  background: rgba(47, 48, 51, 0.96);
  backdrop-filter: blur(8px);
}

.brand {
  display: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.desktop-nav a,
.header-contact a {
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.desktop-nav a:hover,
.header-contact a:hover {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
}

/* Hero: sin escalón blanco al final */
.hero {
  overflow: clip;
  padding-bottom: 56px;
}

.button {
  border-radius: 8px;
}

.button.primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  box-shadow: 0 10px 24px rgba(7, 86, 106, 0.28);
}

.button.ghost:hover {
  color: var(--white);
  background: var(--ink);
}

.button--danger {
  background: #9a3b3b;
  border-color: #9a3b3b;
}

.button--danger:hover {
  background: #7c2e2e;
  border-color: #7c2e2e;
}

.link-button {
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button:hover {
  color: var(--ink);
}

.security-cancel-form {
  margin-top: 10px;
}

.security-actions {
  margin-bottom: 4px;
}

.field-hint {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 42px;
}

.password-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.password-tool {
  padding: 7px 14px;
  color: var(--teal-dark);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.password-tool:hover:not(:disabled) {
  border-color: var(--teal);
}

.password-tool:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.password-tools__hint[hidden] {
  display: none;
}

.password-tools__hint {
  flex-basis: 100%;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.06);
}

.password-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.password-toggle--active::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.4 10.4 0 0 1 12 4c7 0 11 7 11 7a21.6 21.6 0 0 1-2.61 3.68M14.12 14.12A3 3 0 1 1 9.88 9.88'/%3E%3Cpath d='m1 1 22 22'/%3E%3C/svg%3E") center / contain no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A10.4 10.4 0 0 1 12 4c7 0 11 7 11 7a21.6 21.6 0 0 1-2.61 3.68M14.12 14.12A3 3 0 1 1 9.88 9.88'/%3E%3Cpath d='m1 1 22 22'/%3E%3C/svg%3E") center / contain no-repeat;
}

.totp-qr {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.totp-secret {
  margin: 8px 0 0;
  padding: 12px 14px;
  color: var(--teal-dark);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.recovery-codes-card {
  border-top: 4px solid var(--gold);
}

.recovery-codes-warning {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.recovery-codes-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recovery-codes-list li {
  padding: 10px 12px;
  color: var(--ink);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: 0.94rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 680px) {
  .recovery-codes-list {
    grid-template-columns: 1fr;
  }
}

/* Títulos de sección */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tag::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold);
}

.section-heading .tag {
  justify-content: center;
}

.section h2,
.section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.08;
}

/* Sobre nosotros */
.about-image {
  border-radius: 160px 12px 12px 12px;
  box-shadow: var(--shadow);
}

.about-copy p:not(.tag) {
  font-size: 1rem;
  line-height: 1.7;
}

/* Cifras */
.stats {
  width: 100%;
  max-width: none;
  padding: clamp(40px, 5vw, 64px) max(20px, calc((100% - var(--max)) / 2));
  background: var(--teal-dark);
}

.stats strong {
  color: var(--white);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
}

.stats strong::first-letter {
  color: var(--gold-soft);
}

.stats span {
  color: rgba(255, 255, 255, 0.7);
}

.stats article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Servicios */
.service-grid article {
  padding: 30px 28px;
  border: 0;
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.service-grid article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.service-num {
  display: block;
  margin-bottom: 18px;
  color: var(--gold);
  font-family: var(--font);
  font-size: 2.2rem;
  line-height: 1;
}

/* Galería */
.gallery-item {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.gallery-item img {
  transition: transform 500ms ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item::after {
  position: absolute;
  inset: 45% 0 0;
  content: "";
  background: linear-gradient(transparent, rgba(30, 31, 33, 0.72));
  pointer-events: none;
}

.gallery-item figcaption {
  z-index: 1;
  padding: 0;
  background: none;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

/* Método */
.steps li {
  padding: 24px 24px 24px 28px;
  border: 0;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.steps span {
  font-family: var(--font);
  font-size: 1.1rem;
}

/* Contacto */
.contact-form {
  border: 0;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 8px;
}

.site-footer {
  padding-block: 18px;
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .brand {
    display: block;
  }

  .site-header {
    justify-content: space-between;
  }

  .mobile-nav {
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .hero {
    padding: 0 20px 56px;
  }

  .hero-visual {
    height: clamp(300px, 62vw, 470px);
    margin-inline: -20px;
    overflow: hidden;
  }

  .hero-copy {
    padding-top: 12px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .stats article:nth-child(3) {
    border-left: 0;
  }
}

/* ---------- Móvil ---------- */
@media (max-width: 680px) {
  .site-header {
    display: flex;
    min-height: 56px;
  }

  .hero {
    width: 100%;
    max-width: 100%;
    padding: 0 20px 44px;
  }

  .hero-visual {
    height: clamp(250px, 76vw, 330px);
    margin-inline: -20px;
  }

  .image-stack {
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%) scale(1.05);
    transform-origin: center top;
  }

  .hero-copy {
    max-width: 100%;
    padding-top: 18px;
    align-items: center;
    text-align: center;
  }

  .hero-copy p:not(.pretitle) {
    max-width: 100%;
  }

  .hero-logo {
    width: min(250px, 72vw);
    margin-bottom: 16px;
  }

  .hero-copy h1 {
    font-size: clamp(1.6rem, 7.4vw, 2.1rem);
  }

  .hero-actions {
    max-width: 100%;
    gap: 10px;
  }

  .button {
    max-width: 100%;
  }

  .section {
    padding-block: 56px;
  }

  .section-heading .tag {
    justify-content: flex-start;
  }

  .section-heading {
    text-align: left;
  }

  .section-heading h2 {
    margin-inline: 0;
  }

  .stats {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 12px;
    padding: 40px 20px;
  }

  .stats article + article {
    border-left: 0;
  }

  .stats article:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .stats strong {
    font-size: 1.7rem;
  }

  .service-grid article {
    min-height: 0;
  }

  .gallery-grid {
    grid-auto-rows: 220px;
  }

  .about-image {
    border-radius: 90px 10px 10px 10px;
  }

  .check-list {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 20px 16px;
  }

  .contact-form .button {
    justify-self: stretch;
  }

  .login-main {
    justify-items: center;
  }

  .login-panel {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .effect-mask {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
  }
}

/* Título del hero: tamaño contenido */
.hero-copy h1 {
  max-width: 460px;
  font-size: clamp(1.45rem, 2.05vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.hero-copy h1 span {
  overflow-wrap: normal;
}

@media (max-width: 980px) {
  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(1.45rem, 4.2vw, 1.9rem);
  }
}

@media (max-width: 680px) {
  .hero-copy h1 {
    font-size: clamp(1.25rem, 5.6vw, 1.6rem);
    line-height: 1.15;
  }
}

/* Portátiles pequeños: el efecto no debe pisar el texto */
@media (min-width: 981px) and (max-width: 1240px) {
  .hero-visual {
    transform: scale(0.86);
    transform-origin: left center;
  }
}

/* Método: columna izquierda con contenido */
.method {
  align-items: start;
}

.method-copy {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.method-copy .tag,
.method-copy h2,
.method-copy p {
  margin: 0;
}

.method-copy p:not(.tag) {
  max-width: 460px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.7;
}

.method-image {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 12px 100px 12px 12px;
  box-shadow: var(--shadow);
}

.method-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (max-width: 980px) {
  .method-image {
    border-radius: 12px 70px 12px 12px;
  }
}

@media (max-width: 680px) {
  .method-copy .button {
    width: 100%;
  }
}

/* Tipografía unificada (Montserrat) */
h1, h2, h3, .stats strong, .service-num, .steps strong, .steps span {
  font-family: var(--font);
  letter-spacing: -0.01em;
}

.section h2,
.section-heading h2 {
  font-weight: 700;
  line-height: 1.15;
}

.stats strong {
  font-weight: 600;
}

.hero-copy h1 {
  font-weight: 800;
  letter-spacing: 0;
}

body {
  font-weight: 500;
}

.about-copy p:not(.tag),
.service-grid p,
.steps p,
.contact-copy p,
.method-copy p:not(.tag) {
  font-weight: 500;
  line-height: 1.75;
}

/* Galería: 7 piezas + destacada */
.gallery-grid {
  grid-auto-flow: dense;
}

.gallery-tall {
  grid-row: span 2;
}

.gallery-wide {
  grid-column: span 2;
}

@media (max-width: 680px) {
  .gallery-tall,
  .gallery-wide {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Login compacto */
.login-main {
  min-height: calc(100svh - 60px);
  padding: 24px 16px;
}

.login-panel {
  gap: 18px;
  max-width: 360px;
  padding: 28px 28px 22px;
  border: 1px solid var(--gold);
  border-radius: 14px;
}

.login-panel img {
  width: 150px;
}

.login-panel .pretitle {
  margin-bottom: 6px;
  font-size: 0.66rem;
}

.login-form {
  gap: 12px;
}

.login-form label {
  gap: 6px;
  font-size: 0.68rem;
}

.login-form input {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
}

.login-form .button {
  min-height: 44px;
  margin-top: 4px;
  width: 100%;
}

.login-error {
  margin: 0;
  padding: 10px 12px;
  color: #9a3b3b;
  background: #fbeaea;
  border: 1px solid #e8b4b4;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.login-recovery {
  padding-top: 4px;
  font-size: 0.82rem;
}

.login-recovery summary {
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.login-recovery .login-form {
  margin-top: 12px;
}

.login-back {
  justify-self: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.login-back:hover {
  color: var(--teal);
}

@media (max-width: 680px) {
  .login-main {
    justify-items: center;
    align-items: start;
    padding-top: 32px;
  }

  .login-panel {
    width: 100%;
    max-width: 360px;
    padding: 24px 20px 18px;
  }
}

/* Actividad: filtro de fecha e impresion/PDF */
.activity-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.activity-filter label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activity-filter input {
  min-height: 42px;
  padding: 8px 10px;
  color: var(--ink);
  background: #f7f7f5;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.activity-filter .button {
  min-height: 42px;
  padding: 0 16px;
}

.activity-print-only,
.activity-print-logo {
  display: none;
}

@media (max-width: 680px) {
  .activity-filter {
    flex-direction: column;
    align-items: stretch;
  }
}

@media print {
  body {
    background: #fff;
  }

  .site-header,
  .session-bar,
  .session-intro-overlay,
  .session-warn-overlay,
  .dashboard-sidebar,
  .activity-screen-only,
  .list-filter,
  .admins-toggle-form {
    display: none !important;
  }

  .dashboard-main {
    display: block;
  }

  .dashboard-content {
    padding: 0;
  }

  .activity-print-only,
  .activity-print-logo {
    display: block;
  }

  .activity-print-logo {
    width: 140px;
    margin-bottom: 10px;
  }

  .admins-table-wrap {
    overflow: visible;
    border: 0;
  }

  .admins-table {
    font-size: 0.78rem;
  }

  .admins-table tr {
    break-inside: avoid;
  }
}