* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* V3.80 - El atributo [hidden] nativo pierde contra cualquier regla de
   autor que fije su propio display (p.ej. .status-note/.auth-form usan
   display:grid/flex) porque CSS de autor siempre gana al de user-agent,
   tenga o no mas especificidad. Se ha visto este bug repetirse en mas de
   una pagina - esta regla lo evita en toda la web de una vez. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #0b0f14;
  --card: #121821;
  --card-2: #18212c;
  --text: #f3f6fb;
  --muted: #a4adba;
  --accent: #00b7a8;
  --accent-hover: #009d91;
  --border: rgba(255,255,255,0.08);
  --danger: #ffcc66;
  --shadow: 0 12px 40px rgba(0,0,0,0.28);
  --radius: 18px;
  --max: 1100px;
  --form-max: 760px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0,183,168,0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 20%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  /* V3.78 - Chrome/WebView en Android puede "engordar" el texto solo
     (font boosting) en columnas estrechas, algo que Safari en iOS no
     hace. Con el mismo CSS eso hacia que Android ocupara mas alto que
     iPhone. Se desactiva ese autoescalado para que el tamano de fuente
     sea el que fija el CSS y no uno inflado por el navegador. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

.container {
  width: min(92%, var(--max));
  margin: 0 auto;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(15,17,21,0.75);
  border-bottom: 1px solid var(--border);
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  position: relative;
}

.mobile-menu-toggle span::before,
.mobile-menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.mobile-menu-toggle span::before {
  top: -6px;
}

.mobile-menu-toggle span::after {
  top: 6px;
}

.mobile-menu-panel {
  display: none;
}

.app-page {
  --menu-push: 96px;
  overflow-x: clip;
}

.app-page .navbar {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: calc(env(safe-area-inset-left) + 8px);
  width: auto;
  z-index: 45;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}

.app-page .navbar .container {
  width: auto;
  margin: 0;
}

.app-page .navbar-inner {
  padding: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

.app-page .nav-links {
  display: none;
}

.app-page .mobile-menu-toggle {
  display: inline-flex;
}

.app-page .mobile-menu-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 46px);
  left: calc(env(safe-area-inset-left) + 8px);
  width: 176px;
  z-index: 40;
  background: rgba(11,15,20,0.98);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
}

.app-page .mobile-menu-panel.open {
  display: grid;
  gap: 8px;
}

.app-page .mobile-menu-panel a {
  display: block;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,0.03);
}

.app-page .mobile-menu-panel a.active {
  border-color: rgba(25,195,125,0.45);
  background: rgba(25,195,125,0.08);
}

.app-page main {
  padding-top: 42px;
  padding-left: 50px;
  max-width: 100%;
  overflow-x: hidden;
  transition: transform 0.28s ease;
  will-change: transform;
}

.app-page .footer {
  transition: transform 0.28s ease;
  will-change: transform;
}

.app-page.menu-open main,
.app-page.menu-open .footer {
  transform: translateX(var(--menu-push));
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 16px;
}

.brand {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.brand span {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-links a {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  transition: 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  border-color: rgba(25,195,125,0.45);
  background: rgba(25,195,125,0.08);
}

.hero {
  padding: 72px 0 42px;
}

.auth-page {
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(182, 218, 207, 0.14), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(201, 176, 107, 0.12), transparent 18%),
    linear-gradient(145deg, #061016 0%, #0a141c 48%, #101a24 100%);
}

.auth-page .footer {
  margin-top: 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.auth-page main.auth-main {
  min-height: 0;
  height: 100%;
  padding-left: 0;
}

.auth-main {
  min-height: calc(100vh - 88px);
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 52px 0 24px;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(320px, 460px);
  justify-content: center;
}

.calculator-shell {
  grid-template-columns: minmax(320px, 760px);
}

.auth-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(8,13,19,0.84);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  box-shadow: 0 26px 90px rgba(0,0,0,0.38);
  padding: 28px;
  backdrop-filter: blur(18px);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 26%),
    linear-gradient(180deg, transparent 70%, rgba(201,176,107,0.08));
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.auth-brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.auth-brand-mark img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.auth-brand-copy {
  display: grid;
  gap: 2px;
}

.auth-brand-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-brand-subtitle {
  color: #5eead4;
  font-size: 0.94rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* body.calculadora-page reduce line-height a 1.2 para compactar el
   formulario, pero eso encogia tambien el bloque de marca (heredado),
   separandolo visualmente del resto de paginas pese a usar el mismo
   HTML/CSS. Se restaura el interlineado estandar solo aqui. */
body.calculadora-page .auth-brand-name,
body.calculadora-page .auth-brand-subtitle {
  line-height: 1.5;
}

/* V3.80 - Texto de introduccion breve bajo el titulo, normalizado al
   tamano habitual de la web (antes heredaba tamanos de hasta 19-20px
   en varias paginas via reglas antiguas especificas por pagina). */
.page-intro-text {
  color: rgba(226, 232, 240, 0.7) !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

.auth-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
}

.auth-tab {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.auth-tab.active {
  color: #0d1620;
  background: linear-gradient(135deg, #f2f6fb 0%, #d8e3ef 100%);
}

.auth-card-header {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-card-header h2 {
  font-size: clamp(1.9rem, 4vw, 2.45rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.auth-card-header p {
  color: rgba(243,246,251,0.68);
  font-size: 0.93rem;
  max-width: 30ch;
}

.social-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.social-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.social-btn:hover,
.auth-tab:hover,
.text-link:hover {
  transform: translateY(-1px);
}

.social-btn-apple {
  background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
}

.social-btn-google {
  background: linear-gradient(135deg, rgba(214,223,228,0.08), rgba(255,255,255,0.02));
}

.social-btn:hover {
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

.social-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

.auth-divider {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.auth-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.auth-form-hidden {
  display: none;
}

.auth-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* V3.80 - Para grupos de radio tipo Si/No: quedan juntos y a la
   izquierda en vez de separados a los dos extremos - se nota mucho
   mas cuando el campo va emparejado en una columna estrecha. */
.auth-inline-compact {
  justify-content: flex-start;
}

.auth-checkbox {
  background: rgba(255,255,255,0.025);
}

.auth-submit {
  width: 100%;
  position: relative;
  z-index: 1;
  min-height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #d9e2e7 0%, #ffffff 100%);
  color: #09131b;
}

.auth-status-note {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.auth-actions-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.success-mark {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(217,226,231,0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
  color: #dce7ec;
  font-size: 1.8rem;
  font-weight: 700;
}

.calculator-card {
  display: grid;
  gap: 14px;
}

.calculator-side {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.calculator-card .auth-form {
  gap: 10px;
}

.calculator-card .field {
  gap: 3px;
}

.calculator-card label {
  line-height: 1.05;
}

.calculator-card .checkbox-item {
  padding: 5px 7px;
}

.calculator-email a {
  color: var(--text);
  font-weight: 700;
}

.calculator-checkboxes {
  gap: 6px;
}

.calculator-checkboxes-inline {
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: center;
  gap: 8px;
}

.calc-split-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculator-inline-field {
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 10px;
}

.calculator-single-check {
  width: fit-content;
}

.text-link {
  color: rgba(222,231,236,0.9);
  font-size: 0.9rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: center;
}

.hero-card,
.card,
.preview-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 34px;
}

.kicker {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 16px;
}

.hero p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 58ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: 0.2s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #08110d;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.04);
}

.preview-box {
  padding: 24px;
}

.preview-box h3 {
  margin-bottom: 14px;
}

.preview-mini {
  display: grid;
  gap: 12px;
}

.fake-line,
.fake-input,
.fake-result {
  border-radius: 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
}

.fake-line {
  height: 12px;
  width: 60%;
}

.fake-input {
  height: 46px;
}

.fake-result {
  padding: 18px;
}

.fake-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
}

.section {
  padding: 24px 0 60px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  padding: 24px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
}

.page-header {
  padding: 28px 0 16px;
  max-width: 620px;
  margin: 0 auto;
}

.page-header h1 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  margin-bottom: 6px;
}

.page-header p {
  color: var(--muted);
  max-width: 70ch;
  font-size: 0.96rem;
}

.form-card,
.calc-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.form-grid,
.calc-grid {
  display: grid;
  gap: 12px;
}

.form-grid.two,
.calc-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.field {
  display: grid;
  gap: 4px;
}

#calculatorForm {
  display: grid;
  gap: 6px;
}

#calculatorForm .field {
  gap: 3px;
}

#calculatorForm .field.compact-row {
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 6px;
}

.calc-card {
  max-width: 620px;
  margin: 0 auto;
}

label {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

input,
select,
textarea {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  padding: 0 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0,183,168,0.55);
  box-shadow: 0 0 0 4px rgba(0,183,168,0.12);
}

textarea {
  min-height: 84px;
  padding: 10px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #7f8796;
}

.checkbox-row {
  display: grid;
  gap: 4px;
  margin-top: 0;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-2);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.checkbox-item input {
  width: 15px;
  height: 15px;
  min-height: auto;
  flex: 0 0 auto;
}

.checkbox-item span {
  font-size: 0.82rem;
  line-height: 1.15;
}

.result-box {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,183,168,0.25);
  background: linear-gradient(180deg, rgba(0,183,168,0.10), rgba(0,183,168,0.05));
  min-height: 60px;
}

.result-box:empty {
  display: none;
}

.result-box .total-label {
  color: var(--muted);
  margin-bottom: 3px;
  font-size: 0.78rem;
  line-height: 1;
}

.result-box .total-price {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 900;
  color: var(--accent);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

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

.result-box ul {
  list-style: none;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.84rem;
}

.result-box li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.15;
}

.result-box li strong {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}

.footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 30px;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
  margin-top: 28px;
}

.badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,204,102,0.12);
  color: var(--danger);
  border: 1px solid rgba(255,204,102,0.18);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.status-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}

.status-note strong {
  font-size: 0.95rem;
}

.status-note p {
  color: var(--muted);
  font-size: 0.92rem;
}

#calculatorForm .btn {
  width: 100%;
  min-height: 38px;
  font-size: 0.92rem;
}

body.calculadora-page .container {
  width: 100%;
}

body.calculadora-page {
  display: grid;
  grid-template-rows: 1fr auto;
  --menu-push: 96px;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  overflow-x: clip;
  line-height: 1.2;
}

body.calculadora-page .navbar {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: calc(env(safe-area-inset-left) + 8px);
  z-index: 45;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
}

body.calculadora-page .navbar-inner {
  padding: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

body.calculadora-page .navbar .container {
  width: auto;
  margin: 0;
}

body.calculadora-page .nav-links {
  display: none;
}

body.calculadora-page .mobile-menu-toggle {
  display: inline-flex;
}

body.calculadora-page .mobile-menu-panel {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 46px);
  left: calc(env(safe-area-inset-left) + 8px);
  width: 176px;
  z-index: 40;
  background: rgba(11,15,20,0.98);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
}

body.calculadora-page .mobile-menu-panel.open {
  display: grid;
  gap: 8px;
}

body.calculadora-page .mobile-menu-panel a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,0.03);
}

body.calculadora-page .mobile-menu-panel a.active {
  border-color: rgba(25,195,125,0.45);
  background: rgba(25,195,125,0.08);
}

body.calculadora-page main.container {
  display: flex;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  max-width: 100vw;
  padding-top: 8px;
  padding-left: 52px;
  padding-bottom: 8px;
  overflow-x: clip;
  transition: transform 0.28s ease;
  will-change: transform;
}

body.calculadora-page .calc-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 12px;
  align-content: start;
}

body.calculadora-page .calc-side {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

body.calculadora-page #calculatorForm {
  gap: 10px;
}

body.calculadora-page .calc-grid.two {
  gap: 8px;
}

body.calculadora-page #calculatorForm .field.compact-row {
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

body.calculadora-page label {
  font-size: 0.94rem;
}

body.calculadora-page input,
body.calculadora-page select,
body.calculadora-page textarea {
  min-height: 34px;
  font-size: 1rem;
  padding: 0 10px;
}

body.calculadora-page #calculatorForm .btn {
  min-height: 42px;
  font-size: 1.22rem;
}

body.calculadora-page .checkbox-item {
  padding: 5px 7px;
  border-radius: 10px;
}

body.calculadora-page .checkbox-item span {
  font-size: 0.84rem;
}

body.calculadora-page .result-box {
  margin-top: 0;
  min-height: 0;
  align-self: start;
}

body.calculadora-page .email-card {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 10px;
}

body.calculadora-page .email-card p {
  color: var(--muted);
  margin-bottom: 4px;
  font-size: 0.78rem;
}

body.calculadora-page .email-card a {
  color: var(--accent);
  font-size: 0.86rem;
  word-break: break-word;
}

body.calculadora-page .footer {
  display: block;
  margin-top: 0;
  padding: 8px 0 10px;
  font-size: 0.76rem;
  border-top: none;
  transition: transform 0.28s ease;
  will-change: transform;
}

body.calculadora-page.menu-open main.container,
body.calculadora-page.menu-open .footer {
  transform: translateX(var(--menu-push));
}

@media (max-width: 900px) {
  .auth-shell,
  .hero-grid,
  .cards-grid,
  .form-grid.two,
  .calc-grid.two {
    grid-template-columns: 1fr;
  }

  .navbar-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .calc-card,
  .page-header {
    max-width: 100%;
  }

  .auth-main {
    padding-top: 84px;
  }

  .calculator-card .calc-split-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.calculadora-page .calc-card {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (max-width: 640px) {
  .auth-page input,
  .auth-page select,
  .auth-page textarea {
    font-size: 16px;
  }

  .result-box {
    padding: 11px 12px;
  }

  .result-box .total-price {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  .result-columns {
    gap: 8px;
  }

  .result-box ul {
    gap: 4px;
    font-size: 0.8rem;
  }

  .result-box li {
    gap: 8px;
    line-height: 1.08;
  }

  .result-box li strong {
    font-size: 0.83rem;
  }

  .calc-split-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .calculator-card .calc-split-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculator-inline-field {
    grid-template-columns: 92px 1fr;
    gap: 8px;
  }

  .calculator-checkboxes-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .auth-main {
    min-height: auto;
    padding: 72px 0 14px;
  }

  .auth-shell {
    gap: 18px;
  }

  .auth-card {
    padding: 18px;
    border-radius: 22px;
  }

  .auth-brand {
    margin-bottom: 16px;
  }

  .auth-inline {
    align-items: flex-start;
    flex-direction: column;
  }

  body.calculadora-page .container {
    width: 100%;
  }

  body.calculadora-page .navbar {
    top: calc(env(safe-area-inset-top) + 6px);
    left: calc(env(safe-area-inset-left) + 6px);
  }

  body.calculadora-page {
    --menu-push: 84px;
  }

  body.calculadora-page .mobile-menu-panel {
    top: calc(env(safe-area-inset-top) + 44px);
    left: calc(env(safe-area-inset-left) + 6px);
    width: 156px;
    padding: 8px;
  }

  body.calculadora-page .mobile-menu-panel a {
    padding: 9px 10px;
    font-size: 0.9rem;
  }

  body.calculadora-page .calc-card {
    padding: 8px;
    border-radius: 10px;
  }

  body.calculadora-page main.container {
    padding-top: 4px;
    padding-left: 50px;
  }

  body.calculadora-page .calc-grid.two {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body.calculadora-page #calculatorForm {
    gap: 9px;
  }

  body.calculadora-page #calculatorForm .field {
    gap: 3px;
  }

  body.calculadora-page #calculatorForm .field.compact-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
  }

  body.calculadora-page label {
    font-size: 0.95rem;
  }

  body.calculadora-page input,
  body.calculadora-page select,
  body.calculadora-page textarea {
    min-height: 36px;
    font-size: 16px;
    padding: 0 10px;
  }

  body.calculadora-page .checkbox-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.calculadora-page .checkbox-item {
    padding: 5px 6px;
    gap: 4px;
  }

  body.calculadora-page .checkbox-item input {
    width: 14px;
    height: 14px;
  }

  body.calculadora-page .checkbox-item span {
    font-size: 0.84rem;
    line-height: 1.1;
  }

  body.calculadora-page #calculatorForm .btn {
    min-height: 44px;
    font-size: 1.26rem;
  }

  body.calculadora-page .result-box {
    padding: 9px 10px;
  }

  body.calculadora-page .result-box .total-label {
    font-size: 0.8rem;
  }

  body.calculadora-page .result-box .total-price {
    font-size: 2.05rem;
    margin-bottom: 4px;
  }

  body.calculadora-page .result-box ul {
    font-size: 0.86rem;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }

  body.calculadora-page .email-card {
    padding: 7px 8px;
  }

  body.calculadora-page .email-card p {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }

  body.calculadora-page .email-card a {
    font-size: 0.76rem;
  }

  body.calculadora-page .footer {
    display: block;
  }
}

@media (max-width: 480px) {
  .app-page {
    --menu-push: 72px;
  }

  body.calculadora-page .mobile-menu-panel {
    width: 144px;
  }

  body.calculadora-page main.container {
    padding-left: 46px;
  }

  body.calculadora-page .calc-card {
    padding: 7px;
    gap: 7px;
  }

  body.calculadora-page #calculatorForm {
    gap: 8px;
  }

  body.calculadora-page #calculatorForm .field.compact-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 6px;
  }

  body.calculadora-page label {
    font-size: 0.9rem;
  }

  body.calculadora-page input,
  body.calculadora-page select,
  body.calculadora-page textarea {
    min-height: 34px;
    padding: 0 8px;
  }

  body.calculadora-page .checkbox-item {
    padding: 4px 5px;
    gap: 4px;
  }

  body.calculadora-page .checkbox-item input {
    width: 13px;
    height: 13px;
  }

  body.calculadora-page .checkbox-item span {
    font-size: 0.8rem;
  }

  body.calculadora-page #calculatorForm .btn {
    min-height: 40px;
    font-size: 1.14rem;
  }

  body.calculadora-page .result-box {
    padding: 8px;
  }

  body.calculadora-page .result-box .total-price {
    font-size: 1.8rem;
  }

  body.calculadora-page .result-box ul {
    font-size: 0.8rem;
    gap: 4px 8px;
  }

  body.calculadora-page .email-card {
    padding: 6px 7px;
  }

  body.calculadora-page .email-card p {
    font-size: 0.68rem;
    margin-bottom: 1px;
  }

  body.calculadora-page .email-card a {
    font-size: 0.73rem;
  }
}

@media (max-width: 480px) and (max-height: 760px) {
  body.calculadora-page main.container {
    padding-top: 2px;
    padding-left: 44px;
    padding-bottom: 4px;
  }

  body.calculadora-page .calc-card {
    padding: 6px;
    gap: 6px;
  }

  body.calculadora-page #calculatorForm {
    gap: 6px;
  }

  body.calculadora-page #calculatorForm .field {
    gap: 1px;
  }

  body.calculadora-page label {
    font-size: 0.86rem;
  }

  body.calculadora-page input,
  body.calculadora-page select,
  body.calculadora-page textarea {
    min-height: 32px;
  }

  body.calculadora-page .checkbox-row {
    gap: 3px;
  }

  body.calculadora-page .checkbox-item {
    padding: 3px 4px;
  }

  body.calculadora-page .checkbox-item span {
    font-size: 0.76rem;
  }

  body.calculadora-page #calculatorForm .btn {
    min-height: 36px;
    font-size: 1.06rem;
  }

  body.calculadora-page .result-box .total-price {
    font-size: 1.62rem;
  }

  body.calculadora-page .result-box ul {
    font-size: 0.75rem;
    gap: 3px 6px;
  }

  body.calculadora-page .email-card {
    padding: 5px 6px;
  }
}


/* MVP v1 helpers */
.demo-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 999;
  width: min(92vw, 420px);
  transform: translate(-50%, 16px);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(20, 24, 32, 0.94);
  color: #fff;
  font-size: 0.92rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.demo-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* V3.79 - Aviso para anadir la app a la pantalla de inicio: modal centrado
   y con fondo oscurecido para que se note de verdad, no una barra que se
   confunda con el fondo oscuro de la propia app. */
.pwa-install-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 15, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: pwaInstallFadeIn 0.2s ease;
}

@keyframes pwaInstallFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pwa-install-modal {
  position: relative;
  width: min(94vw, 380px);
  padding: 32px 26px 26px;
  border-radius: 26px;
  border: 1px solid rgba(45, 212, 191, 0.34);
  background: linear-gradient(160deg, rgba(24, 33, 42, 0.99), rgba(8, 15, 26, 0.99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(45, 212, 191, 0.08);
  color: rgba(248, 250, 252, 0.96);
  text-align: center;
  animation: pwaInstallPopIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pwaInstallPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pwa-install-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: block;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}

.pwa-install-modal-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #f8fafc;
}

.pwa-install-modal-text {
  margin: 0 0 22px;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.82);
}

.pwa-install-modal .pwa-install-action {
  width: 100% !important;
  min-height: 50px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.pwa-install-modal .pwa-install-dismiss {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.1);
  color: rgba(226, 232, 240, 0.85);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* V3.79 - Boton flotante "volver arriba" */
.scroll-top-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3000;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.82);
  color: rgba(226, 232, 240, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover,
.scroll-top-btn:focus-visible {
  background: rgba(45, 212, 191, 0.22);
  border-color: rgba(45, 212, 191, 0.5);
  outline: none;
}

.scroll-top-btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 560px) {
  .scroll-top-btn {
    width: 40px;
    height: 40px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .scroll-top-btn svg {
    width: 18px;
    height: 18px;
  }
}

.result-empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}

.btn-copy-result {
  width: 100%;
  margin-top: 12px;
}

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

.admin-card-mini {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.admin-card-mini span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
}

.admin-card-mini strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
}

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

/* MVP v2 Firebase admin */
.admin-section {
  margin-top: 20px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-section-header h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

.admin-users-list {
  display: grid;
  gap: 10px;
}

.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.admin-user-row strong,
.admin-user-row span,
.admin-user-row small {
  display: block;
}

.admin-user-row strong {
  color: #fff;
  font-size: 0.95rem;
}

.admin-user-row span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.84rem;
}

.admin-user-row small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
}

.admin-user-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-small {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .admin-section-header,
  .admin-user-row,
  .admin-user-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-user-actions .btn {
    width: 100%;
  }
}

/* MVP v4: navegación según sesión */
.nav-links [hidden],
.mobile-menu-panel [hidden] {
  display: none !important;
}

/* MVP v8: historial de cálculos */
.result-save-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(22, 216, 189, 0.2);
  background: rgba(22, 216, 189, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  text-align: center;
}

.calculation-row strong {
  color: var(--accent);
  font-size: 1.05rem;
}

/* MVP v9 admin navigation */
.admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.admin-tab {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-radius: 14px;
  padding: 11px 10px;
  font-weight: 800;
  cursor: pointer;
}

.admin-tab.active {
  color: var(--text);
  border-color: rgba(27, 220, 190, 0.55);
  background: rgba(27, 220, 190, 0.1);
}

.admin-search,
.admin-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(16, 24, 34, 0.95);
  color: var(--text);
  padding: 12px 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.admin-section-header .admin-select {
  width: auto;
  min-width: 170px;
  margin-bottom: 0;
}

.admin-user-row.is-blocked {
  opacity: 0.72;
  border-color: rgba(255, 99, 99, 0.35);
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .admin-tabs {
    grid-template-columns: 1fr;
  }

  .admin-section-header .admin-select {
    width: 100%;
  }
}


/* MVP v11: resumen admin y controles */
.admin-insights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-insight-card {
  padding: 13px;
  border: 1px solid rgba(27, 220, 190, 0.18);
  border-radius: 16px;
  background: rgba(27, 220, 190, 0.06);
}

.admin-insight-card span {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-insight-card strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.calculator-inline-field.is-hidden {
  display: none;
}

@media (max-width: 920px) {
  .admin-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* V15 - Ajuste móvil del resultado de la calculadora */
.result-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.result-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.result-item span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.1;
  min-width: 0;
}

.result-item strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 640px) {
  body.calculadora-page .result-box {
    padding: 16px 17px;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(3.35rem, 13vw, 4.35rem);
    margin-bottom: 12px;
    line-height: 0.9;
  }

  body.calculadora-page .result-breakdown {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body.calculadora-page .result-item {
    padding: 9px 10px;
  }

  body.calculadora-page .result-item span {
    font-size: 0.95rem;
  }

  body.calculadora-page .result-item strong {
    font-size: 1rem;
  }
}

@media (max-width: 380px) {
  body.calculadora-page .result-box .total-price {
    font-size: clamp(2.9rem, 12vw, 3.6rem);
  }
}

/* V16 - resultado móvil robusto + evitar caché visual antigua */
body.calculadora-page .result-box {
  overflow: hidden;
}

body.calculadora-page .result-box .total-price {
  font-size: clamp(3.2rem, 7vw, 4.8rem);
  letter-spacing: -0.06em;
}

body.calculadora-page .result-breakdown {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
}

body.calculadora-page .result-item {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

body.calculadora-page .result-item strong {
  white-space: nowrap;
  text-align: right;
}

body.calculadora-page[data-can-use-van="false"] #vanExtraField,
#vanExtraField[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  body.calculadora-page .result-box {
    padding: 18px;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(4.2rem, 16vw, 5.6rem);
    line-height: 0.9;
    margin-bottom: 16px;
  }

  body.calculadora-page .result-breakdown {
    grid-template-columns: 1fr !important;
  }

  body.calculadora-page .result-item {
    padding: 11px 12px;
    border-radius: 14px;
  }

  body.calculadora-page .result-item span {
    font-size: 1rem;
  }

  body.calculadora-page .result-item strong {
    font-size: 1.08rem;
  }
}

/* V17 - login limpio, resultado calculadora robusto en móvil y escritorio */
.auth-divider-clean {
  margin-top: 10px;
}

.result-breakdown-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  margin-top: 12px;
}

.result-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.result-row span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
}

.result-row strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  text-align: right;
}

body.calculadora-page .result-box .total-price {
  font-size: clamp(4.25rem, 8vw, 5.6rem) !important;
  line-height: 0.88 !important;
  margin-bottom: 14px !important;
}

@media (max-width: 640px) {
  body.calculadora-page .result-box {
    padding: 18px !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(4.1rem, 17vw, 5.35rem) !important;
  }

  .result-breakdown-list {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .result-row {
    padding: 11px 12px;
  }

  .result-row span {
    font-size: 1rem;
  }

  .result-row strong {
    font-size: 1.08rem;
  }
}

/* V18: resultado móvil estable y sin columnas conflictivas */
.result-box .result-breakdown-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 14px !important;
  width: 100% !important;
}
.result-box .result-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.result-box .result-row span,
.result-box .result-row strong {
  white-space: nowrap !important;
}
.result-box .result-row strong {
  text-align: right !important;
  min-width: 90px !important;
}
.result-box .total-price {
  font-size: clamp(3rem, 12vw, 4.8rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
}
#vanExtraField.is-hidden,
#vanExtraField[hidden],
#vanExtraField[data-allowed="false"] {
  display: none !important;
}
@media (max-width: 640px) {
  .result-box {
    padding: 18px !important;
  }
  .result-box .result-breakdown-list {
    gap: 7px !important;
  }
  .result-box .result-row {
    font-size: 0.98rem !important;
  }
  .result-box .result-row strong {
    min-width: 84px !important;
  }
  .result-box .total-price {
    font-size: 3.25rem !important;
  }
}


/* V19 - navegación estable, extras en una línea y resultado móvil compacto */
body:not(.auth-ready) [data-nav-guest],
body:not(.auth-ready) [data-nav-auth],
body:not(.auth-ready) [data-nav-active],
body:not(.auth-ready) [data-nav-admin] {
  display: none !important;
}

.social-stack,
.social-btn,
.social-btn-apple,
.social-btn-google {
  display: none !important;
}

body.calculadora-page .calculator-inline-field {
  align-items: center;
}

body.calculadora-page .calculator-checkboxes-inline {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}

body.calculadora-page .calculator-checkboxes-inline .checkbox-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  padding: 8px 8px !important;
}

body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
  white-space: nowrap !important;
  font-size: 0.95rem !important;
}

body.calculadora-page .result-box {
  padding: 18px !important;
  overflow: visible !important;
}

body.calculadora-page .result-box .total-price {
  font-size: clamp(2.6rem, 9vw, 4.2rem) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.045em !important;
}

body.calculadora-page .result-box .result-breakdown-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body.calculadora-page .result-box .result-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.15 !important;
}

body.calculadora-page .result-box .result-row span {
  font-size: 0.98rem !important;
  color: var(--muted) !important;
}

body.calculadora-page .result-box .result-row strong {
  font-size: 1.05rem !important;
  min-width: auto !important;
  color: var(--text) !important;
}

@media (max-width: 640px) {
  body.calculadora-page .calculator-card {
    padding: 24px 18px 20px !important;
  }

  body.calculadora-page .calculator-inline-field {
    grid-template-columns: 138px 1fr !important;
    gap: 8px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline {
    gap: 6px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item {
    padding: 8px 6px !important;
    gap: 5px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item input {
    width: 17px !important;
    height: 17px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
    font-size: 0.82rem !important;
  }

  body.calculadora-page .result-box {
    padding: 16px 18px !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: 3rem !important;
  }

  body.calculadora-page .result-box .result-row {
    padding: 4px 0 !important;
  }

  body.calculadora-page .result-box .result-row span {
    font-size: 0.94rem !important;
  }

  body.calculadora-page .result-box .result-row strong {
    font-size: 1rem !important;
  }
}

@media (max-width: 390px) {
  body.calculadora-page .calculator-inline-field {
    grid-template-columns: 118px 1fr !important;
  }
  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
    font-size: 0.76rem !important;
  }
}

/* V20 - carga de sesión estable y calculadora ajustada para iPhone más estrecho */
body:not(.auth-ready) .mobile-menu-toggle {
  opacity: 0.55 !important;
  pointer-events: none !important;
}

body:not(.auth-ready) .mobile-menu-panel,
.mobile-menu-panel.open:empty {
  display: none !important;
}

body.calculadora-page .field,
body.calculadora-page input,
body.calculadora-page select,
body.calculadora-page textarea,
body.calculadora-page .checkbox-item,
body.calculadora-page .result-box {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.calculadora-page .calculator-card {
  max-width: none !important;
}

body.calculadora-page .result-box .total-price {
  font-size: clamp(2.15rem, 7.4vw, 3.35rem) !important;
}

@media (max-width: 430px) {
  body.calculadora-page main.auth-main {
    padding: calc(env(safe-area-inset-top) + 50px) 6px 14px !important;
    min-height: auto !important;
    display: block !important;
  }

  body.calculadora-page .container,
  body.calculadora-page .auth-shell,
  body.calculadora-page .calculator-shell {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.calculadora-page .calculator-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px 16px !important;
    border-radius: 20px !important;
    gap: 10px !important;
  }

  body.calculadora-page .calculator-card .auth-form {
    gap: 7px !important;
  }

  body.calculadora-page .calc-split-row,
  body.calculadora-page .form-grid.two {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 8px !important;
  }

  body.calculadora-page label {
    font-size: 0.86rem !important;
  }

  body.calculadora-page input,
  body.calculadora-page select,
  body.calculadora-page textarea {
    min-height: 33px !important;
    font-size: 16px !important;
    padding: 0 8px !important;
  }

  body.calculadora-page #dateTime {
    font-size: 13px !important;
    padding: 0 6px !important;
  }

  body.calculadora-page .calculator-inline-field {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body.calculadora-page .calculator-checkboxes-inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    gap: 3px !important;
    justify-content: center !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item input {
    width: 14px !important;
    height: 14px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.calculadora-page #calculatorForm .btn {
    min-height: 41px !important;
    font-size: 1rem !important;
  }

  body.calculadora-page .result-box {
    padding: 12px 14px !important;
    margin-top: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body.calculadora-page .result-box .total-label {
    font-size: 0.78rem !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(2.05rem, 12vw, 2.65rem) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.04em !important;
  }

  body.calculadora-page .result-box .result-breakdown-list {
    gap: 4px !important;
  }

  body.calculadora-page .result-box .result-row {
    padding: 4px 0 !important;
  }

  body.calculadora-page .result-box .result-row span {
    font-size: 0.9rem !important;
  }

  body.calculadora-page .result-box .result-row strong {
    font-size: 0.94rem !important;
  }

  body.calculadora-page .result-save-status,
  body.calculadora-page .btn-copy-result,
  body.calculadora-page .calculator-email {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 370px) {
  body.calculadora-page main.auth-main {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.calculadora-page .calculator-card {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.calculadora-page .calculator-inline-field {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
    font-size: 0.66rem !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: 2rem !important;
  }
}


/* V21 - fix carga perfil/cache + layout iPhone estrecho */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body.calculadora-page .auth-main,
body.calculadora-page .auth-shell,
body.calculadora-page .calculator-shell,
body.calculadora-page .calculator-card,
body.calculadora-page #calculatorForm,
body.calculadora-page .calculator-side,
body.calculadora-page .result-box {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.calculadora-page .result-box .total-price {
  font-size: clamp(2.25rem, 8vw, 3.25rem) !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}

body.calculadora-page .result-box .result-breakdown-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  margin-top: 8px !important;
}

body.calculadora-page .result-box .result-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 3px 0 !important;
}

body.calculadora-page .result-box .result-row span,
body.calculadora-page .result-box .result-row strong {
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  body.calculadora-page {
    --menu-push: 0px !important;
  }

  body.calculadora-page .navbar {
    z-index: 50 !important;
  }

  body.calculadora-page .auth-main {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: calc(env(safe-area-inset-top) + 54px) 8px 14px !important;
    margin: 0 !important;
  }

  body.calculadora-page .container,
  body.calculadora-page .auth-shell,
  body.calculadora-page .calculator-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.calculadora-page .calculator-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 12px 16px !important;
    border-radius: 20px !important;
  }

  body.calculadora-page .calc-split-row,
  body.calculadora-page .form-grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.calculadora-page .calculator-inline-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.calculadora-page .calculator-inline-field > label {
    white-space: nowrap !important;
    font-size: 0.82rem !important;
  }

  body.calculadora-page .calculator-checkboxes-inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    gap: 3px !important;
    justify-content: center !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item input {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.calculadora-page .result-box {
    padding: 12px 14px !important;
    margin-top: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(2rem, 10vw, 2.55rem) !important;
    margin-bottom: 8px !important;
  }

  body.calculadora-page .result-box .result-row span {
    font-size: 0.88rem !important;
  }

  body.calculadora-page .result-box .result-row strong {
    font-size: 0.94rem !important;
  }
}

@media (max-width: 370px) {
  body.calculadora-page .auth-main {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.calculadora-page .calculator-card {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  body.calculadora-page .calculator-inline-field {
    gap: 5px !important;
  }

  body.calculadora-page .calculator-inline-field > label {
    font-size: 0.76rem !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span {
    font-size: 0.64rem !important;
  }
}


/* V24 - estados de carga más claros y sensación de app más estable */
.loading-pulse {
  position: relative;
  overflow: hidden;
}

.loading-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%);
  animation: eventosLoadingSweep 1.35s infinite;
}

@keyframes eventosLoadingSweep {
  100% { transform: translateX(100%); }
}

.loading-note {
  border-color: rgba(0, 191, 174, 0.24) !important;
}

body:not(.auth-ready) .mobile-menu-toggle {
  opacity: 0.42;
  pointer-events: none;
}

@media (max-width: 430px) {
  body.calculadora-page .calculator-checkboxes-inline {
    min-width: 0 !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(2.15rem, 13vw, 3.35rem) !important;
  }

  body.calculadora-page .result-breakdown-list {
    max-height: 180px;
    overflow: auto;
  }
}

/* V28 roles + admin vertical */
.admin-role-select {
  min-width: 160px;
  margin-bottom: 0;
  padding: 8px 10px;
  min-height: 34px;
  border-radius: 12px;
  font-size: 0.82rem;
}
@media (max-width: 720px) {
  .admin-role-select,
  .admin-user-actions .btn {
    width: 100%;
  }
}


/* V28: admin en vertical también en escritorio para evitar cortes laterales */
.admin-user-row {
  align-items: stretch !important;
  flex-direction: column !important;
}

.admin-user-actions {
  align-items: stretch !important;
  flex-direction: column !important;
  width: 100%;
}

.admin-user-actions .btn,
.admin-user-actions .admin-role-select {
  width: 100%;
}

.admin-user-row > div:first-child {
  min-width: 0;
}

.admin-user-row small,
.admin-user-row span {
  overflow-wrap: anywhere;
}

@media (min-width: 721px) {
  .admin-user-actions {
    max-width: none;
  }
}


/* V29 - recursos y admin principal */
.admin-root-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 201, 178, 0.35);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.admin-root-role {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 201, 178, 0.28);
  background: rgba(0, 201, 178, 0.08);
}

.admin-root-role strong { color: var(--text); }
.admin-root-role small { color: var(--muted); }

.resource-tools {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.resource-search {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(9, 19, 31, 0.72);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  outline: none;
}

.resource-search:focus { border-color: rgba(0, 201, 178, 0.55); }

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

.resource-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.resource-card {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  border-radius: 16px;
  padding: 14px;
}

.resource-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.resource-card p,
.resource-card li {
  color: var(--muted);
  line-height: 1.45;
}

.resource-card ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.resource-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.resource-tag {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  font-size: 0.78rem;
}

.resource-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  margin-top: 12px;
  font-size: 0.92rem;
}

.resource-table th,
.resource-table td {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.resource-table th { color: var(--text); background: rgba(255,255,255,0.055); }
.resource-table td { color: var(--muted); }

@media (max-width: 700px) {
  .resource-table, .resource-table thead, .resource-table tbody, .resource-table th, .resource-table td, .resource-table tr { display: block; }
  .resource-table thead { display: none; }
  .resource-table tr { border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 10px; margin-bottom: 10px; background: rgba(255,255,255,0.035); }
  .resource-table td { border-bottom: 0; padding: 5px 0; }
  .resource-table td::before { content: attr(data-label) ': '; color: var(--text); font-weight: 800; }
}


/* v34 Logos operativos */
.resource-main .resource-shell {
  width: min(1180px, 100%);
}
.resource-card {
  width: min(1120px, 100%);
}
.resource-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin: 18px 0;
}
.resource-search-field { margin: 0; }
.resource-counter {
  color: var(--muted, #9ca3af);
  font-weight: 800;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(15,23,42,.45);
  white-space: nowrap;
}
.compact-note { margin: 8px 0 18px; }
.empty-state {
  color: var(--muted, #9ca3af);
  text-align: center;
  padding: 28px 12px;
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.logo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(15,23,42,.55);
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
}
.logo-preview {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 18px;
  background: #fff;
}
.logo-preview img {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}
.logo-card-body { padding: 14px; }
.logo-card-body h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.2;
}
.logo-card-body p {
  margin: 0 0 12px;
  color: var(--muted, #9ca3af);
  font-size: .85rem;
}
.logo-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.logo-actions .btn {
  text-align: center;
  padding: 10px 12px;
  min-height: auto;
  border-radius: 13px;
  text-decoration: none;
}
.logo-view-main {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: 72px 16px 36px;
}
.logo-viewer {
  width: min(1100px, 100%);
}
.logo-display-card {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.75);
  box-shadow: 0 28px 80px rgba(0,0,0,.30);
}
.logo-display-image {
  min-height: min(62vh, 680px);
  display: grid;
  place-items: center;
  padding: clamp(22px, 5vw, 70px);
  background: #fff;
}
.logo-display-image img {
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
}
.logo-display-footer {
  padding: 18px;
  text-align: center;
}
.logo-display-footer h1 {
  margin: 0 0 4px;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
}
.logo-display-footer p {
  margin: 0 0 14px;
  color: var(--muted, #9ca3af);
}
.logo-actions-center {
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: center;
}
@media (max-width: 640px) {
  .resource-toolbar { grid-template-columns: 1fr; }
  .resource-counter { white-space: normal; text-align: center; }
  .logos-grid { grid-template-columns: 1fr; }
  .logo-card { border-radius: 18px; }
  .logo-preview { min-height: 112px; }
  .logo-actions { grid-template-columns: 1fr; }
  .logo-view-main { padding: 66px 10px 28px; }
  .logo-display-card { border-radius: 22px; }
  .logo-display-image { min-height: 58vh; padding: 22px; }
  .logo-actions-center { grid-template-columns: 1fr; }
}

/* v34: vista de cartel limpia para móvil/tablet.
   El navegador puede seguir mostrando sus barras si no se abre como app,
   pero la página deja todo el espacio posible al logo. */
.logo-view-main-clean {
  min-height: 100svh !important;
  min-height: 100dvh !important;
  width: 100vw !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  margin: 0 !important;
  display: block !important;
  background: #ffffff !important;
}
.logo-viewer-clean {
  width: 100vw !important;
  height: 100svh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
}
.logo-display-card-clean {
  width: 100vw !important;
  height: 100svh !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}
.logo-display-image-clean {
  width: 100vw !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: clamp(10px, 3vw, 28px) !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
}
.logo-display-image-clean img {
  max-width: 96vw !important;
  max-height: 90svh !important;
  max-height: 90dvh !important;
  object-fit: contain !important;
}
.logo-display-toolbar {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  z-index: 20 !important;
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .16) !important;
  color: #111827 !important;
  text-align: center !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.logo-display-toolbar.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(18px) !important;
}
.logo-display-toolbar-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.logo-display-toolbar .btn {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: .85rem !important;
  text-decoration: none !important;
}
@media (orientation: landscape) and (max-height: 520px) {
  .logo-display-image-clean { padding: 6px !important; }
  .logo-display-image-clean img {
    max-width: 98vw !important;
    max-height: 96svh !important;
    max-height: 96dvh !important;
  }
  .logo-display-toolbar {
    left: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(420px, 48vw) !important;
    padding: 8px !important;
  }
  .logo-display-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 430px) {
  .logo-display-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Calidad operativa v34 */
.wide-shell {
  max-width: 1160px;
}

.quality-card {
  width: min(100%, 1120px);
}

.quality-content {
  display: grid;
  gap: 18px;
}

.quality-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.quality-stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.quality-stat strong {
  display: block;
  font-size: 1.55rem;
  line-height: 1;
}

.quality-stat span {
  display: block;
  margin-top: 6px;
  color: var(--muted-text);
  font-size: 0.84rem;
}

.quality-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: end;
}

.quality-form-panel {
  border: 1px solid rgba(83, 189, 255, 0.35);
  border-radius: 20px;
  padding: 16px;
  background: rgba(83, 189, 255, 0.08);
}

.quality-form-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.quality-form-header strong,
.quality-form-header span {
  display: block;
}

.quality-form-header span {
  color: var(--muted-text);
  margin-top: 4px;
  font-size: 0.9rem;
}

.quality-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quality-comment-field {
  grid-column: 1 / -1;
}

.quality-form button[type="submit"] {
  grid-column: 1 / -1;
}

.quality-list-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--muted-text);
  font-size: 0.9rem;
}

.quality-list-header strong {
  color: var(--text-color);
}

.quality-drivers-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.quality-driver-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  gap: 12px;
}

.quality-driver-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.quality-driver-main strong,
.quality-driver-main span {
  display: block;
}

.quality-driver-main span,
.quality-driver-meta span,
.quality-last-note,
.quality-history-item span,
.quality-history-item small {
  color: var(--muted-text);
  font-size: 0.86rem;
}

.quality-driver-meta {
  display: grid;
  gap: 3px;
}

.quality-driver-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.quality-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  white-space: nowrap;
}

.quality-chip-events {
  background: rgba(38, 198, 127, 0.16);
  color: #9ff2cc;
}

.quality-chip-warning {
  background: rgba(255, 190, 92, 0.17);
  color: #ffd79a;
}

.quality-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quality-actions .btn {
  width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

.quality-history {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
  display: grid;
  gap: 10px;
}

.quality-history[hidden] {
  display: none;
}

.quality-history-item {
  border-radius: 14px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 4px;
}

.quality-history-item strong,
.quality-history-item span,
.quality-history-item p,
.quality-history-item small {
  display: block;
}

.quality-history-item p {
  margin: 2px 0 0;
  font-size: 0.9rem;
}

.quality-empty-history {
  color: var(--muted-text);
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 820px) {
  .quality-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-toolbar,
  .quality-form,
  .quality-drivers-list {
    grid-template-columns: 1fr;
  }

  .quality-list-header,
  .quality-driver-main,
  .quality-form-header {
    flex-direction: column;
    align-items: stretch;
  }

  .quality-driver-chips {
    justify-content: flex-start;
  }

  .quality-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .quality-actions .btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.78rem;
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .quality-stat {
    padding: 12px;
  }

  .quality-stat strong {
    font-size: 1.35rem;
  }
}

/* Calidad operativa v34 */
.quality-linked-user {
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: rgba(20, 184, 166, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(241, 245, 249, 0.88);
  font-size: 0.88rem;
  line-height: 1.45;
}

.quality-linked-user.muted {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.34);
  color: rgba(226, 232, 240, 0.62);
}

.quality-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 520px) {
  .quality-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* V35 - Calidad operativa: edición/borrado de observaciones */
.quality-history-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.quality-history-actions .btn {
  flex: 1 1 150px;
}

.btn-danger {
  border-color: rgba(255, 94, 94, 0.45);
  color: #ffd7d7;
  background: rgba(255, 94, 94, 0.08);
}

.btn-danger:hover {
  border-color: rgba(255, 94, 94, 0.8);
  background: rgba(255, 94, 94, 0.16);
}

.quality-edit-notes {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}

.quality-edit-notes small {
  display: block;
  color: var(--text-muted);
}

/* V37 - Calidad operativa: escritorio/tablet tipo móvil optimizado
   V3.76 - ancho ampliado a 100% (ver "Unificacion del panel principal") */
body.quality-page .auth-shell.wide-shell {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.quality-page .quality-card {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(22px, 3vw, 34px) !important;
}

body.quality-page .quality-content,
body.quality-page .quality-driver-card,
body.quality-page .quality-history-item,
body.quality-page .quality-form-panel {
  min-width: 0 !important;
}

body.quality-page .quality-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.quality-page .quality-stat,
body.quality-page .quality-stat span,
body.quality-page .quality-list-header,
body.quality-page .quality-driver-main,
body.quality-page .quality-driver-meta,
body.quality-page .quality-linked-user,
body.quality-page .quality-last-note,
body.quality-page .quality-history-item,
body.quality-page .quality-history-item p,
body.quality-page .quality-history-item span,
body.quality-page .quality-history-item small {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.quality-page .quality-toolbar {
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.75fr) !important;
}

body.quality-page .quality-list-header {
  display: grid !important;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) !important;
  align-items: start !important;
}

body.quality-page .quality-drivers-list {
  grid-template-columns: 1fr !important;
}

body.quality-page .quality-driver-card {
  padding: clamp(16px, 2.4vw, 22px) !important;
  gap: 14px !important;
}

body.quality-page .quality-driver-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

body.quality-page .quality-driver-main > div:first-child {
  min-width: 0 !important;
}

body.quality-page .quality-driver-chips {
  justify-content: flex-end !important;
  max-width: 260px !important;
}

body.quality-page .quality-driver-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 16px !important;
}

body.quality-page .quality-linked-user,
body.quality-page .quality-last-note {
  line-height: 1.5 !important;
}

body.quality-page .quality-actions,
body.quality-page .quality-history-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.quality-page .quality-actions .btn,
body.quality-page .quality-history-actions .btn {
  min-height: 46px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
  body.quality-page .auth-shell.wide-shell {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.quality-page .auth-shell.wide-shell {
    width: 100% !important;
  }

  body.quality-page .quality-card {
    padding: 22px !important;
  }

  body.quality-page .quality-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.quality-page .quality-toolbar,
  body.quality-page .quality-list-header,
  body.quality-page .quality-driver-main,
  body.quality-page .quality-driver-meta,
  body.quality-page .quality-form {
    grid-template-columns: 1fr !important;
  }

  body.quality-page .quality-driver-chips {
    justify-content: flex-start !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  body.quality-page .quality-card {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.quality-page .quality-actions,
  body.quality-page .quality-history-actions {
    grid-template-columns: 1fr !important;
  }
}

/* V37 - Ancho consistente tipo calidad para páginas internas
   V3.76 - ancho ampliado a 100% (ver "Unificacion del panel principal") */
body.resource-page .auth-shell,
body.logos-page .resource-shell,
body.history-page .auth-shell,
body.admin-page .auth-shell,
body.profile-page .auth-shell,
body.privacy-page .auth-shell {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.resource-page .auth-card,
body.logos-page .resource-card,
body.history-page .auth-card,
body.admin-page .auth-card,
body.profile-page .auth-card,
body.privacy-page .auth-card {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(22px, 3vw, 34px) !important;
}

body.resource-page .resource-card,
body.resource-page .resource-table,
body.resource-page .resource-tools,
body.resource-page .resource-toolbar,
body.logos-page .resource-card,
body.logos-page .logos-grid,
body.history-page .history-list,
body.history-page .history-card,
body.admin-page .admin-section,
body.admin-page .admin-user-card,
body.profile-page .profile-form,
body.profile-page .status-note {
  min-width: 0 !important;
}

body.resource-page .resource-toolbar,
body.logos-page .resource-toolbar,
body.history-page .history-toolbar,
body.admin-page .admin-toolbar {
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.75fr) !important;
}

body.resource-page .resource-grid,
body.logos-page .logos-grid {
  grid-template-columns: 1fr !important;
}

body.resource-page .resource-card,
body.logos-page .logo-card,
body.history-page .history-card,
body.admin-page .admin-user-card,
body.admin-page .admin-calc-card,
body.profile-page .auth-card {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.resource-page .resource-actions,
body.logos-page .logo-actions,
body.history-page .history-actions,
body.admin-page .admin-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.resource-page .resource-actions .btn,
body.logos-page .logo-actions .btn,
body.history-page .history-actions .btn,
body.admin-page .admin-actions .btn {
  min-height: 46px !important;
  white-space: normal !important;
}

@media (min-width: 1000px) {
  body.resource-page .resource-table {
    font-size: 0.96rem;
  }
  body.resource-page .resource-table th,
  body.resource-page .resource-table td {
    padding: 12px;
  }
}

@media (max-width: 900px) {
  body.resource-page .auth-shell,
  body.logos-page .resource-shell,
  body.history-page .auth-shell,
  body.admin-page .auth-shell,
  body.profile-page .auth-shell,
  body.privacy-page .auth-shell {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.resource-page .auth-shell,
  body.logos-page .resource-shell,
  body.history-page .auth-shell,
  body.admin-page .auth-shell,
  body.profile-page .auth-shell,
  body.privacy-page .auth-shell {
    width: 100% !important;
  }

  body.resource-page .auth-card,
  body.logos-page .resource-card,
  body.history-page .auth-card,
  body.admin-page .auth-card,
  body.profile-page .auth-card,
  body.privacy-page .auth-card {
    padding: 22px !important;
  }

  body.resource-page .resource-toolbar,
  body.logos-page .resource-toolbar,
  body.history-page .history-toolbar,
  body.admin-page .admin-toolbar,
  body.resource-page .resource-actions,
  body.logos-page .logo-actions,
  body.history-page .history-actions,
  body.admin-page .admin-actions {
    grid-template-columns: 1fr !important;
  }
}

/* V38 - Estadísticas de calidad operativa */
.quality-analytics-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.08), rgba(15, 23, 42, 0.26));
}

.quality-analytics-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 14px;
  align-items: end;
}

.quality-analytics-head h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.quality-analytics-head p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.quality-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quality-analytics-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.quality-analytics-card h4,
.quality-analytics-card strong,
.quality-analytics-card p,
.quality-analytics-card span,
.quality-analytics-card li {
  overflow-wrap: anywhere;
}

.quality-analytics-card h4 {
  margin: 0 0 10px;
  font-size: 0.98rem;
}

.quality-analytics-highlight {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.32);
}

.quality-analytics-highlight span {
  display: block;
  color: var(--muted-text);
  font-size: 0.85rem;
}

.quality-analytics-highlight strong {
  display: block;
  margin-top: 6px;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-color);
}

.quality-analytics-highlight p,
.quality-analytics-empty {
  margin: 8px 0 0;
  color: var(--muted-text);
  font-size: 0.88rem;
  line-height: 1.4;
}

.quality-analytics-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.quality-analytics-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 0.88rem;
  color: rgba(226, 232, 240, 0.78);
}

.quality-analytics-list li strong {
  color: var(--text-color);
  font-size: 0.95rem;
}

.quality-severity-bars {
  display: grid;
  gap: 10px;
}

.quality-severity-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
  font-size: 0.86rem;
  color: rgba(226, 232, 240, 0.78);
}

.quality-severity-row div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.quality-severity-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
}

.quality-latest-list {
  display: grid;
  gap: 10px;
}

.quality-latest-list div {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quality-latest-list div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.quality-latest-list strong {
  font-size: 0.92rem;
}

.quality-latest-list span {
  color: var(--muted-text);
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (min-width: 760px) {
  .quality-analytics-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .quality-analytics-head,
  .quality-analytics-grid {
    grid-template-columns: 1fr;
  }

  .quality-analytics-panel {
    padding: 14px;
  }
}

/* v39 - edición con trazabilidad y ranking mensual */
.quality-month-field {
  min-width: 180px;
}

.quality-edit-panel {
  border-color: rgba(20, 184, 166, 0.35);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}

.quality-edit-timeline {
  margin-bottom: 14px;
}

.quality-timeline {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.quality-timeline-entry {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(15, 23, 42, 0.42);
}

.quality-timeline-original {
  border-color: rgba(148, 163, 184, 0.22);
}

.quality-timeline-edit {
  border-color: rgba(20, 184, 166, 0.26);
  background: rgba(20, 184, 166, 0.08);
}

.quality-timeline-label {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(255, 255, 255, 0.08);
}

.quality-timeline-entry strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.quality-timeline-entry small {
  color: var(--muted-text);
  line-height: 1.35;
}

.quality-timeline-entry p {
  margin: 0;
  color: rgba(226, 232, 240, 0.86);
  line-height: 1.45;
  word-break: break-word;
}

.quality-history-item > span {
  display: block;
  color: var(--muted-text);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .quality-month-field {
    min-width: 0;
  }

  .quality-timeline-entry {
    padding: 10px;
  }
}

/* v44 - resumen compacto de observaciones en ficha */
.quality-compact-lines {
  display: grid;
  gap: 8px;
  margin: 10px 0 2px;
}
.quality-compact-line {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(15, 23, 42, .45);
  color: rgba(255,255,255,.82);
  min-width: 0;
}
.quality-compact-line span,
.quality-compact-line small,
.quality-compact-line em,
.quality-compact-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quality-compact-line strong {
  color: rgba(255,255,255,.94);
  font-weight: 800;
}
.quality-compact-line em {
  font-style: normal;
  font-weight: 800;
  color: rgba(255,255,255,.78);
}
.quality-compact-line small {
  color: rgba(255,255,255,.58);
  font-weight: 700;
  text-align: right;
}
.quality-compact-more {
  color: rgba(255,255,255,.55);
  font-size: .9rem;
  font-weight: 700;
  padding-left: 4px;
}
@media (max-width: 720px) {
  .quality-compact-line {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }
  .quality-compact-line strong {
    grid-column: 1 / -1;
  }
  .quality-compact-line small {
    text-align: left;
  }
}

/* Calidad operativa v44 - distintivo Eventos centrado */
.quality-driver-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  line-height: 1.12;
}
.quality-driver-title-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quality-event-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0 0 1px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #7ff8ea 0%, #18dac8 38%, #07a99a 100%);
  color: transparent;
  border: 1px solid rgba(255,255,255,.32);
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 0 4px 12px rgba(0, 194, 174, .26), 0 0 0 1px rgba(0,0,0,.2) inset;
  transform: translateY(0);
}
.quality-event-badge::before {
  content: "E";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #021815;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  transform: translateY(.15px);
}
@media (max-width: 720px) {
  .quality-driver-title-line {
    gap: 7px;
  }
  .quality-event-badge {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }
  .quality-event-badge::before {
    font-size: 10.5px;
  }
}
.quality-license-line {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
body.quality-page .quality-list-header {
  grid-template-columns: 1fr !important;
}
body.quality-page .quality-list-header span:empty {
  display: none !important;
}

/* V46 - compartir resultado calculadora */
.result-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.result-actions .btn {
  width: 100%;
  min-height: 42px;
}

.btn-share-result {
  background: linear-gradient(135deg, #10bfb2, #00a996);
  color: #031313;
  border: 0;
}

@media (max-width: 520px) {
  .result-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* v49 - Admin exports */
.admin-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.admin-export-grid .btn {
  width: 100%;
}


/* V3.28 - calculadora equilibrada: compacta moderada, estética profesional */
body.calculadora-page .calculator-email {
  display: none !important;
}

body.calculadora-page .calculator-card {
  gap: 14px !important;
}

body.calculadora-page .calculator-card .auth-form {
  gap: 10px !important;
}

body.calculadora-page .calculator-card .field {
  gap: 5px !important;
}

body.calculadora-page .calculator-inline-field {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body.calculadora-page .calculator-checkboxes-inline {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.calculadora-page .calculator-checkboxes-inline .calculator-single-check:not([hidden]) {
  grid-column: span 2 !important;
}

body.calculadora-page .calculator-checkboxes-inline .checkbox-item {
  justify-content: center !important;
  min-width: 0 !important;
}

@media (max-width: 520px) {
  body.calculadora-page main.auth-main,
  body.calculadora-page .auth-main {
    padding-top: calc(env(safe-area-inset-top) + 58px) !important;
    padding-bottom: 12px !important;
  }

  body.calculadora-page .calculator-card {
    padding: 17px 15px 18px !important;
    border-radius: 22px !important;
    gap: 12px !important;
  }

  body.calculadora-page #calculatorForm,
  body.calculadora-page .calculator-card .auth-form {
    gap: 9px !important;
  }

  body.calculadora-page .calc-split-row,
  body.calculadora-page .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.calculadora-page label,
  body.calculadora-page .calculator-card label {
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  body.calculadora-page input,
  body.calculadora-page select {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }

  /* El textarea de observaciones no lleva altura fija: crece con el
     texto (autoGrowServiceObservations en calculadora.js). */
  body.calculadora-page textarea {
    font-size: 16px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  body.calculadora-page #dateTime {
    font-size: 14px !important;
    padding: 0 7px !important;
  }

  body.calculadora-page .calculator-inline-field {
    gap: 7px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item,
  body.calculadora-page .checkbox-item {
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
    gap: 7px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item input,
  body.calculadora-page .checkbox-item input {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 auto !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span,
  body.calculadora-page .checkbox-item span {
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.calculadora-page #calculatorForm .btn,
  body.calculadora-page #calculatorForm .auth-submit {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
    border-radius: 13px !important;
    margin-top: 2px !important;
    padding: 0 14px !important;
  }

  body.calculadora-page .calculator-side {
    gap: 8px !important;
  }

  body.calculadora-page .result-box {
    padding: 13px 14px !important;
    margin-top: 2px !important;
    border-radius: 16px !important;
  }

  body.calculadora-page .result-box:empty {
    min-height: 48px !important;
    display: grid !important;
    place-items: center !important;
  }

  body.calculadora-page .result-box .total-label {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  body.calculadora-page .result-box .total-price {
    font-size: clamp(2.35rem, 10vw, 3.05rem) !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
  }

  body.calculadora-page .result-box .result-breakdown-list {
    gap: 4px !important;
    margin-top: 7px !important;
  }

  body.calculadora-page .result-box .result-row {
    padding: 4px 0 !important;
  }

  body.calculadora-page .result-box .result-row span,
  body.calculadora-page .result-box .result-row strong {
    font-size: 0.88rem !important;
  }

  body.calculadora-page .btn-copy-result,
  body.calculadora-page .btn-share-result {
    min-height: 36px !important;
    font-size: 0.82rem !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
  }

  body.calculadora-page .footer {
    font-size: 0.72rem !important;
    padding: 8px 0 !important;
  }
}

@media (max-width: 370px) {
  body.calculadora-page .calculator-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline .checkbox-item span,
  body.calculadora-page .checkbox-item span {
    font-size: 0.8rem !important;
  }
}


/* V3.28 - extras equilibrados cuando aparece VAN en iPhone 16 Pro */
body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .calculator-single-check:not([hidden]) {
  grid-column: auto !important;
}

body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item {
  padding-left: 8px !important;
  padding-right: 8px !important;
  gap: 6px !important;
}

@media (max-width: 430px) {
  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item {
    min-height: 42px !important;
    padding: 8px 6px !important;
    border-radius: 13px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item input {
    width: 16px !important;
    height: 16px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item span {
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
  }
}

@media (max-width: 370px) {
  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item span {
    font-size: 0.72rem !important;
  }
}


/* V3.28 - VAN en la misma línea, ocupando su columna completa hasta el margen derecho */
body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item,
body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) #vanExtraField {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-content: center !important;
}

body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .calculator-single-check:not([hidden]) {
  grid-column: auto !important;
  width: 100% !important;
}

@media (max-width: 430px) {
  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.calculadora-page .calculator-checkboxes-inline:has(#vanExtraField:not([hidden])) .checkbox-item {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* V52 - paradas manuales poco invasivas */
body.calculadora-page .calculator-stops[hidden],
body.calculadora-page .calculator-add-stop[hidden] {
  display: none !important;
}

body.calculadora-page .calculator-stops {
  display: grid;
  gap: 8px;
  margin: 0;
}

body.calculadora-page .calculator-stop-field {
  margin: 0 !important;
}

body.calculadora-page .calculator-stop-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.calculadora-page .calculator-remove-stop {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(207, 216, 220, 0.72);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}

body.calculadora-page .calculator-remove-stop:active {
  color: #10d6c4;
}

body.calculadora-page .calculator-add-stop {
  appearance: none;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  border: 1px dashed rgba(16, 214, 196, 0.38);
  border-radius: 999px;
  background: rgba(16, 214, 196, 0.06);
  color: #10d6c4;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  margin: -2px 0 0;
  cursor: pointer;
}

body.calculadora-page .calculator-add-stop:active {
  transform: translateY(1px);
}

@media (max-width: 520px) {
  body.calculadora-page .calculator-stops {
    gap: 7px !important;
  }

  body.calculadora-page .calculator-add-stop {
    min-height: 26px !important;
    font-size: 0.76rem !important;
    padding: 3px 9px !important;
  }

  body.calculadora-page .calculator-stop-label-row {
    margin-bottom: -1px;
  }

  body.calculadora-page .calculator-remove-stop {
    font-size: 0.7rem !important;
  }
}


/* V53 - Admin compacto y profesional */
body.admin-page .auth-card {
  padding: clamp(18px, 3vw, 34px) !important;
}

body.admin-page .auth-brand {
  margin-bottom: 20px !important;
}

body.admin-page .auth-card-header {
  margin-bottom: 16px !important;
}

body.admin-page .auth-card-header h2 {
  font-size: clamp(2rem, 8vw, 3.2rem) !important;
  line-height: 1.02 !important;
  margin-bottom: 10px !important;
}

body.admin-page .auth-card-header p {
  font-size: clamp(1rem, 4.2vw, 1.24rem) !important;
  line-height: 1.45 !important;
}

body.admin-page #adminContent > .status-note.auth-status-note {
  display: none !important;
}

body.admin-page .admin-grid,
body.admin-page .admin-insights-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

body.admin-page .admin-card-mini,
body.admin-page .admin-insight-card {
  min-height: 86px !important;
  padding: 12px 13px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

body.admin-page .admin-card-mini span,
body.admin-page .admin-insight-card span {
  font-size: 0.76rem !important;
  line-height: 1.22 !important;
  letter-spacing: 0.01em !important;
}

body.admin-page .admin-card-mini strong {
  margin-top: 6px !important;
  font-size: 2rem !important;
  line-height: 1 !important;
}

body.admin-page .admin-insight-card strong {
  margin-top: 6px !important;
  font-size: 0.96rem !important;
  line-height: 1.18 !important;
}

body.admin-page .admin-tabs {
  margin: 16px 0 12px !important;
  gap: 8px !important;
}

body.admin-page .admin-tab {
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  font-size: 0.86rem !important;
}

body.admin-page .admin-section {
  margin-top: 14px !important;
}

@media (max-width: 820px) {
  body.admin-page .admin-grid,
  body.admin-page .admin-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.admin-page .auth-card {
    padding: 20px !important;
  }

  body.admin-page .auth-brand {
    margin-bottom: 14px !important;
  }

  body.admin-page .auth-card-header h2 {
    font-size: clamp(1.9rem, 7vw, 2.45rem) !important;
  }

  body.admin-page .auth-card-header p {
    font-size: 1rem !important;
    line-height: 1.42 !important;
  }

  body.admin-page .admin-card-mini,
  body.admin-page .admin-insight-card {
    min-height: 74px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  body.admin-page .admin-card-mini strong {
    font-size: 1.72rem !important;
  }

  body.admin-page .admin-insight-card strong {
    font-size: 0.9rem !important;
  }

  body.admin-page .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  body.admin-page .admin-card-mini span,
  body.admin-page .admin-insight-card span {
    font-size: 0.7rem !important;
  }

  body.admin-page .admin-card-mini strong {
    font-size: 1.52rem !important;
  }
}

/* V54 - Calidad operativa: buscador primero y resumen compacto */
body.quality-page .auth-card-header {
  margin-bottom: 14px !important;
}

body.quality-page .auth-card-header h2 {
  font-size: clamp(2rem, 8vw, 3rem) !important;
  margin-bottom: 8px !important;
}

body.quality-page .auth-card-header p {
  max-width: 640px !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
}

body.quality-page .quality-primary-panel {
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(15, 23, 42, 0.28));
  border-radius: 20px;
  padding: 14px;
  display: grid;
  gap: 12px;
}

body.quality-page .quality-primary-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

body.quality-page .quality-primary-title strong {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

body.quality-page .quality-primary-title span {
  color: var(--muted-text);
  font-size: 0.82rem;
  text-align: right;
}

body.quality-page .quality-primary-panel .quality-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(118px, 150px) !important;
  gap: 10px !important;
  align-items: end !important;
}

body.quality-page .quality-primary-panel input,
body.quality-page .quality-primary-panel select {
  min-height: 46px !important;
}

body.quality-page .quality-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.quality-page .quality-stat {
  border-radius: 14px !important;
  padding: 9px 7px !important;
  text-align: center !important;
  min-width: 0 !important;
}

body.quality-page .quality-stat strong {
  font-size: 1.15rem !important;
  line-height: 1 !important;
}

body.quality-page .quality-stat span {
  margin-top: 4px !important;
  font-size: 0.64rem !important;
  line-height: 1.15 !important;
}

body.quality-page .quality-list-header {
  margin-top: -2px !important;
  padding: 0 2px !important;
}

body.quality-page .quality-analytics-panel {
  margin-top: 6px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  opacity: 0.94;
}

body.quality-page .quality-analytics-head {
  gap: 10px !important;
}

body.quality-page .quality-analytics-head h3 {
  font-size: 1rem !important;
}

body.quality-page .quality-analytics-head p {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

body.quality-page .quality-analytics-grid {
  gap: 8px !important;
}

body.quality-page .quality-analytics-card {
  padding: 11px !important;
  border-radius: 14px !important;
}

@media (max-width: 640px) {
  body.quality-page .quality-card {
    padding: 19px !important;
  }

  body.quality-page .auth-brand {
    margin-bottom: 16px !important;
  }

  body.quality-page .auth-card-header {
    margin-bottom: 12px !important;
  }

  body.quality-page .auth-card-header h2 {
    font-size: 2.1rem !important;
  }

  body.quality-page .auth-card-header p {
    font-size: 0.9rem !important;
  }

  body.quality-page .quality-primary-title {
    display: grid;
    gap: 3px;
  }

  body.quality-page .quality-primary-title span {
    text-align: left;
  }

  body.quality-page .quality-primary-panel .quality-toolbar {
    grid-template-columns: minmax(0, 1fr) 116px !important;
  }

  body.quality-page .quality-primary-panel .quality-search-field label,
  body.quality-page .quality-primary-panel .quality-filter-field label {
    font-size: 0.74rem !important;
  }

  body.quality-page .quality-primary-panel input,
  body.quality-page .quality-primary-panel select {
    min-height: 44px !important;
    font-size: 0.86rem !important;
  }

  body.quality-page .quality-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 370px) {
  body.quality-page .quality-primary-panel .quality-toolbar {
    grid-template-columns: 1fr !important;
  }

  body.quality-page .quality-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* V3.28 - Calidad operativa móvil: resumen arriba, buscador práctico y analítica desplegable */
body.quality-page #qualityAccessStatus[hidden] {
  display: none !important;
}

body.quality-page .auth-card-header {
  margin-bottom: 12px !important;
}

body.quality-page .auth-card-header h2 {
  font-size: clamp(1.9rem, 7.3vw, 2.65rem) !important;
  line-height: 0.98 !important;
}

body.quality-page .auth-card-header p {
  font-size: 0.92rem !important;
  line-height: 1.42 !important;
}

body.quality-page .quality-content {
  gap: 12px !important;
}

body.quality-page .quality-stats {
  order: -2;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 2px !important;
}

body.quality-page .quality-stat {
  min-width: 0 !important;
  border-radius: 16px !important;
  padding: 10px 5px 9px !important;
  min-height: 68px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

body.quality-page button.quality-stat {
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

body.quality-page button.quality-stat:active {
  transform: translateY(1px);
}

body.quality-page .quality-stat strong {
  font-size: clamp(1.08rem, 4.6vw, 1.45rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

body.quality-page .quality-stat span {
  margin-top: 6px !important;
  font-size: clamp(0.58rem, 2.25vw, 0.72rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

body.quality-page .quality-primary-panel {
  order: -1;
  padding: 13px !important;
  border-radius: 18px !important;
  gap: 10px !important;
}

body.quality-page .quality-primary-title {
  align-items: flex-start !important;
}

body.quality-page .quality-primary-title strong {
  font-size: 1.02rem !important;
}

body.quality-page .quality-primary-title span {
  max-width: 250px;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
}

body.quality-page .quality-primary-panel .quality-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(104px, 128px) !important;
  gap: 9px !important;
}

body.quality-page .quality-primary-panel .field label {
  font-size: 0.78rem !important;
  margin-bottom: 5px !important;
}

body.quality-page .quality-primary-panel input,
body.quality-page .quality-primary-panel select {
  min-height: 44px !important;
  font-size: 0.92rem !important;
}

body.quality-page .quality-list-header {
  margin-top: 4px !important;
  padding: 0 2px !important;
}

body.quality-page .quality-list-header strong {
  font-size: 1.02rem !important;
}

body.quality-page .quality-details-panel {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
  border-radius: 18px;
  overflow: hidden;
}

body.quality-page .quality-details-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.quality-page .quality-details-panel summary::-webkit-details-marker {
  display: none;
}

body.quality-page .quality-details-panel summary::after {
  content: '+';
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(20,184,166,0.14);
  color: var(--accent);
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
}

body.quality-page .quality-details-panel[open] summary::after {
  content: '−';
}

body.quality-page .quality-details-panel[open] summary {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

body.quality-page .quality-analytics-panel {
  margin: 0 !important;
  padding: 13px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.quality-page .quality-analytics-head {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}

body.quality-page .quality-analytics-head > div:first-child {
  grid-column: 1 / -1;
}

body.quality-page .quality-analytics-head h3 {
  font-size: 1rem !important;
  margin-bottom: 3px !important;
}

body.quality-page .quality-analytics-head p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

body.quality-page .quality-analytics-grid {
  gap: 9px !important;
  margin-top: 10px !important;
}

body.quality-page .quality-analytics-card {
  padding: 12px !important;
  border-radius: 15px !important;
}

@media (max-width: 430px) {
  body.quality-page .quality-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.quality-page .quality-stats {
    gap: 6px !important;
  }

  body.quality-page .quality-stat {
    border-radius: 14px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    min-height: 62px !important;
  }

  body.quality-page .quality-primary-panel .quality-toolbar {
    grid-template-columns: 1fr 104px !important;
  }

  body.quality-page .quality-primary-title {
    display: block !important;
  }

  body.quality-page .quality-primary-title span {
    display: block !important;
    margin-top: 3px !important;
    text-align: left !important;
    max-width: none !important;
  }
}

/* V55 - Calidad operativa por pestañas, móvil primero */
body.quality-page .quality-tabs-content {
  gap: 12px !important;
}

body.quality-page .quality-tab-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body.quality-page .quality-tab-btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(226, 232, 240, 0.72);
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}

body.quality-page .quality-tab-btn.active {
  color: #061217;
  background: linear-gradient(135deg, #36f3d1, #14b8a6);
  box-shadow: 0 10px 24px rgba(20, 184, 166, 0.22);
}

body.quality-page .quality-tab-btn:active {
  transform: translateY(1px);
}

body.quality-page .quality-tab-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.quality-page .quality-tab-panel[hidden] {
  display: none !important;
}

body.quality-page .quality-severity-field,
body.quality-page .quality-severity-bars,
body.quality-page [class*="severity"] {
  display: none !important;
}

body.quality-page .quality-analytics-panel {
  margin-top: 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
}

body.quality-page .quality-analytics-head {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: end !important;
}

body.quality-page .quality-analytics-head > div:first-child {
  grid-column: 1 / -1;
}

body.quality-page .quality-analytics-head h3 {
  font-size: 1.08rem !important;
  margin-bottom: 4px !important;
}

body.quality-page .quality-analytics-head p {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  max-width: 560px;
}

body.quality-page .quality-analytics-grid {
  margin-top: 12px !important;
  gap: 10px !important;
}

body.quality-page .quality-analytics-card {
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, 0.38) !important;
}

body.quality-page .quality-latest-list li:nth-child(n+6) {
  display: none;
}

body.quality-page .quality-latest-list.show-all li:nth-child(n+6) {
  display: grid;
}

body.quality-page .quality-latest-more-btn {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.86);
  font-weight: 900;
}

@media (max-width: 430px) {
  body.quality-page .quality-tab-btn {
    min-height: 42px;
    font-size: 0.9rem;
    padding-left: 8px;
    padding-right: 8px;
  }

  body.quality-page .quality-analytics-head {
    grid-template-columns: 1fr !important;
  }

  body.quality-page .quality-analytics-head > div:first-child {
    grid-column: auto;
  }
}


body.quality-page .quality-severity-field,
body.quality-page .quality-severity-bars,
body.quality-page [class*="severity"] {
  display: none !important;
}


/* V57 - calidad limpia y match E por teléfono/correo */
body.quality-page .quality-severity-field,
body.quality-page .quality-severity-bars,
body.quality-page [class*="severity"] {
  display: none !important;
}
body.quality-page .quality-compact-line {
  grid-template-columns: auto 1fr auto;
}

/* V58 - eliminar restos visuales de gravedad en calidad */
body.quality-page .quality-severity-field,
body.quality-page .quality-severity-bars,
body.quality-page [class*="severity"] { display: none !important; }

/* V63 - Logos: Ver cartel = pantalla limpia; Descargar queda en listado */
/* V375 - 3 acciones: Abrir logo (pantalla completa) / Guardar (galeria) / QR tablet */
.logos-page .logo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.logos-page .logo-actions .qr-tablet-btn {
  grid-column: 1 / -1;
}

@media (min-width: 480px) {
  .logos-page .logo-actions {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .logos-page .logo-actions .qr-tablet-btn {
    grid-column: auto;
  }
}

.logos-page .logo-actions .btn {
  min-height: 42px;
  justify-content: center;
}

/* V3.28 - stubs Storage/importación y contacto rápido */
.quality-contact-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quality-photo-field input[disabled],
.storage-upload-panel input[disabled],
.storage-upload-panel select[disabled] {
  opacity: .72;
  cursor: not-allowed;
}
.quality-storage-preview,
.storage-upload-panel {
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.045);
  border-radius: 18px;
  padding: 12px;
}
.quality-storage-preview small,
.storage-upload-panel small {
  display: block;
  margin-top: 6px;
  color: var(--muted, #9fb0b7);
  font-size: .82rem;
  line-height: 1.35;
}
.storage-upload-panel {
  margin: 12px 0 16px;
}
.storage-upload-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.storage-upload-head strong {
  display: block;
  font-size: 1rem;
}
.storage-upload-head p {
  margin: 4px 0 0;
  color: var(--muted, #9fb0b7);
  font-size: .88rem;
  line-height: 1.35;
}
.storage-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.1);
  color: var(--muted, #9fb0b7);
  font-size: .76rem;
  font-weight: 700;
}
.storage-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.storage-upload-file {
  grid-column: 1 / -1;
}
.admin-import-panel .status-note {
  margin: 10px 0;
}
@media (max-width: 720px) {
  .storage-upload-grid {
    grid-template-columns: 1fr;
  }
  .storage-upload-head {
    flex-direction: column;
  }
  .quality-actions .quality-contact-btn {
    flex: 1 1 42%;
  }
}

/* V3.28 - Previsualización completa importación conductores */
.driver-import-table-wrap {
  margin-top: 14px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.35);
}

.driver-import-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 0.86rem;
}

.driver-import-table th,
.driver-import-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  text-align: left;
  vertical-align: top;
}

.driver-import-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
}

.driver-import-row-ok {
  color: #d1fae5;
}

.driver-import-row-duplicate,
.driver-import-row-error {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
}

.driver-import-row-duplicate td,
.driver-import-row-error td {
  border-bottom-color: rgba(248, 113, 113, 0.25);
}

.driver-import-warning {
  color: #fecaca;
  font-weight: 700;
}

/* V3.28 - Cabeceras ordenables importación conductores */
.driver-import-sort {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  text-align: left;
  width: 100%;
}

.driver-import-sort:hover {
  color: #5eead4;
  text-decoration: underline;
}

.driver-import-table th {
  user-select: none;
}

/* V3.28 - Miniaturas en historial de Calidad */
.quality-observation-photo {
  margin: 12px 0 4px;
}

.quality-photo-thumb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
  color: #e5e7eb;
  cursor: pointer;
  text-align: left;
}

.quality-photo-thumb-btn:hover {
  border-color: rgba(94, 234, 212, 0.65);
  color: #5eead4;
}

.quality-photo-thumb {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.8);
}

.quality-photo-thumb-btn span {
  font-weight: 800;
}


/* V3.28 - Logos de última hora */
.extra-logos-panel {
  margin-top: 18px;
}

.extra-logos-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.extra-logos-panel > summary::-webkit-details-marker {
  display: none;
}

.extra-logos-panel > summary strong {
  color: #5eead4;
  font-size: 0.92rem;
  font-weight: 800;
}

.extra-logos-panel[open] > summary {
  margin-bottom: 12px;
}

.extra-logo-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.extra-logos-section {
  margin: 22px 0;
}

.extra-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.extra-logo-card {
  padding: 14px;
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.68);
}

.extra-logo-thumb-wrap {
  height: 130px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  padding: 12px;
}

.extra-logo-thumb-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.extra-logo-body h3 {
  margin: 12px 0 4px;
}

.extra-logo-body p {
  margin: 0 0 12px;
  color: #94a3b8;
}

.extra-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extra-logos-readonly {
  opacity: 0.86;
}

@media (max-width: 720px) {
  .extra-logo-upload-grid {
    grid-template-columns: 1fr;
  }

  .extra-logos-grid {
    grid-template-columns: 1fr;
  }
}

/* V3.28 - Logos extra integrados en lista principal */
.extra-logo-card-integrated {
  border-color: rgba(94, 234, 212, 0.38);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12);
}

.btn-danger {
  background: rgba(127, 29, 29, 0.82);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.btn-danger:hover {
  background: rgba(153, 27, 27, 0.95);
  color: #ffffff;
}

/* V3.28 QR visible logos */
.qr-tablet-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #2563eb !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.logo-actions .qr-tablet-btn {
  flex: 0 0 auto !important;
}

/* V3.28 FIX definitivo: texto visible QR logos */
.logo-actions [data-logo-qr],
.logo-actions .qr-tablet-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.logo-actions [data-logo-qr]::before,
.logo-actions .qr-tablet-btn::before {
  content: "QR tablet" !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Botón vacío en visor del cartel */
.logo-viewer-actions a.btn-primary:empty::before,
.logo-viewer-actions .btn-primary:empty::before,
.logo-detail-actions a.btn-primary:empty::before,
.logo-detail-actions .btn-primary:empty::before {
  content: "Abrir imagen" !important;
  font-size: 16px !important;
  color: #111827 !important;
  font-weight: 900 !important;
}

/* V3.28 QR logos definitivo */
.qr-tablet-btn,
.logo-actions .qr-tablet-btn,
.extra-logo-actions .qr-tablet-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  white-space: nowrap !important;
}

.qr-tablet-btn span {
  display: inline !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* Iguala el tamaño de letra de "Guardar" con "Abrir logo" y "QR tablet" */
.logo-actions [data-logo-save] {
  font-size: 15px !important;
  font-weight: 800 !important;
}

.logo-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
}

.logo-qr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(5px);
}

.logo-qr-card {
  position: relative;
  width: min(420px, 100%);
  background: #ffffff;
  color: #111827;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
  text-align: center;
}

.logo-qr-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #334155;
}

.logo-qr-name {
  margin: 0 0 14px;
  font-weight: 800;
  color: #334155;
}

.logo-qr-image {
  width: min(320px, 86vw);
  height: auto;
  display: block;
  margin: 0 auto 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}

.logo-qr-help {
  margin: 0 0 16px;
  color: #475569;
  font-size: 0.95rem;
}

.logo-qr-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}


/* V3.28 - evitar QR duplicado */
.logo-actions [data-logo-qr]::before,
.logo-actions .qr-tablet-btn::before {
  content: none !important;
  display: none !important;
}

.qr-tablet-btn span {
  display: inline !important;
}


/* V3.28 - botones logos extra más proporcionados */
.extra-logo-actions,
.logo-extra-actions,
.extra-logo-card .logo-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.extra-logo-actions .btn,
.logo-extra-actions .btn,
.extra-logo-card .btn,
[data-extra-logo-qr-url] {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

[data-extra-logo-qr-url] span {
  font-size: 14px !important;
  font-weight: 900 !important;
}


/* V3.28 - fila botones logo extra más fina */
.extra-logo-actions {
  display: grid !important;
  grid-template-columns: repeat(4, auto) !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: start !important;
}

.extra-logo-actions .btn {
  min-width: 96px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.extra-logo-actions .btn-small {
  width: auto !important;
}

.extra-logo-actions [data-extra-logo-qr-url] {
  background: #2563eb !important;
  color: #ffffff !important;
}

@media (max-width: 560px) {
  .extra-logo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .extra-logo-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* V3.28 - botones logos extra compactos */
.extra-logo-card-integrated .logo-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.extra-logo-card-integrated .logo-actions .btn,
.extra-logo-card-integrated .logo-actions button {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.extra-logo-card-integrated .qr-tablet-btn span {
  font-size: 14px !important;
}

/* V3.28 - botones logos extra proporcionados en escritorio */
.extra-logo-card-integrated .extra-logo-actions {
  display: grid !important;
  grid-template-columns: 1.15fr 1.15fr 1fr 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.extra-logo-card-integrated .extra-logo-actions .btn,
.extra-logo-card-integrated .extra-logo-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.extra-logo-card-integrated .extra-logo-actions .qr-tablet-btn span {
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* En pantallas estrechas mantenemos formato cómodo */
@media (max-width: 700px) {
  .extra-logo-card-integrated .extra-logo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .extra-logo-card-integrated .extra-logo-actions .btn,
  .extra-logo-card-integrated .extra-logo-actions button {
    min-height: 42px !important;
    font-size: 14px !important;
    border-radius: 13px !important;
  }

  .extra-logo-card-integrated .extra-logo-actions .qr-tablet-btn span {
    font-size: 14px !important;
  }
}

/* En móviles muy estrechos, si hace falta, una columna limpia */
@media (max-width: 390px) {
  .extra-logo-card-integrated .extra-logo-actions {
    grid-template-columns: 1fr !important;
  }
}


/* V3.28 - preview visible logos extra */
.extra-logo-card-integrated .extra-logo-thumb-wrap,
.extra-logo-card-integrated .logo-preview {
  min-height: 150px !important;
  height: 150px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

.extra-logo-card-integrated .extra-logo-thumb-wrap img,
.extra-logo-card-integrated .logo-preview img {
  display: block !important;
  max-width: 100% !important;
  max-height: 130px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* V3.28 - logos extra visualmente iguales a logos fijos */
.extra-logo-card-integrated .extra-logo-thumb-wrap,
.extra-logo-card-integrated .logo-preview {
  background: #ffffff !important;
  border-radius: 18px 18px 0 0 !important;
}

.extra-logo-card-integrated .extra-logo-thumb-wrap img,
.extra-logo-card-integrated .logo-preview img {
  object-fit: contain !important;
}


/* V3.28 - Formación eventos */
.training-hero {
  margin-bottom: 18px;
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.training-block ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.training-block li {
  margin-bottom: 8px;
}

.training-test-card {
  margin-top: 18px;
}

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

.training-question {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.38);
}

.training-question legend {
  font-weight: 900;
  color: #e5e7eb;
  padding: 0 6px;
}

.training-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.32);
  cursor: pointer;
}

.training-option:hover {
  background: rgba(20, 184, 166, 0.08);
}

.training-option input {
  margin-top: 3px;
}

.training-locked-card {
  max-width: 760px;
  margin: 32px auto;
}


/* V3.28 - Menú global unificado EventosTaxiBCN */

/* Respeta SIEMPRE elementos ocultos */
.app-nav [hidden],
.app-nav a[hidden],
.app-nav button[hidden] {
  display: none !important;
}

/* Botón hamburguesa global */
.nav-toggle,
.hamburger,
.hamburger-button,
.unified-menu-toggle,
#trainingMenuToggle,
button[aria-label="Abrir menú"],
button[aria-label="Abrir menu"] {
  position: fixed !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 1400 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(15, 23, 42, 0.86) !important;
  color: #e5e7eb !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}


/* Test: compacto y limpio */
.training-test-card {
  padding: 20px !important;
}

.training-question {
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 15px !important;
}

.training-question legend {
  font-size: 0.98rem !important;
  line-height: 1.28 !important;
  margin-bottom: 8px !important;
}

.training-form .training-option {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.34) !important;
}

.training-form .training-option input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  justify-self: center !important;
}

.training-form .training-option span {
  font-size: 0.94rem !important;
  line-height: 1.28 !important;
  font-weight: 650 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* V3.28 - Menú único global por rol */

/* Ocultar cualquier nav hasta que menu-roles lo reconstruya */
.app-nav:not([data-role-menu="true"]) {
  display: none !important;
}

/* Botón hamburguesa único */
.nav-toggle,
.hamburger,
.hamburger-button,
button[aria-label="Abrir menú"],
button[aria-label="Abrir menu"] {
  position: fixed !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 5000 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(15, 23, 42, 0.86) !important;
  color: #e5e7eb !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}

/* Menú único lateral */
.app-nav[data-role-menu="true"] {
  position: fixed !important;
  top: 72px !important;
  left: 12px !important;
  z-index: 4990 !important;
  width: 194px !important;
  max-width: calc(100vw - 24px) !important;
  display: none !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(8, 13, 20, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.38) !important;
}

body.menu-open .app-nav[data-role-menu="true"] {
  display: flex !important;
}

.app-nav[data-role-menu="true"] a,
.app-nav[data-role-menu="true"] button {
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(17, 24, 39, 0.72) !important;
  color: #e5e7eb !important;
  font-size: 0.92rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
}

.app-nav[data-role-menu="true"] a:hover,
.app-nav[data-role-menu="true"] button:hover,
.app-nav[data-role-menu="true"] a[aria-current="page"] {
  color: #5eead4 !important;
  border-color: rgba(45, 212, 191, 0.55) !important;
  background: rgba(20, 184, 166, 0.08) !important;
}


/* Test Formación: compacto y alineado */
.training-test-card {
  padding: 20px !important;
}

.training-question {
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border-radius: 15px !important;
}

.training-question legend {
  font-size: 0.98rem !important;
  line-height: 1.28 !important;
  margin-bottom: 8px !important;
}

.training-form .training-option {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.34) !important;
}

.training-form .training-option input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  justify-self: center !important;
}

.training-form .training-option span {
  font-size: 0.94rem !important;
  line-height: 1.28 !important;
  font-weight: 650 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* V3.28 - Ajustes finales menú por rol */


/* V3.28 - Recupera estilo visual original del menú */

/* Botón hamburguesa estilo original */


/* Caja del menú */
.app-nav[data-role-menu="true"] {
  background: rgba(10, 15, 22, 0.86) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px) !important;
}

/* Botones normales del menú */
.app-nav[data-role-menu="true"] a,
.app-nav[data-role-menu="true"] button {
  background: rgba(24, 31, 39, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* Hover original más discreto */
.app-nav[data-role-menu="true"] a:hover,
.app-nav[data-role-menu="true"] button:hover {
  background: rgba(31, 41, 55, 0.86) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #e5e7eb !important;
}

/* Página actual marcada en verde/turquesa como antes */
.app-nav[data-role-menu="true"] a[aria-current="page"] {
  background: rgba(13, 54, 49, 0.72) !important;
  border-color: rgba(20, 184, 166, 0.62) !important;
  color: #5eead4 !important;
}

/* Cerrar sesión sin estilo raro */
.app-nav[data-role-menu="true"] button.link-button {
  background: rgba(24, 31, 39, 0.78) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #e5e7eb !important;
}

.app-nav[data-role-menu="true"] button.link-button:hover {
  background: rgba(31, 41, 55, 0.86) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #e5e7eb !important;
}

/* V3.28 - Admin formación eventos */
.admin-training-panel {
  margin-top: 18px;
}

.admin-training-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  margin: 14px 0;
}

.admin-training-list {
  display: grid;
  gap: 12px;
}

.admin-training-user {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.40);
}

.admin-training-user-main {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-training-user h3 {
  margin: 0 0 4px;
}

.admin-training-user p {
  margin: 3px 0;
  color: #cbd5e1;
}

.training-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 0.82rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

.training-badge.ok {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(13, 54, 49, 0.52);
}

.training-badge.warn {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(69, 46, 5, 0.42);
}

.training-badge.danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.34);
}

.training-badge.muted {
  color: #cbd5e1;
}

.admin-training-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0;
  color: #94a3b8;
  font-size: 0.88rem;
}

.admin-training-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-small {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 0.86rem;
}

@media (max-width: 720px) {
  .admin-training-filters {
    grid-template-columns: 1fr;
  }

  .admin-training-user-main {
    flex-direction: column;
  }

  .training-badge {
    align-self: flex-start;
  }

  .admin-training-actions {
    flex-direction: column;
  }

  .admin-training-actions .btn {
    width: 100%;
  }
}

/* V3.28 - Formación Admin como pestaña independiente */
#adminTrainingTabBtn.active,
#adminTrainingTabBtn[aria-current="page"] {
  background: rgba(13, 54, 49, 0.72) !important;
  border-color: rgba(20, 184, 166, 0.62) !important;
  color: #5eead4 !important;
}

#adminTrainingPanel[hidden] {
  display: none !important;
}

/* V3.28 - Admin Pendientes unificados */
#adminTrainingTabBtn,
#adminTrainingPanel {
  display: none !important;
}

.admin-unified-pending-panel {
  margin-top: 18px;
}

.admin-unified-pending-list {
  display: grid;
  gap: 12px;
}

.admin-unified-pending-user {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.40);
}

.pending-user-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.pending-user-head h3 {
  margin: 0 0 4px;
}

.pending-user-head p {
  margin: 0;
  color: #cbd5e1;
}

.pending-badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.pending-badge {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.78rem;
  font-weight: 900;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
}

.pending-badge.ok {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(13, 54, 49, 0.52);
}

.pending-badge.warn {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(69, 46, 5, 0.42);
}

.pending-badge.danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.34);
}

.pending-badge.muted {
  color: #cbd5e1;
}

.pending-user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 12px 0;
  color: #94a3b8;
  font-size: 0.88rem;
}

.pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  .pending-user-head {
    flex-direction: column;
  }

  .pending-badge-stack {
    justify-content: flex-start;
  }

  .pending-actions {
    flex-direction: column;
  }

  .pending-actions .btn {
    width: 100%;
  }
}


/* V3.28 - Homogeneización visual real global
   Motivo: el cambio de tono venía de .auth-card y .auth-card::before,
   no del body ni de las cards internas. */

/* Fondo global único y fijo */
html,
body {
  background: #071119 !important;
  background-image: none !important;
  min-height: 100%;
}

body.app-page {
  /* V3.77 - El centro de estos dos brillos caia justo en la franja visible
     entre la barra de estado y la tarjeta (con background-attachment:fixed
     el % se calcula sobre el viewport, no sobre toda la pagina), por lo que
     en movil se veian como 2-3 anillos de color distintos justo ahi. Se baja
     la intensidad y se sube el centro fuera de pantalla para que solo quede
     la cola, casi imperceptible, sin anillos visibles. */
  background:
    radial-gradient(circle at 18% -10%, rgba(20, 184, 166, 0.032), transparent 34rem),
    radial-gradient(circle at 82% -10%, rgba(148, 163, 184, 0.018), transparent 32rem),
    #071119 !important;
  background-attachment: fixed !important;
}

/* El main y los contenedores exteriores no deben añadir color propio */
.auth-main,
.app-main,
.page-shell,
.auth-shell,
.resource-shell,
.container.auth-shell,
.container.resource-shell {
  background: transparent !important;
  background-image: none !important;
}

/* Panel principal real de Admin, Calidad, Calculadora, Tarifas, Logos, etc. */
.auth-card,
.resource-card,
.calculator-card,
.quality-card,
.protocol-shell-card,
body.admin-page .auth-card,
body.quality-page .auth-card,
body.calculadora-page .auth-card,
body.resource-page .auth-card,
body.history-page .auth-card,
body.profile-page .auth-card,
body.privacy-page .auth-card,
body.pending-page .auth-card,
body.login-page .auth-card,
body.formacion-page .page-shell-card,
body.protocol-page .protocol-shell-card {
  background: #182126 !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Clave del problema: anulamos la capa variable que cambiaba de tono */
.auth-card::before,
.resource-card::before,
.calculator-card::before,
.quality-card::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Las secciones interiores no deben cambiar el tono global del panel */
.admin-section,
.quality-tab-panel,
.quality-content,
.resource-content,
.history-list,
.profile-form,
.training-grid,
.training-form {
  background: transparent !important;
  background-image: none !important;
}

/* Tarjetas resumen / métricas */
.admin-card-mini,
.admin-insight-card,
.quality-stat,
.metric-card,
.stat-card {
  background: #232b31 !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

/* Bloques funcionales */
.status-note,
.auth-status-note,
.storage-upload-panel,
.admin-import-panel,
.quality-primary-panel,
.quality-analytics-panel,
.quality-details-panel,
.training-block.card,
.training-test-card.card,
.training-hero.card,
.card {
  background: #20282e !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Listados y fichas */
.admin-user-card,
.admin-calc-card,
.quality-driver-card,
.quality-history-item,
.quality-analytics-card,
.history-card,
.logo-card,
.resource-card-item,
.tariff-card,
.protocol-card,
.user-card,
.item-card,
.list-card {
  background: #2a3137 !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}

/* Tabs internas con tono estable */
.admin-tabs,
.quality-tab-switch {
  background: #151d27 !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

/* Botones/tabs activos mantienen el turquesa */
.admin-tab.active,
.quality-tab-btn.active,
.btn-primary,
.auth-submit {
  background: linear-gradient(135deg, #36f3d1, #14b8a6) !important;
  color: #041513 !important;
}

/* Inputs y selects sólidos */
input,
select,
textarea,
.admin-search,
.admin-select {
  background: #222a35 !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* Footer estable */
.footer,
.app-footer {
  background: transparent !important;
}

/* Mantener el menú con el estilo oscuro anterior */
.app-nav[data-role-menu="true"] {
  background: rgba(10, 15, 22, 0.94) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

/* V3.28 - Menú hamburguesa global homogéneo en todas las páginas */

/* El menú real de roles siempre manda, también en Formación */
body .app-nav[data-role-menu="true"] {
  position: fixed !important;
  top: 74px !important;
  left: 18px !important;
  right: auto !important;
  z-index: 9998 !important;

  display: none !important;
  width: min(280px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 96px) !important;
  overflow-y: auto !important;

  padding: 12px !important;
  border-radius: 18px !important;
  background: #0c121a !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.46) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  flex-direction: column !important;
  gap: 8px !important;
}

body.menu-open .app-nav[data-role-menu="true"] {
  display: flex !important;
}

body .app-nav[data-role-menu="true"] a,
body .app-nav[data-role-menu="true"] button {
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 11px 13px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;

  background: #171f28 !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: #e5e7eb !important;

  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
}

body .app-nav[data-role-menu="true"] a:hover,
body .app-nav[data-role-menu="true"] button:hover {
  background: #1f2933 !important;
  border-color: rgba(45, 212, 191, 0.36) !important;
  color: #ffffff !important;
}

body .app-nav[data-role-menu="true"] a[aria-current="page"] {
  background: #123b38 !important;
  border-color: rgba(45, 212, 191, 0.64) !important;
  color: #5eead4 !important;
}

body .app-nav[data-role-menu="true"] button.link-button {
  background: #171f28 !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  color: #e5e7eb !important;
}

/* Botón hamburguesa igual en todas las páginas */


/* V3.28 - Menú global con estética anterior y posición corregida */

/* Hamburguesa fija arriba, como antes */


/* Desplegable debajo de la hamburguesa, sin taparla */
body .app-nav[data-role-menu="true"] {
  position: fixed !important;
  top: 68px !important;
  left: 18px !important;
  right: auto !important;
  z-index: 9998 !important;

  width: min(280px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 86px) !important;
  overflow-y: auto !important;

  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(10, 15, 22, 0.88) !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  flex-direction: column !important;
  gap: 8px !important;
}

body.menu-open .app-nav[data-role-menu="true"] {
  display: flex !important;
}

/* Botones del menú con tono anterior */
body .app-nav[data-role-menu="true"] a,
body .app-nav[data-role-menu="true"] button,
body .app-nav[data-role-menu="true"] button.link-button {
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 11px 13px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;

  background: rgba(24, 31, 39, 0.78) !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #e5e7eb !important;

  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body .app-nav[data-role-menu="true"] a:hover,
body .app-nav[data-role-menu="true"] button:hover,
body .app-nav[data-role-menu="true"] button.link-button:hover {
  background: rgba(31, 41, 55, 0.86) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #e5e7eb !important;
}

body .app-nav[data-role-menu="true"] a[aria-current="page"] {
  background: rgba(13, 54, 49, 0.72) !important;
  border-color: rgba(20, 184, 166, 0.62) !important;
  color: #5eead4 !important;
}

/* Asegura que el icono no desaparece ni se sustituye por pseudo-elementos */


/* V3.28 - Menú hamburguesa sobrio clásico */
body .app-nav[data-role-menu="true"] {
  top: 68px !important;
  left: 18px !important;
  width: min(265px, calc(100vw - 36px)) !important;
  padding: 10px !important;
  gap: 7px !important;

  background: rgba(13, 18, 25, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body .app-nav[data-role-menu="true"] a,
body .app-nav[data-role-menu="true"] button,
body .app-nav[data-role-menu="true"] button.link-button {
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;

  background: rgba(24, 31, 39, 0.62) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  color: #d6dde7 !important;

  font-size: 0.94rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

body .app-nav[data-role-menu="true"] a:hover,
body .app-nav[data-role-menu="true"] button:hover,
body .app-nav[data-role-menu="true"] button.link-button:hover {
  background: rgba(31, 41, 55, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  color: #f1f5f9 !important;
}

body .app-nav[data-role-menu="true"] a[aria-current="page"] {
  background: rgba(17, 60, 57, 0.54) !important;
  border-color: rgba(45, 212, 191, 0.36) !important;
  color: #8eeadd !important;
}


/* V3.28 - Admin pendientes visual por secciones */
.admin-pending-dashboard {
  display: grid;
  gap: 18px;
}

.admin-pending-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-pending-summary-card {
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.48);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.admin-pending-summary-card span {
  display: block;
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-pending-summary-card strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 1.7rem;
  line-height: 1;
}

.admin-pending-summary-card.is-signup {
  border-color: rgba(96, 165, 250, 0.28);
}

.admin-pending-summary-card.is-profile {
  border-color: rgba(45, 212, 191, 0.30);
}

.admin-pending-summary-card.is-training {
  border-color: rgba(251, 191, 36, 0.30);
}

.admin-pending-summary-card.is-contact {
  border-color: rgba(196, 181, 253, 0.30);
}

.admin-pending-section-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.32);
}

.admin-pending-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-pending-section-head h4 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.02rem;
}

.admin-pending-section-head p {
  margin: 4px 0 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.86rem;
  line-height: 1.35;
}

.admin-pending-count {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: #f8fafc;
  font-weight: 900;
}

.admin-pending-section-list {
  display: grid;
  gap: 10px;
}

.admin-pending-task-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 17px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.admin-task-tag {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-task-tag.is-profile {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.24);
  color: #99f6e4;
}

.admin-task-tag.is-training {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.24);
  color: #fde68a;
}

.admin-task-tag.is-contact {
  background: rgba(196, 181, 253, 0.12);
  border-color: rgba(196, 181, 253, 0.24);
  color: #ddd6fe;
}

.admin-task-person {
  display: grid;
  gap: 2px;
}

.admin-task-person strong {
  color: #f8fafc;
  font-size: 1rem;
}

.admin-task-person span,
.admin-task-person small,
.admin-task-detail-box small {
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.35;
}

.admin-task-detail-box,
.admin-profile-change-box {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-task-actions .btn {
  min-height: 36px;
}

@media (max-width: 760px) {
  .admin-pending-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-pending-section-card {
    padding: 12px;
  }

  .admin-pending-section-head {
    align-items: center;
  }

  .admin-task-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-task-actions .btn {
    width: 100%;
  }
}


/* V3.28 - Tarjetas resumen de pendientes clicables */
button.admin-pending-summary-card {
  width: 100%;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.admin-pending-summary-card:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.36);
}

button.admin-pending-summary-card:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.42);
  outline-offset: 3px;
}

.admin-pending-section-card.is-highlighted {
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12), 0 18px 42px rgba(15, 23, 42, 0.22);
}


/* V3.28 - Acciones rápidas en consultas */
.admin-contact-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-contact-quick-actions .btn {
  min-height: 36px;
  text-decoration: none;
}

@media (max-width: 760px) {
  .admin-contact-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-contact-quick-actions .btn {
    width: 100%;
  }
}


/* V3.28 - Cálculos dentro de su pestaña */
.admin-calculations-insights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

@media (max-width: 980px) {
  .admin-calculations-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-calculations-insights {
    grid-template-columns: 1fr;
  }
}


/* V3.28 - Pulido desktop de Admin Cálculos */
.admin-page [data-admin-panel="calculations"]:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.admin-page [data-admin-panel="calculations"] .admin-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  align-items: end;
  gap: 14px;
  margin-bottom: 0;
}

.admin-page [data-admin-panel="calculations"] .admin-section-header h3 {
  margin: 0;
  text-align: left;
}

.admin-page [data-admin-panel="calculations"] .admin-select {
  width: 100%;
  justify-self: end;
}

.admin-page [data-admin-panel="calculations"] .admin-calculations-insights {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-page [data-admin-panel="calculations"] .admin-calculations-insights .admin-insight-card {
  min-height: 96px;
  text-align: left;
  align-items: flex-start;
  justify-content: center;
}

.admin-page [data-admin-panel="calculations"] .admin-calculations-insights .admin-insight-card span,
.admin-page [data-admin-panel="calculations"] .admin-calculations-insights .admin-insight-card strong {
  text-align: left;
}

.admin-page [data-admin-panel="calculations"] #adminCalculationSearch {
  width: 100%;
  margin-top: 0;
}

.admin-page [data-admin-panel="calculations"] #adminCalculationsList {
  display: grid;
  gap: 10px;
}

.admin-page [data-admin-panel="calculations"] .admin-calculation-card,
.admin-page [data-admin-panel="calculations"] .admin-card,
.admin-page [data-admin-panel="calculations"] .calculation-card {
  text-align: left;
}

@media (min-width: 1100px) {
  .admin-page [data-admin-panel="calculations"] .admin-calculations-insights {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-page [data-admin-panel="calculations"] .admin-calculations-insights .admin-insight-card {
    min-height: 110px;
  }
}

@media (max-width: 760px) {
  .admin-page [data-admin-panel="calculations"] .admin-section-header {
    grid-template-columns: 1fr;
  }

  .admin-page [data-admin-panel="calculations"] .admin-select {
    justify-self: stretch;
  }

  .admin-page [data-admin-panel="calculations"] .admin-calculations-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .admin-page [data-admin-panel="calculations"] .admin-calculations-insights {
    grid-template-columns: 1fr;
  }
}


/* V3.28 - Centrado fino de resumen de pendientes */
.admin-pending-summary-card {
  text-align: center;
  display: grid;
  place-items: center;
  min-height: 58px;
}

.admin-pending-summary-card span,
.admin-pending-summary-card strong {
  text-align: center;
}

button.admin-pending-summary-card {
  text-align: center;
}


/* V3.28 - Informe de resolución de consultas */
.admin-resolution-report {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(20, 184, 166, 0.07);
}


/* V3.28 - Informe visible directamente en Consultas */
.admin-resolution-report {
  margin-top: 10px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  background: rgba(20, 184, 166, 0.07);
}

.admin-resolution-report small {
  display: block;
}

.admin-resolution-report small:first-child {
  color: #ccfbf1;
  font-weight: 900;
}


/* V3.28 - Tarifas fijas más entendibles */
.tariff-guide {
  margin: 18px 0 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(45, 212, 191, 0.20);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.13), transparent 34%),
    rgba(15, 23, 42, 0.42);
}

.tariff-guide-head {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.tariff-guide-head .eyebrow {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tariff-guide-head h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.2rem;
}

.tariff-guide-head p {
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.45;
}

.tariff-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tariff-step-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.50);
}

.tariff-step-card > span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.24);
  color: #ccfbf1;
  font-weight: 900;
}

.tariff-step-card strong {
  color: #f8fafc;
  font-size: 0.98rem;
}

.tariff-step-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.74);
  line-height: 1.4;
}

.tariff-step-card.is-warning {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.07);
}

.tariff-step-card.is-warning > span {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.24);
  color: #fde68a;
}

.tariff-patterns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 14px;
}

.tariff-patterns article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.tariff-patterns strong {
  color: #f8fafc;
}

.tariff-patterns span {
  color: rgba(226, 232, 240, 0.70);
  font-size: 0.84rem;
  line-height: 1.35;
}

.resource-card h3 {
  text-align: left;
}

.resource-card ul {
  margin-top: 10px;
}

.resource-table th,
.resource-table td {
  text-align: left;
}

.resource-table td[data-label="Precio"],
.resource-table td[data-label="Mínimo"] {
  font-weight: 900;
  color: #ccfbf1;
}

@media (max-width: 900px) {
  .tariff-steps,
  .tariff-patterns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tariff-guide {
    padding: 14px;
  }

  .tariff-steps,
  .tariff-patterns {
    grid-template-columns: 1fr;
  }
}


/* V3.28 - Tablas de tarifas fijas con VIP/VAN integrado */
.tariff-card {
  gap: 13px;
}

.tariff-card-head {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.tariff-card-head h3 {
  margin: 0;
}

.tariff-card-head p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.4;
}

.tariff-badge {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tariff-badge.is-warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.24);
  color: #fde68a;
}

.tariff-clean-table th {
  white-space: nowrap;
}

.tariff-clean-table td[data-label="VIP"],
.tariff-clean-table td[data-label="VAN"],
.tariff-clean-table td[data-label="Precio"] {
  font-weight: 900;
  color: #ccfbf1;
}

.tariff-clean-table td[data-label="VAN"] {
  color: #ddd6fe;
}

.tariff-calc-row td {
  background: rgba(251, 191, 36, 0.06);
}

.tariff-calc-row .btn {
  width: fit-content;
  min-height: 34px;
  text-decoration: none;
}

.tariff-card-calculator {
  border-color: rgba(251, 191, 36, 0.24);
  background:
    radial-gradient(circle at top left, rgba(251, 191, 36, 0.10), transparent 30%),
    rgba(15, 23, 42, 0.42);
}

.tariff-card-calculator .btn {
  width: fit-content;
}

@media (max-width: 640px) {
  .tariff-clean-table thead {
    display: none;
  }

  .tariff-clean-table,
  .tariff-clean-table tbody,
  .tariff-clean-table tr,
  .tariff-clean-table td {
    display: block;
    width: 100%;
  }

  .tariff-clean-table tr {
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  }

  .tariff-clean-table tr:last-child {
    border-bottom: 0;
  }

  .tariff-clean-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    border: 0;
  }

  .tariff-clean-table td::before {
    content: attr(data-label);
    color: rgba(226, 232, 240, 0.58);
    font-size: 0.78rem;
    font-weight: 900;
  }

  .tariff-calc-row .btn,
  .tariff-card-calculator .btn {
    width: 100%;
  }
}


/* V3.28 - Unificación visual de tarifas fijas */
.tariff-card-head {
  margin-bottom: 10px;
}

.tariff-card-head h3 {
  display: none;
}

.tariff-card-head p {
  font-size: 0.96rem;
}

.tariff-clean-table th,
.tariff-clean-table td {
  vertical-align: middle;
}

.tariff-clean-table th:nth-child(3),
.tariff-clean-table th:nth-child(4),
.tariff-clean-table td[data-label="VIP"],
.tariff-clean-table td[data-label="VAN"],
.tariff-clean-table .tariff-calc-cell {
  text-align: center;
}

.tariff-calc-cell {
  text-align: center !important;
}

.tariff-calc-cell .btn {
  margin: 0 auto;
}

.tariff-wait-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background: rgba(20, 184, 166, 0.06);
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.86rem;
  line-height: 1.35;
}

.tariff-wait-note strong {
  color: #ccfbf1;
}

.tariff-wait-note span {
  color: rgba(226, 232, 240, 0.76);
}

.tariff-wait-note a {
  color: #99f6e4;
  font-weight: 900;
  text-decoration: none;
}

.tariff-wait-note a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .tariff-clean-table td[data-label="VIP"],
  .tariff-clean-table td[data-label="VAN"],
  .tariff-clean-table .tariff-calc-cell {
    text-align: left;
  }

  .tariff-calc-cell .btn {
    width: 100%;
  }

  .tariff-wait-note {
    display: grid;
    gap: 4px;
  }
}


/* V3.28 - Calculadora compacta y alineada en tarifas */
.tariff-minimum-row .tariff-calc-cell {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.tariff-minimum-row small {
  display: block;
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

.tariff-clean-table .tariff-calc-cell {
  text-align: center !important;
}

.tariff-clean-table .tariff-calc-cell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .tariff-clean-table .tariff-calc-row {
    display: grid;
    gap: 4px;
  }

  .tariff-clean-table .tariff-calc-row td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .tariff-clean-table .tariff-calc-row .tariff-calc-cell {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: center !important;
    padding-top: 8px;
  }

  .tariff-clean-table .tariff-calc-row .tariff-calc-cell::before {
    content: none;
    display: none;
  }

  .tariff-clean-table .tariff-calc-row .tariff-calc-cell .btn {
    width: 100%;
    margin: 0;
  }

  .tariff-minimum-row small {
    text-align: center;
    padding: 0 4px;
  }
}


/* V3.28 - Tarifas fijas más recogidas */
.resource-tools {
  margin-top: 14px;
  margin-bottom: 16px;
}

.tariff-card:first-of-type {
  margin-top: 0;
}

.tariff-wait-note {
  font-size: 0.84rem;
}

.tariff-wait-note span strong {
  color: #ccfbf1;
}

.tariff-card-calculator {
  margin-top: 4px;
}


/* V3.28 - Tarifas más compactas en móvil */
@media (max-width: 640px) {
  .tariff-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .tariff-card-head p {
    max-width: none;
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .tariff-clean-table tr {
    padding: 9px 8px;
    border-radius: 13px;
  }

  .tariff-clean-table td {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 0;
  }

  .tariff-clean-table td::before {
    font-size: 0.76rem;
  }

  .resource-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .resource-hero p {
    max-width: none;
  }

  .tariff-wait-note {
    padding: 10px;
    font-size: 0.82rem;
    line-height: 1.32;
  }
}

.tariff-wait-note-airport {
  display: grid;
  gap: 4px;
  align-items: start;
}

.tariff-wait-note-airport > strong {
  color: #ccfbf1;
}

.tariff-wait-note-airport span {
  display: block;
}


/* V3.28 - Textos más claros en tarifas fijas */
.tariff-card-calculator .tariff-card-head p a {
  color: #99f6e4;
  font-weight: 900;
  text-decoration: none;
}

.tariff-card-calculator .tariff-card-head p a:hover {
  text-decoration: underline;
}


/* V3.28 - Tarifas aprovecha ancho y limpia CTA final */
.resource-hero p,
.resource-hero .hero-copy,
.resource-hero .hero-text,
.resource-hero header p {
  max-width: none !important;
}

body:has(.tariff-card) .resource-hero p {
  max-width: none !important;
}

.tariff-card-calculator {
  padding-top: 18px;
  padding-bottom: 18px;
}

.tariff-card-calculator .tariff-card-head {
  margin-bottom: 0;
}

.tariff-card-calculator .tariff-card-head p {
  max-width: none;
  margin: 0;
  line-height: 1.45;
}


/* V3.28 - Hero de Tarifas a ancho completo */
.tarifas-page .resource-hero,
.tarifas-page .resource-header,
.tarifas-page .resource-copy,
.tarifas-page .hero-copy,
.tarifas-page .hero-text,
.tarifas-page .page-copy,
.tarifas-page .section-copy {
  width: 100% !important;
  max-width: none !important;
}

.tarifas-page .resource-hero p,
.tarifas-page .resource-header p,
.tarifas-page .resource-copy p,
.tarifas-page .hero-copy p,
.tarifas-page .hero-text p,
.tarifas-page .page-copy p,
.tarifas-page .section-copy p {
  width: 100% !important;
  max-width: none !important;
}

.tarifas-page .resource-hero {
  align-items: start;
}

.tarifas-page .resource-hero h1,
.tarifas-page .resource-hero p {
  text-align: left;
}


/* V3.28 - Cabecera real de Tarifas a ancho completo */
.tarifas-page .auth-card-header {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
  align-items: stretch !important;
}

.tarifas-page .auth-card-header h2,
.tarifas-page .auth-card-header p {
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}

.tarifas-page .auth-card-header p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  line-height: 1.42;
}


/* V3.28 - Corrige fila AMB >10 km con calculadora y mínimos */
.tariff-clean-table .tariff-calc-row td {
  background: rgba(251, 191, 36, 0.06);
}

.tariff-clean-table .tariff-minimum-row .tariff-calc-cell {
  display: table-cell !important;
  width: auto;
  text-align: center !important;
  vertical-align: middle;
}

.tariff-clean-table .tariff-minimum-row .tariff-calc-cell .btn {
  margin: 0 auto 6px;
}

.tariff-clean-table .tariff-minimum-row .tariff-calc-cell small {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .tariff-clean-table .tariff-minimum-row .tariff-calc-cell {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: center !important;
  }

  .tariff-clean-table .tariff-minimum-row .tariff-calc-cell .btn {
    width: 100%;
    margin: 0;
  }

  .tariff-clean-table .tariff-minimum-row .tariff-calc-cell small {
    text-align: center;
    padding: 0 4px;
  }
}


/* V3.28 - Asistente tarifa fija */
.tariff-assistant {
  margin: 0 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(45, 212, 191, 0.20);
  background: rgba(15, 23, 42, 0.38);
  overflow: hidden;
}

.tariff-assistant summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
}

.tariff-assistant summary::-webkit-details-marker {
  display: none;
}

.tariff-assistant summary span {
  display: grid;
  gap: 2px;
}

.tariff-assistant summary strong {
  color: #f8fafc;
  font-size: 0.98rem;
}

.tariff-assistant summary small {
  color: rgba(226, 232, 240, 0.66);
  line-height: 1.3;
}

.tariff-assistant summary b {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-size: 0.78rem;
  white-space: nowrap;
}

.tariff-assistant[open] summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.tariff-assistant-body {
  display: grid;
  gap: 10px;
  padding: 13px 14px 14px;
}

.tariff-assistant-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.tariff-assistant label {
  display: grid;
  gap: 5px;
}

.tariff-assistant label span {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.tariff-assistant select,
.tariff-assistant input {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.58);
  color: #f8fafc;
  padding: 0 10px;
  font: inherit;
}

.tariff-assistant-hint {
  color: rgba(226, 232, 240, 0.66);
  line-height: 1.35;
}

.tariff-assistant-actions {
  display: flex;
  justify-content: flex-start;
}

.tariff-assistant-result {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.24);
}

.tariff-assistant-result > span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tariff-assistant-result.is-ok > span {
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
}

.tariff-assistant-result.is-warning > span {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.24);
  color: #fde68a;
}

.tariff-assistant-result.is-muted {
  color: rgba(226, 232, 240, 0.72);
}

.tariff-assistant-result strong {
  color: #f8fafc;
}

.tariff-assistant-result small {
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.35;
}

.tariff-assistant-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tariff-assistant-prices article {
  padding: 10px;
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.46);
  border: 1px solid rgba(148, 163, 184, 0.13);
}

.tariff-assistant-prices article span {
  display: block;
  color: rgba(226, 232, 240, 0.66);
  font-size: 0.76rem;
  font-weight: 900;
}

.tariff-assistant-prices article strong {
  display: block;
  margin-top: 3px;
  color: #ccfbf1;
  font-size: 1.08rem;
}

@media (max-width: 900px) {
  .tariff-assistant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tariff-assistant summary {
    align-items: flex-start;
  }

  .tariff-assistant-grid,
  .tariff-assistant-prices {
    grid-template-columns: 1fr;
  }

  .tariff-assistant-actions .btn {
    width: 100%;
  }
}


/* V3.28 - Asistente como uso recomendado */
.tariff-assistant {
  border-color: rgba(45, 212, 191, 0.32);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.10), transparent 32%),
    rgba(15, 23, 42, 0.44);
}

.tariff-assistant summary {
  cursor: default;
  padding-top: 12px;
  padding-bottom: 10px;
}

.tariff-assistant summary strong {
  font-size: 1.05rem;
}

.tariff-assistant summary b {
  background: rgba(45, 212, 191, 0.18);
  color: #ccfbf1;
}

.tariff-assistant-body {
  padding-top: 12px;
}

.tariff-assistant-grid {
  align-items: end;
}

.tariff-assistant-result {
  margin-top: 2px;
}

.tariff-reference-title {
  display: grid;
  gap: 3px;
  margin: 16px 0 10px;
}

.tariff-reference-title strong {
  color: #f8fafc;
  font-size: 1rem;
}

.tariff-reference-title span {
  color: rgba(226, 232, 240, 0.64);
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .tariff-assistant summary {
    gap: 8px;
  }

  .tariff-assistant summary b {
    font-size: 0.72rem;
    padding: 5px 8px;
  }

  .tariff-assistant summary small {
    font-size: 0.82rem;
  }
}


/* V3.28 - Buscador debajo del asistente */
.tariff-assistant + .resource-tools {
  margin-top: 14px;
  margin-bottom: 14px;
}

.tarifas-page .resource-tools {
  display: grid;
  gap: 6px;
}

.tarifas-page .resource-search {
  width: 100%;
}


/* V3.28 - Resultado del asistente sin boton ni textos orientativos */
.tariff-assistant-body {
  gap: 11px;
}

.tariff-assistant-result {
  margin-top: 0;
}

.tariff-assistant-prices article {
  display: grid;
  gap: 3px;
}

.tariff-assistant-prices article strong {
  font-size: 1.22rem;
}

.tariff-assistant-prices article small b {
  color: #f8fafc;
}

.tariff-assistant-actions {
  display: none !important;
}


/* V3.28 - Espera cobrable clara y selector Aeropuerto/Puente Aéreo */
.tariff-assistant-hint {
  max-width: none;
}

.tariff-assistant-prices article strong + small {
  margin-top: 2px;
}

.tariff-assistant-prices article small {
  line-height: 1.28;
}


/* V3.28 - Puente Aéreo como origen y inputs numéricos limpios */
.tariff-assistant input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.tariff-assistant input[type="number"]::-webkit-outer-spin-button,
.tariff-assistant input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* V3.28 - Inputs numericos sin flechas y Puente Aereo como origen */
.tariff-assistant input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.tariff-assistant input[type="number"]::-webkit-outer-spin-button,
.tariff-assistant input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* V3.28 - Destaca minutos de cortesia en asistente */
.tariff-assistant-hint strong {
  color: #ccfbf1;
  font-weight: 950;
}


/* V3.28 - CTA final PDF tarifas */
.tariff-pdf-cta {
  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.34);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tariff-pdf-cta div {
  display: grid;
  gap: 3px;
}

.tariff-pdf-cta strong {
  color: #f8fafc;
  font-size: 0.98rem;
}

.tariff-pdf-cta span {
  color: rgba(226, 232, 240, 0.64);
  font-size: 0.86rem;
  line-height: 1.35;
}

.tariff-pdf-cta .btn {
  white-space: nowrap;
}

.tariff-pdf-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .tariff-pdf-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .tariff-pdf-actions {
    flex-direction: column;
  }

  .tariff-pdf-cta .btn {
    width: 100%;
  }
}


/* V3.28 - Botones pequeños de reiniciar */
.tariff-assistant-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
  margin-bottom: 0;
}

.tariff-reset-soft,
.calc-reset-soft {
  min-height: 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
  opacity: 0.88;
  background: rgba(15, 23, 42, 0.42) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.78) !important;
}

.tariff-reset-soft:hover,
.calc-reset-soft:hover {
  opacity: 1;
  color: #f8fafc !important;
  border-color: rgba(45, 212, 191, 0.32) !important;
}

.calc-reset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calc-reset-fallback {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

@media (max-width: 560px) {
  .tariff-assistant-reset-row,
  .calc-reset-fallback {
    justify-content: flex-end;
  }
}


/* V3.28 - Reiniciar sin recarga */
.tariff-assistant-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
  margin-bottom: 0;
}

.tariff-reset-soft,
.calc-reset-soft {
  min-height: 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
  opacity: 0.88;
  background: rgba(15, 23, 42, 0.42) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(226, 232, 240, 0.78) !important;
}

.tariff-reset-soft:hover,
.calc-reset-soft:hover {
  opacity: 1;
  color: #f8fafc !important;
  border-color: rgba(45, 212, 191, 0.32) !important;
}

.calc-reset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calc-reset-fallback {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}


/* V3.28 - Firma discreta Arturo Balbastre */
.contact-owner-copy {
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.45;
  margin-top: 6px;
  max-width: 720px;
}

footer,
.app-footer,
.auth-footer,
.page-footer {
  line-height: 1.45;
}


/* V3.28 - Footer global visible y contacto a ancho completo */
.global-signature-footer {
  width: 100%;
  max-width: none;
  margin: 22px 0 0;
  padding: 14px 8px 2px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: nowrap;
  overflow-x: auto;
  color: rgba(226, 232, 240, 0.54);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  scrollbar-width: none;
}

.global-signature-footer::-webkit-scrollbar {
  display: none;
}

.global-signature-footer span,
.global-signature-footer a {
  white-space: nowrap;
}

.global-signature-footer span,
.global-signature-footer a {
  color: rgba(226, 232, 240, 0.58);
  text-decoration: none;
}

.global-signature-footer a:hover {
  color: #ccfbf1;
}

.global-signature-footer span:not(:last-child)::after,
.global-signature-footer a:not(:last-child)::after {
  content: "·";
  margin-left: 9px;
  color: rgba(148, 163, 184, 0.45);
}

.contact-page .auth-card-header,
.contact-page .auth-card-header p,
.contact-page .resource-hero,
.contact-page .resource-hero p {
  width: 100% !important;
  max-width: none !important;
}

.contact-page .auth-card-header p {
  max-width: none !important;
  line-height: 1.42;
}

@media (max-width: 560px) {
  .global-signature-footer {
    margin-top: 18px;
    font-size: 0.74rem;
    gap: 7px;
  }

  .global-signature-footer span:not(:last-child)::after,
  .global-signature-footer a:not(:last-child)::after {
    margin-left: 7px;
  }
}

@media (max-width: 380px) {
  .global-signature-footer {
    font-size: 0.66rem;
    gap: 5px;
  }

  .global-signature-footer span:not(:last-child)::after,
  .global-signature-footer a:not(:last-child)::after {
    margin-left: 5px;
  }
}


/* V3.28 - Protocolo operativo por tarjetas */
.protocol-page main {
  max-width: 1120px;
}

.protocol-hero {
  margin-bottom: 16px;
}

.protocol-hero h1 {
  margin: 18px 0 8px;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.protocol-hero p {
  max-width: 820px;
  color: rgba(226, 232, 240, 0.72);
  font-size: 1.02rem;
  line-height: 1.45;
}

.protocol-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.protocol-flow article {
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.38);
  border-radius: 18px;
  padding: 13px;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 7px;
}

.protocol-flow span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-weight: 950;
  font-size: 0.82rem;
}

.protocol-flow strong {
  color: #f8fafc;
  line-height: 1.15;
}

.protocol-flow small {
  color: rgba(226, 232, 240, 0.64);
  line-height: 1.35;
}

.protocol-tools {
  margin: 16px 0 18px;
}

.protocol-search {
  width: 100%;
}

.protocol-empty {
  margin: 8px 0 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
}

.protocol-section {
  margin-top: 22px;
}

.protocol-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.protocol-section-head span {
  width: 34px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.76rem;
  font-weight: 950;
}

.protocol-section-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.protocol-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.protocol-card {
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.36);
  border-radius: 18px;
  padding: 14px;
  min-height: 100%;
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.16);
}

.protocol-card[hidden],
.protocol-section[hidden] {
  display: none !important;
}

.protocol-card.is-primary {
  border-color: rgba(45, 212, 191, 0.28);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(15, 23, 42, 0.36));
}

.protocol-card.is-important {
  border-color: rgba(96, 165, 250, 0.28);
}

.protocol-card.is-warning {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(15, 23, 42, 0.36));
}

.protocol-card.is-airport {
  border-color: rgba(45, 212, 191, 0.24);
}

.protocol-card.is-sants {
  border-color: rgba(129, 140, 248, 0.24);
}

.protocol-card.is-money {
  border-color: rgba(52, 211, 153, 0.26);
}

.protocol-card-head {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.protocol-card-head strong {
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.protocol-badge {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.20);
  color: #99f6e4;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.protocol-card ul,
.protocol-card ol {
  margin: 0;
  padding-left: 18px;
  color: rgba(226, 232, 240, 0.74);
  line-height: 1.45;
  font-size: 0.91rem;
}

.protocol-card li + li {
  margin-top: 5px;
}

.protocol-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.42;
}

.protocol-card b {
  color: #f8fafc;
}

.protocol-note {
  margin-top: 10px !important;
  padding: 10px;
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.24);
  border: 1px solid rgba(148, 163, 184, 0.13);
}

.protocol-price {
  width: fit-content;
  margin-bottom: 8px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(45, 212, 191, 0.13);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #ccfbf1;
  font-size: 1.35rem;
  font-weight: 950;
}

.protocol-faq {
  display: grid;
  gap: 10px;
}

.protocol-faq-item {
  min-height: 0;
}

.protocol-faq-item summary {
  cursor: pointer;
  color: #f8fafc;
  font-weight: 900;
  line-height: 1.25;
}

.protocol-faq-item p {
  margin-top: 10px;
}

@media (max-width: 920px) {
  .protocol-flow,
  .protocol-grid,
  .protocol-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .protocol-flow,
  .protocol-grid,
  .protocol-grid.two {
    grid-template-columns: 1fr;
  }

  .protocol-flow article {
    min-height: 0;
  }

  .protocol-card {
    padding: 13px;
  }
}


/* V3.28 - Protocolo con layout tipo Tarifas */
.protocol-page {
  overflow-x: hidden;
}

.protocol-page main {
  width: min(980px, calc(100% - 32px)) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.protocol-shell-card {
  width: 100%;
  margin: 0 auto;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.08), transparent 32%),
    rgba(15, 23, 42, 0.50);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.26);
  box-sizing: border-box;
}

.protocol-shell-card .global-signature-footer {
  margin-bottom: 0;
}

.protocol-page .protocol-hero {
  margin: 0 0 18px !important;
  padding: 0 !important;
}


.protocol-page .protocol-hero h1 {
  margin: 0 0 10px !important;
  font-size: clamp(2.15rem, 4vw, 3.2rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em;
}

.protocol-page .protocol-hero p {
  width: 100% !important;
  max-width: none !important;
  color: rgba(226, 232, 240, 0.72);
  font-size: 1rem;
  line-height: 1.45;
}

.protocol-page .protocol-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 18px 0 18px !important;
}

.protocol-page .protocol-flow article {
  min-height: 124px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.40);
}

.protocol-page .protocol-tools {
  width: 100%;
  margin: 18px 0 20px !important;
  display: block !important;
}

.protocol-page .protocol-search {
  width: 100% !important;
  max-width: none !important;
}

.protocol-page .protocol-section {
  margin-top: 22px;
}

.protocol-page .protocol-section-head {
  margin-bottom: 11px;
}

.protocol-page .protocol-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.protocol-page .protocol-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.protocol-page .protocol-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(30, 41, 59, 0.62);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: none;
}

.protocol-page .protocol-card-head strong {
  font-size: 0.98rem;
}

.protocol-page .protocol-card ul,
.protocol-page .protocol-card ol {
  font-size: 0.9rem;
  line-height: 1.42;
}

.protocol-page .protocol-faq {
  gap: 9px;
}

.protocol-page .protocol-faq-item {
  padding: 14px 16px;
}

@media (min-width: 1180px) {
  .protocol-page main {
    width: min(980px, calc(100vw - 180px)) !important;
    max-width: 980px !important;
  }
}

@media (min-width: 1500px) {
  .protocol-page main {
    width: min(1020px, calc(100vw - 260px)) !important;
    max-width: 1020px !important;
  }
}

@media (max-width: 980px) {
  .protocol-page main {
    width: min(760px, calc(100% - 28px)) !important;
    max-width: 760px !important;
  }

  .protocol-shell-card {
    padding: 24px;
    border-radius: 26px;
  }

  .protocol-page .protocol-flow,
  .protocol-page .protocol-grid,
  .protocol-page .protocol-grid.two {
    grid-template-columns: 1fr !important;
  }

  .protocol-page .protocol-flow article {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .protocol-page main {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .protocol-shell-card {
    padding: 20px 14px;
    border-radius: 24px;
  }

  .protocol-page .protocol-hero h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }

  .protocol-page .protocol-hero p {
    font-size: 0.98rem;
  }

  .protocol-page .protocol-flow {
    gap: 10px !important;
  }

  .protocol-page .protocol-flow article {
    padding: 14px;
  }

  .protocol-page .protocol-card {
    padding: 14px;
  }

  .protocol-page .protocol-card ul,
  .protocol-page .protocol-card ol {
    font-size: 0.91rem;
  }
}


/* V3.28 - Unificación visual tipo Tarifas */
.standard-page {
  overflow-x: hidden;
}

.standard-page main,
.protocol-page main {
  width: min(980px, calc(100% - 32px)) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.page-shell-card,
.protocol-shell-card {
  width: 100%;
  margin: 0 auto;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.08), transparent 32%),
    rgba(15, 23, 42, 0.50);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.26);
  box-sizing: border-box;
}

/* Cabeceras dentro de la tarjeta */
.page-shell-card > .brand-block,
.page-shell-card .brand-block,
.protocol-shell-card > .brand-block,
.protocol-shell-card .brand-block {
  margin-top: 0;
}

.page-shell-card h1,
.page-shell-card .page-title,
.page-shell-card .auth-card-header h1,
.page-shell-card .auth-card-header h2,
.protocol-shell-card h1 {
  max-width: none !important;
}

.page-shell-card p,
.page-shell-card .auth-card-header p,
.page-shell-card .hero-copy,
.page-shell-card .page-copy,
.protocol-shell-card p {
  max-width: none !important;
}

/* Evita que tarjetas internas se peguen al borde */
.page-shell-card > *:first-child,
.protocol-shell-card > *:first-child {
  margin-top: 0 !important;
}

.page-shell-card > *:last-child,
.protocol-shell-card > *:last-child {
  margin-bottom: 0 !important;
}

/* Tarjetas internas más coherentes con Tarifas */
.standard-page .auth-card,
.standard-page .resource-card,
.standard-page .training-card,
.standard-page .admin-card,
.standard-page .quality-card,
.standard-page .history-card,
.standard-page .logo-card,
.standard-page .contact-card,
.standard-page .form-card {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(30, 41, 59, 0.62);
}

/* Inputs y buscadores a ancho completo cuando van dentro de páginas estándar */
.standard-page input[type="search"],
.standard-page .resource-search,
.standard-page .protocol-search {
  width: 100% !important;
  max-width: none !important;
}

/* Footer dentro de tarjetas */
.page-shell-card .global-signature-footer,
.protocol-shell-card .global-signature-footer {
  margin-bottom: 0;
}

/* Formación: corrige hero demasiado abierto */
.standard-page .training-hero,
.standard-page .formation-hero,
.standard-page .page-hero,
.standard-page .auth-card-header {
  width: 100% !important;
  max-width: none !important;
}

/* Admin puede necesitar scroll horizontal dentro de tablas, no romper página */
.standard-page table {
  max-width: 100%;
}

.standard-page .table-wrap,
.standard-page .admin-table-wrap,
.standard-page .responsive-table {
  overflow-x: auto;
}

/* Desktop grande: más aire lateral como Tarifas */
@media (min-width: 1180px) {
  .standard-page main,
  .protocol-page main {
    width: min(980px, calc(100vw - 180px)) !important;
    max-width: 980px !important;
  }
}

@media (min-width: 1500px) {
  .standard-page main,
  .protocol-page main {
    width: min(1020px, calc(100vw - 260px)) !important;
    max-width: 1020px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .standard-page main,
  .protocol-page main {
    width: min(760px, calc(100% - 28px)) !important;
    max-width: 760px !important;
  }

  .page-shell-card,
  .protocol-shell-card {
    padding: 24px;
    border-radius: 26px;
  }
}

/* Móvil */
@media (max-width: 560px) {
  .standard-page main,
  .protocol-page main {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .page-shell-card,
  .protocol-shell-card {
    padding: 20px 14px;
    border-radius: 24px;
  }

  .page-shell-card h1,
  .protocol-shell-card h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }
}


/* V3.84 - Oculta el markup estatico de formacion.html (el panel "Preparacion
   previa" etc.) hasta que formacion-standalone.js termina de pintar el
   estado real. Antes esta regla vivia en un <style> dentro del <head> de
   formacion.html: funcionaba en una carga completa normal, pero
   shell-nav.js solo sustituye <main> en una navegacion sin recarga (item
   10) y nunca toca <head> - así que esa regla no llegaba a aplicarse y el
   markup estatico (siempre en estado "sin empezar") se veia un instante
   antes de que el script real lo sustituyera. Debe vivir aqui, en el CSS
   global que ya esta cargado pase lo que pase. No la quites ni la vuelvas
   a mover a formacion.html. */
body.formacion-page:not(.formation-standalone-ready) .page-shell-card > *:not(.formation-auth-loader) {
  display: none !important;
}

.formation-auth-loader {
  background: #182126;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 22px;
  padding: 34px;
  color: rgba(235, 245, 255, .78);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
}

body.formacion-page.formation-standalone-ready .formation-auth-loader {
  display: none !important;
}

/* V3.28 - Cabecera Formación con logo real y sin solape de menú */
.formacion-page main {
  padding-top: 34px !important;
}

.formacion-page .page-shell-card {
  margin-top: 0 !important;
}

.formation-brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.formation-brand-logo {
  width: 42px;
  height: 42px;
  min-width: 42px;
  object-fit: contain;
  border-radius: 16px;
  display: block;
  background: rgba(255, 255, 255, 0.04);
}

.formation-brand-block > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.formation-brand-block strong {
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.05;
}

.formation-brand-block span {
  color: rgba(226, 232, 240, 0.66);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.formacion-page h1 {
  margin-top: 0 !important;
}

@media (max-width: 560px) {
  .formacion-page main {
    padding-top: 42px !important;
  }

  .formation-brand-logo {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .formation-brand-block {
    margin-bottom: 18px;
  }
}


/* V3.28 - Formación: intro de estudio y test más claro */
.formation-study-panel {
  margin: 22px 0;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.08), transparent 34%),
    rgba(15, 23, 42, 0.36);
}

.formation-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.formation-study-panel h2 {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.formation-study-panel p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.45;
}

.formation-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.formation-study-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(30, 41, 59, 0.62);
  text-decoration: none;
}

.formation-study-card span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-weight: 950;
  font-size: 0.8rem;
}

.formation-study-card strong {
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.15;
}

.formation-study-card small {
  color: rgba(226, 232, 240, 0.66);
  line-height: 1.35;
}

.formation-study-card:hover {
  border-color: rgba(45, 212, 191, 0.30);
}

.formation-test-intro {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.13);
}

.formation-test-intro strong {
  color: #f8fafc;
}

.formation-test-intro span {
  color: rgba(226, 232, 240, 0.66);
  line-height: 1.35;
}

.formation-test-panel {
  margin-top: 22px !important;
}

.formation-test-panel h2,
.formation-test-panel h3 {
  margin-bottom: 8px;
}

.formation-test-panel > p,
.formation-test-panel .test-description {
  color: rgba(226, 232, 240, 0.70);
  line-height: 1.42;
}

.formation-test-panel fieldset,
.formation-test-panel .question,
.formation-test-panel .test-question,
.formation-test-panel article {
  border-radius: 20px;
}

.formation-test-panel .question,
.formation-test-panel .test-question {
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.30);
}

.formation-test-panel legend,
.formation-test-panel .question-title,
.formation-test-panel .test-question-title {
  color: #f8fafc;
  font-size: 1.02rem;
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: -0.015em;
}

.formation-answer-option {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 8px 0 !important;
  padding: 12px 13px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  background: rgba(15, 23, 42, 0.44) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  line-height: 1.28;
  cursor: pointer;
}

.formation-answer-option input[type="radio"] {
  order: 2;
  justify-self: start;
  margin: 0 4px 0 0;
}

.formation-answer-letter {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.78rem;
  font-weight: 950;
}

.formation-answer-option.is-selected {
  border-color: rgba(45, 212, 191, 0.36) !important;
  background: rgba(45, 212, 191, 0.10) !important;
}

.formation-answer-option.is-selected .formation-answer-letter {
  background: rgba(45, 212, 191, 0.18);
  border-color: rgba(45, 212, 191, 0.34);
  color: #ccfbf1;
}

@media (max-width: 680px) {
  .formation-study-grid {
    grid-template-columns: 1fr;
  }

  .formation-study-panel {
    padding: 15px;
  }

  .formation-answer-option {
    padding: 11px 12px !important;
    gap: 9px;
  }
}


/* V3.28 - Formación: estudiar primero, test después */
.formacion-page.formation-test-not-started .formation-test-panel {
  display: none !important;
}

.formacion-page.formation-test-started .formation-study-panel {
  display: none !important;
}

.formation-study-panel {
  margin: 22px 0;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(45, 212, 191, 0.20);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.09), transparent 34%),
    rgba(15, 23, 42, 0.38);
}

.formation-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.formation-study-panel h2 {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.formation-study-panel p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.45;
}

.formation-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.formation-study-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(30, 41, 59, 0.62);
  text-decoration: none;
}

.formation-study-card span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-weight: 950;
  font-size: 0.8rem;
}

.formation-study-card strong {
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.15;
}

.formation-study-card small {
  color: rgba(226, 232, 240, 0.66);
  line-height: 1.35;
}

.formation-test-intro {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.13);
}

.formation-test-intro strong {
  color: #f8fafc;
}

.formation-test-intro span {
  color: rgba(226, 232, 240, 0.66);
  line-height: 1.35;
}

.formation-start-test {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 680px) {
  .formation-study-grid {
    grid-template-columns: 1fr;
  }

  .formation-study-panel {
    padding: 15px;
  }
}


/* V3.28 - Reparación Formación: estudio + test */
.formation-test-panel[hidden],
.formation-study-panel[hidden] {
  display: none !important;
}

.formation-test-panel {
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(30, 41, 59, 0.62);
}

.formation-test-copy {
  color: rgba(226, 232, 240, 0.70);
  line-height: 1.45;
}

.formation-question-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.34);
}

.formation-question-card h3 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  margin: 0 0 12px;
  color: #f8fafc;
  font-size: 1.02rem;
  line-height: 1.24;
}

.formation-question-card h3 span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.24);
  color: #99f6e4;
  font-size: 0.8rem;
  font-weight: 950;
}

.formation-answer-list {
  display: grid;
  gap: 8px;
}

.formation-answer-option {
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  background: rgba(15, 23, 42, 0.44) !important;
  cursor: pointer;
}

.formation-answer-option input {
  margin: 0;
}

.formation-answer-letter {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.78rem;
  font-weight: 950;
}

.formation-answer-option.is-selected {
  border-color: rgba(45, 212, 191, 0.36) !important;
  background: rgba(45, 212, 191, 0.10) !important;
}

.formation-answer-option.is-selected .formation-answer-letter {
  background: rgba(45, 212, 191, 0.18);
  border-color: rgba(45, 212, 191, 0.34);
  color: #ccfbf1;
}


/* V3.28 - Protocolo integrado dentro de Formación */
.formation-study-single {
  margin-top: 14px;
}

.formation-study-card.is-main {
  border-color: rgba(45, 212, 191, 0.22);
}

.formation-inline-protocol[hidden],
.formation-study-panel[hidden],
.formation-test-panel[hidden] {
  display: none !important;
}

.formation-inline-protocol {
  margin: 22px 0;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(45, 212, 191, 0.20);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.08), transparent 34%),
    rgba(15, 23, 42, 0.38);
}

.formation-inline-head h2 {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.formation-inline-head p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.45;
}

.formation-protocol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.formation-protocol-grid article {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(30, 41, 59, 0.62);
}

.formation-protocol-grid article > span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.22);
  color: #99f6e4;
  font-weight: 950;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.formation-protocol-grid strong {
  display: block;
  color: #f8fafc;
  font-size: 1rem;
  line-height: 1.16;
  margin-bottom: 8px;
}

.formation-protocol-grid ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.42;
  font-size: 0.9rem;
}

.formation-protocol-grid li + li {
  margin-top: 5px;
}

.formation-protocol-grid b {
  color: #f8fafc;
}

.formation-protocol-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.formation-protocol-actions .btn {
  flex: 1;
}

@media (max-width: 720px) {
  .formation-protocol-grid {
    grid-template-columns: 1fr;
  }

  .formation-protocol-actions {
    flex-direction: column;
  }
}


/* V3.28 - Ajuste conceptual app verde/app roja */
.protocol-card .protocol-note,
.formation-protocol-grid .protocol-note {
  font-size: 0.86rem;
}


/* V3.28 - Formación más compacta y apps verde/roja */
.formation-test-intro.compact {
  margin-top: 12px;
}

.formation-inline-head.compact {
  margin-bottom: 12px;
}

.formation-inline-head.compact h2 {
  margin-bottom: 0;
}

.protocol-card .protocol-note {
  margin-top: 10px;
  color: rgba(226, 232, 240, 0.64);
  font-size: 0.86rem;
  line-height: 1.35;
}


/* V3.28 - Formación más directa: sin tarjeta redundante */
.formacion-page .formation-study-panel {
  margin-top: 18px;
}

.formacion-page .formation-test-intro.compact,
.formacion-page .formation-test-intro {
  padding: 10px 12px;
}

.formacion-page .formation-study-panel h2,
.formacion-page .formation-inline-head h2 {
  margin-bottom: 4px;
}

.formacion-page .formation-study-panel p {
  line-height: 1.32;
}

.formacion-page .formation-inline-head.compact {
  margin-bottom: 10px;
}


/* V3.28 - Formación sin Admin ni huecos antes del protocolo */
.formacion-page .formation-study-panel {
  margin-top: 0 !important;
}


/* V3.28 - Chip compacto estado formación */
.formacion-page .formation-study-panel {
  position: relative;
}

.formacion-page .formation-status-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(148, 163, 184, 0.10);
  color: rgba(226, 232, 240, 0.78);
}

.formacion-page .formation-status-chip[data-state="admin"] {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.12);
  color: #bfdbfe;
}

.formacion-page .formation-status-chip[data-state="approved"] {
  border-color: rgba(45, 212, 191, 0.30);
  background: rgba(45, 212, 191, 0.13);
  color: #99f6e4;
}

.formacion-page .formation-status-chip[data-state="review"] {
  border-color: rgba(251, 191, 36, 0.30);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
}

.formacion-page .formation-status-chip[data-state="pending"] {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.10);
  color: rgba(226, 232, 240, 0.76);
}

@media (max-width: 560px) {
  .formacion-page .formation-status-chip {
    display: flex;
    margin: 8px 0 0;
  }
}


/* V3.28 - Formación más ligera: chip discreto y menos separación */
.formacion-page main {
  padding-top: 14px !important;
}

.formacion-page .page-shell-card {
  margin-top: 18px !important;
}

.formacion-page .formation-study-panel {
  position: relative;
  padding-top: 18px !important;
}

.formacion-page .formation-kicker {
  margin-bottom: 12px;
}

.formacion-page .formation-status-chip {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0 !important;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  opacity: 0.88;
  transform: scale(0.96);
  transform-origin: top right;
}

.formacion-page .formation-status-chip[data-state="approved"] {
  border-color: rgba(45, 212, 191, 0.20);
  background: rgba(45, 212, 191, 0.08);
  color: rgba(153, 246, 228, 0.86);
}

.formacion-page .formation-status-chip[data-state="admin"] {
  border-color: rgba(96, 165, 250, 0.20);
  background: rgba(96, 165, 250, 0.08);
  color: rgba(191, 219, 254, 0.86);
}

.formacion-page .formation-status-chip[data-state="review"] {
  border-color: rgba(251, 191, 36, 0.20);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(253, 230, 138, 0.86);
}

.formacion-page .formation-status-chip[data-state="pending"] {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.07);
  color: rgba(226, 232, 240, 0.72);
}

.formacion-page .formation-study-panel h2 {
  margin-top: 0 !important;
}

@media (max-width: 560px) {
  .formacion-page main {
    padding-top: 6px !important;
  }

  .formacion-page .page-shell-card {
    margin-top: 12px !important;
  }

  .formacion-page .formation-study-panel {
    padding-top: 16px !important;
  }

  .formacion-page .formation-status-chip {
    top: 16px;
    right: 16px;
    max-width: 44%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.1;
  }

  .formacion-page .formation-kicker {
    max-width: 52%;
  }
}


/* V3.28 - Alineación fina Formación */
.formacion-page .page-shell-card {
  width: min(820px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.formacion-page .formation-study-panel,
.formacion-page .formation-inline-protocol,
.formacion-page .formation-test-panel {
  width: 100% !important;
  box-sizing: border-box;
}

.formacion-page .formation-study-panel {
  padding: 20px !important;
}

/* El chip de estado va a la derecha, pero el título Preparación previa no debe comprimirse tanto */
.formacion-page .formation-study-panel > .formation-kicker {
  max-width: calc(100% - 190px) !important;
  width: fit-content !important;
  white-space: nowrap !important;
}

/* En el lector del protocolo NO hay chip de estado, así que no debe partir "Protocolo operativo" */
.formacion-page .formation-inline-protocol .formation-kicker {
  max-width: none !important;
  width: fit-content !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Centrar mejor el contenido del lector interno */
.formacion-page .formation-inline-protocol {
  padding: 20px !important;
}

.formacion-page .formation-protocol-grid article {
  padding: 18px !important;
}

/* Evitar sensación de bloque pegado a la izquierda en móvil */
@media (max-width: 560px) {
  .formacion-page .page-shell-card {
    width: calc(100% - 28px) !important;
  }

  .formacion-page .formation-study-panel,
  .formacion-page .formation-inline-protocol {
    padding: 16px !important;
  }

  .formacion-page .formation-study-panel > .formation-kicker {
    max-width: 58% !important;
    white-space: normal !important;
    line-height: 1.08 !important;
  }

  .formacion-page .formation-status-chip {
    max-width: 38% !important;
    white-space: normal !important;
    line-height: 1.08 !important;
  }

  .formacion-page .formation-inline-protocol .formation-kicker {
    max-width: none !important;
    white-space: nowrap !important;
  }

  .formacion-page .formation-protocol-grid article {
    padding: 16px !important;
  }
}

@media (min-width: 900px) {
  .formacion-page .page-shell-card {
    width: min(780px, calc(100% - 48px)) !important;
  }
}


/* V3.28 - Reparación visual segura */

/* Tarifas fijas: cuatro campos iguales en pantalla ancha */
@media (min-width: 780px) {
  .tariff-assistant .assistant-grid,
  .tariff-assistant .tariff-form,
  .tariff-assistant .form-grid,
  .tariff-assistant form {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: end !important;
  }

  .tariff-assistant .assistant-grid > *,
  .tariff-assistant .tariff-form > *,
  .tariff-assistant .form-grid > *,
  .tariff-assistant form > * {
    min-width: 0 !important;
  }

  .tariff-assistant select,
  .tariff-assistant input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Calculadora: botones de resultado equilibrados */
.result-actions,
.calculator-page .result-actions,
.calculadora-page .result-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.result-actions .btn,
.calculator-page .result-actions .btn,
.calculadora-page .result-actions .btn {
  width: 100% !important;
  min-height: 52px !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* V3.78 - Aviso visible del destinatario debajo de los botones de resultado */
.result-recipient-hint {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px dashed rgba(45, 212, 191, 0.38);
  border-radius: 14px;
  background: rgba(45, 212, 191, 0.06);
  color: rgba(226, 232, 240, 0.82);
  font-size: 0.88rem;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.result-recipient-hint:hover,
.result-recipient-hint:focus-visible {
  background: rgba(45, 212, 191, 0.11);
  border-color: rgba(45, 212, 191, 0.55);
  outline: none;
}

.result-recipient-hint strong {
  color: #5eead4;
  font-weight: 800;
}

@media (max-width: 560px) {
  .result-actions,
  .calculator-page .result-actions,
  .calculadora-page .result-actions {
    grid-template-columns: 1fr !important;
  }
}


/* V3.28 - Tarifas: igualar campos exactos del asistente */
@media (min-width: 760px) {
  #tariffAssistant .tariff-assistant-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
  }

  #tariffAssistant .tariff-assistant-grid > label {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  #tariffAssistantOrigin,
  #tariffAssistantDestination,
  #tariffAssistantKm,
  #tariffAssistantWait {
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 759px) {
  #tariffAssistant .tariff-assistant-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #tariffAssistant .tariff-assistant-grid > label,
  #tariffAssistantOrigin,
  #tariffAssistantDestination,
  #tariffAssistantKm,
  #tariffAssistantWait {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}


/* V3.28 - Tarifas: campos exactos e iguales, sin apariencia nativa Safari */
@media (min-width: 901px) {
  body .tarifas-page #tariffAssistant .tariff-assistant-grid {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  body .tarifas-page #tariffAssistant .tariff-assistant-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
  }
}

body .tarifas-page #tariffAssistant .tariff-field {
  display: grid !important;
  grid-template-rows: auto 40px !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body .tarifas-page #tariffAssistant .tariff-field > span {
  display: block !important;
  min-height: 16px !important;
  line-height: 1.15 !important;
}

body .tarifas-page #tariffAssistantOrigin,
body .tarifas-page #tariffAssistantDestination,
body .tarifas-page #tariffAssistantKm,
body .tarifas-page #tariffAssistantWait {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;

  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background-color: #222a35 !important;
  color: #f8fafc !important;

  font: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  line-height: 40px !important;
  padding: 0 11px !important;
}

body .tarifas-page #tariffAssistantOrigin,
body .tarifas-page #tariffAssistantDestination {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  padding-right: 34px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(226, 232, 240, 0.78) 50%),
    linear-gradient(135deg, rgba(226, 232, 240, 0.78) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 17px,
    calc(100% - 11px) 17px !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

body .tarifas-page #tariffAssistantKm,
body .tarifas-page #tariffAssistantWait {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

body .tarifas-page #tariffAssistantKm::-webkit-outer-spin-button,
body .tarifas-page #tariffAssistantKm::-webkit-inner-spin-button,
body .tarifas-page #tariffAssistantWait::-webkit-outer-spin-button,
body .tarifas-page #tariffAssistantWait::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

@media (max-width: 560px) {
  body .tarifas-page #tariffAssistant .tariff-assistant-grid {
    grid-template-columns: 1fr !important;
  }

  body .tarifas-page #tariffAssistant .tariff-field {
    grid-template-rows: auto 42px !important;
  }

  body .tarifas-page #tariffAssistantOrigin,
  body .tarifas-page #tariffAssistantDestination,
  body .tarifas-page #tariffAssistantKm,
  body .tarifas-page #tariffAssistantWait {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 42px !important;
    font-size: 16px !important;
  }
}


/* V3.28 - Admin Conductores */
.admin-drivers-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.admin-driver-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.07), transparent 34%),
    rgba(15, 23, 42, 0.46);
}

.admin-driver-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.admin-driver-head h4 {
  margin: 0 0 4px;
  color: #f8fafc;
  font-size: 1rem;
}

.admin-driver-head p,
.admin-driver-meta span {
  margin: 0;
  color: rgba(226, 232, 240, 0.68);
  line-height: 1.38;
}

.admin-driver-meta {
  display: grid;
  gap: 3px;
}

.admin-driver-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-driver-badge.ok {
  color: #99f6e4;
  border: 1px solid rgba(45, 212, 191, 0.30);
  background: rgba(45, 212, 191, 0.12);
}

.admin-driver-badge.muted {
  color: rgba(226, 232, 240, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
}

.admin-driver-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-driver-chips span {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.76rem;
  font-weight: 850;
}

.admin-driver-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-driver-actions .btn {
  min-height: 36px;
  text-decoration: none;
}

.admin-driver-chips span.admin-driver-pending {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.12);
}

.admin-driver-extra {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 8px;
}

.admin-driver-extra summary {
  cursor: pointer;
  color: #99f6e4;
  font-weight: 850;
  font-size: 0.82rem;
}

.admin-driver-full {
  margin-top: 8px;
  gap: 5px;
}

.admin-driver-full strong {
  display: block;
  margin-top: 8px;
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-driver-full strong:first-child {
  margin-top: 0;
}

.admin-driver-full span.admin-driver-pending {
  color: #fde68a;
}

.admin-driver-sin-perfil {
  margin: 8px 0 0;
  color: rgba(226, 232, 240, 0.6);
  font-size: 0.84rem;
}

@media (max-width: 820px) {
  .admin-drivers-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-driver-head {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .admin-drivers-summary {
    grid-template-columns: 1fr;
  }

  .admin-driver-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-driver-actions .btn {
    width: 100%;
  }
}


/* V3.28 - Admin Conductores: resumen claro sin VAN/PMR */
.admin-drivers-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 820px) {
  .admin-drivers-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .admin-drivers-summary {
    grid-template-columns: 1fr !important;
  }
}


/* V3.28 - Formación admin repetir test */
.admin-training-actions {
  gap: 8px !important;
}

.admin-training-actions .btn-secondary[data-training-action="resetTest"] {
  border-color: rgba(251, 191, 36, 0.30) !important;
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.08) !important;
}

.admin-training-actions .btn-secondary[data-training-action="resetTest"]:hover {
  border-color: rgba(251, 191, 36, 0.52) !important;
  color: #fef3c7 !important;
  background: rgba(251, 191, 36, 0.14) !important;
}


/* V3.28 - Admin Formación real + editor de preguntas */
.admin-training-panel {
  display: grid;
  gap: 16px;
}

.admin-training-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: end;
}

.admin-training-list {
  display: grid;
  gap: 12px;
}

.admin-training-user,
.admin-training-question-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.40);
}

.admin-training-user-main,
.admin-training-question-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-training-user h3,
.admin-training-question-card h4 {
  margin: 0 0 4px;
  color: #f8fafc;
}

.admin-training-user p,
.admin-training-question-card p {
  margin: 3px 0;
  color: rgba(226, 232, 240, 0.70);
}

.admin-training-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.admin-training-meta span {
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.50);
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.82rem;
}

.training-badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.training-badge.ok {
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.training-badge.warn {
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.30);
}

.training-badge.danger {
  background: rgba(248, 113, 113, 0.13);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.training-badge.muted {
  background: rgba(148, 163, 184, 0.11);
  color: rgba(226, 232, 240, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.admin-training-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-training-questions-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.admin-training-question-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background: rgba(15, 23, 42, 0.34);
}

.admin-training-question-form textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
}

.admin-training-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-training-question-controls {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 140px) auto;
  gap: 12px;
  align-items: end;
}

.admin-training-active-check {
  min-height: 44px;
  align-self: end;
}

.admin-training-question-options {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding-left: 0;
  list-style: none;
}

.admin-training-question-options li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.34);
  color: rgba(226, 232, 240, 0.78);
}

.admin-training-question-options li.is-correct {
  background: rgba(34, 197, 94, 0.11);
  color: #bbf7d0;
}

.admin-training-correct {
  color: rgba(226, 232, 240, 0.72);
}

.admin-training-question-card.is-inactive {
  opacity: 0.68;
}

@media (max-width: 760px) {
  .admin-training-filters,
  .admin-training-options-grid,
  .admin-training-question-controls {
    grid-template-columns: 1fr;
  }

  .admin-training-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-training-user-main,
  .admin-training-question-head {
    flex-direction: column;
  }

  .admin-training-actions .btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .admin-training-meta {
    grid-template-columns: 1fr;
  }
}

/* V3.28 - Admin Conductores: solo censo/contacto, sin tarjetas VAN/PMR */
.admin-driver-chips span:not(:last-child) {
  display: none !important;
}


/* V3.28 - Fix visible Admin Formación */
.admin-section[data-admin-panel="training"]:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.admin-section[data-admin-panel="training"]:not([hidden]) #adminTrainingPanel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* V3.28 - Admin preguntas base */
.admin-training-question-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-training-question-card .admin-training-question-head span {
  color: rgba(226, 232, 240, 0.62);
  font-weight: 850;
}


/* V3.28 - Preguntas activas históricas */
.admin-training-question-card.is-inactive {
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(15, 23, 42, 0.24) !important;
}

.admin-training-question-card.is-inactive h4,
.admin-training-question-card.is-inactive li {
  opacity: 0.72;
}

.admin-training-question-card.is-inactive .training-badge {
  background: rgba(148, 163, 184, 0.10) !important;
}


/* V3.28 - Formación aprobado dinámico */
.training-pass-rule {
  margin-bottom: 16px !important;
}

.training-pass-rule p {
  margin-top: 6px;
}


/* V3.28 - Menu margin global: reserva espacio para la hamburguesa */
@media (min-width: 760px) {
  body.app-page main,
  body.standard-page main,
  body.formacion-page main,
  body.auth-page main,
  main.auth-main {
    padding-left: max(84px, env(safe-area-inset-left)) !important;
  }

  body.app-page .global-signature-footer,
  body.standard-page .global-signature-footer,
  body.formacion-page .global-signature-footer {
    margin-left: 84px !important;
  }

  .hamburger-menu,
  .hamburger-button,
  .nav-toggle,
  [data-menu-toggle],
  button[aria-label*="menú" i],
  button[aria-label*="menu" i] {
    left: 18px !important;
    top: 108px !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 759px) {
  body.app-page main,
  body.standard-page main,
  body.formacion-page main,
  body.auth-page main,
  main.auth-main {
    padding-left: max(22px, env(safe-area-inset-left)) !important;
    padding-right: max(22px, env(safe-area-inset-right)) !important;
    padding-top: 82px !important;
  }

  .hamburger-menu,
  .hamburger-button,
  .nav-toggle,
  [data-menu-toggle],
  button[aria-label*="menú" i],
  button[aria-label*="menu" i] {
    left: 18px !important;
    top: 110px !important;
    z-index: 9999 !important;
  }
}

/* V3.28 - Formación admin siempre visible */
.training-dynamic-intro,
.training-admin-visible-note {
  color: rgba(226, 232, 240, 0.72);
  margin: 8px 0 0;
  line-height: 1.45;
}

.training-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

body.formation-test-started .formation-test-panel,
body.formacion-page .formation-test-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.formation-test-started #trainingForm,
body.formacion-page #trainingForm {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* V3.28 - Formación flujo normal */
body.formation-test-not-started #formationTestPanel,
body.formation-test-not-started .formation-test-panel {
  display: none !important;
}

body.formation-test-started #formationTestPanel,
body.formation-test-started .formation-test-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* V3.28 - Menú aislado + contenido centrado real */


body.app-page main,
body.standard-page main,
body.formacion-page main,
body.auth-page main,
main.auth-main {
  padding-left: 0 !important;
}

body.app-page .global-signature-footer,
body.standard-page .global-signature-footer,
body.formacion-page .global-signature-footer {
  margin-left: 0 !important;
}

.formacion-page main.page-shell {
  width: min(980px, calc(100% - 32px)) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 42px !important;
}

.formacion-page .page-shell-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.formacion-page .formation-page-hero {
  margin-bottom: 22px !important;
}

.formacion-page .formation-page-hero h1 {
  margin: 0 0 8px !important;
  font-size: clamp(2.15rem, 4vw, 3.2rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}

.formacion-page .formation-page-hero p {
  max-width: 820px !important;
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 560px) {
  .formacion-page main.page-shell {
    width: calc(100% - 24px) !important;
    padding-top: 66px !important;
  }

  .formacion-page .page-shell-card {
    padding: 20px 14px !important;
    border-radius: 24px !important;
  }

  .formacion-page .formation-page-hero h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }
}


/* =========================================================
   V3.28 - Layout responsive limpio
   Objetivo:
   - Páginas largas arriba, no centradas como login.
   - Una sola tarjeta principal visual.
   - Máximo ancho útil en móvil sin overflow horizontal.
   - Calculadora clásica queda como referencia y no se toca.
   ========================================================= */

@media (max-width: 1100px) {
  body.standard-page.auth-page,
  body.resource-page.auth-page,
  body.admin-page,
  body.quality-page,
  body.history-page,
  body.protocol-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.standard-page.auth-page main.auth-main,
  body.resource-page.auth-page main.auth-main,
  body.admin-page main.auth-main,
  body.quality-page main.auth-main,
  body.history-page main.auth-main,
  body.protocol-page main.auth-main,
  main.tarifas-page.auth-main {
    display: block !important;
    place-items: unset !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(68px + env(safe-area-inset-top)) clamp(10px, 2.6vw, 22px) 28px !important;
    box-sizing: border-box !important;
  }

  body.formacion-page main.page-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: calc(68px + env(safe-area-inset-top)) clamp(10px, 2.6vw, 22px) 28px !important;
    box-sizing: border-box !important;
  }

  body.standard-page .container.auth-shell,
  body.resource-page .container.auth-shell,
  body.admin-page .container.auth-shell,
  body.quality-page .container.auth-shell,
  body.history-page .container.auth-shell,
  main.tarifas-page .container.auth-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    box-sizing: border-box !important;
  }

  body.admin-page main.auth-main > .page-shell-card,
  body.quality-page main.auth-main > .page-shell-card,
  body.history-page main.auth-main > .page-shell-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.admin-page .auth-card,
  body.quality-page .auth-card,
  body.history-page .auth-card,
  body.resource-page .auth-card,
  main.tarifas-page .auth-card,
  body.formacion-page .page-shell-card,
  body.protocol-page .protocol-shell-card {
    width: min(100%, 980px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3.4vw, 28px) !important;
    border-radius: clamp(22px, 4vw, 30px) !important;
    box-sizing: border-box !important;
  }

  body.admin-page .auth-card,
  body.quality-page .auth-card,
  body.history-page .auth-card {
    overflow: visible !important;
  }

  body.formacion-page .page-shell-card {
    width: min(100%, 980px) !important;
  }

  body.protocol-page main.auth-main {
    padding-left: clamp(10px, 2.6vw, 22px) !important;
    padding-right: clamp(10px, 2.6vw, 22px) !important;
  }

  body.protocol-page .protocol-shell-card {
    width: min(100%, 980px) !important;
  }

  body.standard-page *,
  body.resource-page *,
  body.formacion-page * {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  body.standard-page.auth-page main.auth-main,
  body.resource-page.auth-page main.auth-main,
  body.admin-page main.auth-main,
  body.quality-page main.auth-main,
  body.history-page main.auth-main,
  body.protocol-page main.auth-main,
  main.tarifas-page.auth-main,
  body.formacion-page main.page-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: calc(66px + env(safe-area-inset-top)) !important;
  }

  body.admin-page .auth-card,
  body.quality-page .auth-card,
  body.history-page .auth-card,
  body.resource-page .auth-card,
  main.tarifas-page .auth-card,
  body.formacion-page .page-shell-card,
  body.protocol-page .protocol-shell-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  body.admin-page .auth-card-header h2,
  body.quality-page .auth-card-header h2,
  body.history-page .auth-card-header h2,
  body.resource-page .auth-card-header h2,
  main.tarifas-page .auth-card-header h2,
  body.formacion-page .formation-page-hero h1,
  body.protocol-page .protocol-hero h1 {
    font-size: clamp(2.25rem, 10.4vw, 3.25rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
  }

  body.admin-page .auth-card-header p,
  body.quality-page .auth-card-header p,
  body.history-page .auth-card-header p,
  body.resource-page .auth-card-header p,
  main.tarifas-page .auth-card-header p,
  body.formacion-page .formation-page-hero p,
  body.protocol-page .protocol-hero p {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1rem, 4.4vw, 1.25rem) !important;
    line-height: 1.35 !important;
  }

  body.admin-page .admin-grid,
  body.admin-page .admin-insights-grid,
  body.quality-page .quality-stats {
    gap: 10px !important;
  }

  body.quality-page .quality-primary-panel,
  body.quality-page .quality-driver-card,
  body.admin-page .admin-section,
  body.admin-page .admin-user-card,
  body.admin-page .admin-driver-card,
  body.history-page .admin-card,
  body.history-page .calc-card,
  main.tarifas-page .tariff-assistant,
  main.tarifas-page .resource-tools,
  main.tarifas-page .resource-card,
  body.formacion-page .formation-study-panel,
  body.formacion-page .formation-test-panel,
  body.formacion-page .training-test-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.formacion-page .formation-inline-protocol {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.formacion-page .formation-full-protocol-body > .protocol-shell-card,
  body.formacion-page .formation-inline-protocol .protocol-shell-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.formacion-page .protocol-section-head h2,
  body.protocol-page .protocol-section-head h2 {
    font-size: clamp(1.55rem, 7.4vw, 2.3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }

  body.formacion-page .protocol-card,
  body.protocol-page .protocol-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  body.formacion-page .protocol-card p,
  body.formacion-page .protocol-card li,
  body.protocol-page .protocol-card p,
  body.protocol-page .protocol-card li {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

@media (max-width: 640px) {
  main.tarifas-page .tariff-assistant summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  main.tarifas-page .tariff-assistant summary b {
    max-width: 132px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }

  main.tarifas-page .tariff-assistant-grid {
    grid-template-columns: 1fr !important;
  }

  main.tarifas-page .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  main.tarifas-page .resource-card,
  main.tarifas-page .tariff-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  main.tarifas-page .tariff-card-head,
  main.tarifas-page .tariff-card-head p,
  main.tarifas-page .tariff-wait-note,
  main.tarifas-page .tariff-wait-note span {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  main.tarifas-page .resource-table,
  main.tarifas-page .tariff-clean-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow: hidden !important;
  }

  main.tarifas-page .tariff-clean-table thead {
    display: none !important;
  }

  main.tarifas-page .tariff-clean-table tbody,
  main.tarifas-page .tariff-clean-table tr,
  main.tarifas-page .tariff-clean-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  main.tarifas-page .tariff-clean-table tr {
    margin: 0 0 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(15, 23, 42, 0.30) !important;
  }

  main.tarifas-page .tariff-clean-table td {
    display: grid !important;
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  main.tarifas-page .tariff-clean-table td::before {
    content: attr(data-label);
    color: rgba(226, 232, 240, 0.62);
    font-weight: 900;
  }

  main.tarifas-page .tariff-clean-table td[colspan],
  main.tarifas-page .tariff-clean-table .tariff-calc-cell {
    display: block !important;
  }

  main.tarifas-page .tariff-clean-table .tariff-calc-cell::before {
    display: none !important;
  }

  main.tarifas-page .tariff-clean-table .tariff-calc-cell .btn {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  body.standard-page.auth-page main.auth-main,
  body.resource-page.auth-page main.auth-main,
  body.admin-page main.auth-main,
  body.quality-page main.auth-main,
  body.history-page main.auth-main,
  body.protocol-page main.auth-main,
  main.tarifas-page.auth-main,
  body.formacion-page main.page-shell {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.admin-page .auth-card,
  body.quality-page .auth-card,
  body.history-page .auth-card,
  body.resource-page .auth-card,
  main.tarifas-page .auth-card,
  body.formacion-page .page-shell-card,
  body.protocol-page .protocol-shell-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* =========================================================
   V3.28 - Menú lateral experimental
   Escritorio: sidebar fijo.
   Móvil: drawer lateral colapsable.
   No toca lógica ni datos.
   ========================================================= */

:root {
  --eventos-sidebar-width: 286px;
  --eventos-page-gap: 18px;
}

/* ---------- Desktop / iPad horizontal ---------- */

@media (min-width: 1024px) {
  body.role-sidebar-ready:not(.login-page) {
    overflow-x: hidden !important;
  }




  body.role-sidebar-ready:not(.login-page) main.auth-main,
  body.role-sidebar-ready.formacion-page main.page-shell,
  body.role-sidebar-ready main.tarifas-page.auth-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 28px !important;
    padding-left: calc(var(--eventos-sidebar-width) + 34px) !important;
    box-sizing: border-box !important;
  }

  body.role-sidebar-ready:not(.login-page) main.auth-main > .page-shell-card,
  body.role-sidebar-ready:not(.login-page) .container.auth-shell,
  body.role-sidebar-ready.formacion-page .page-shell-card,
  body.role-sidebar-ready main.tarifas-page .container.auth-shell {
    max-width: none !important;
  }

  body.role-sidebar-ready:not(.login-page) .auth-card,
  body.role-sidebar-ready.formacion-page .page-shell-card,
  body.role-sidebar-ready.protocol-page .protocol-shell-card,
  body.role-sidebar-ready main.tarifas-page .auth-card {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.role-sidebar-ready.calculadora-page .auth-card {
    max-width: none !important;
  }

  body.role-sidebar-ready.admin-page .auth-card,
  body.role-sidebar-ready.quality-page .auth-card,
  body.role-sidebar-ready.history-page .auth-card {
    max-width: 1180px !important;
  }
}

/* ---------- Sidebar contenido ---------- */

body .app-nav[data-role-menu="true"] .role-menu-brand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 8px 8px 12px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13) !important;
}

body .app-nav[data-role-menu="true"] .role-menu-brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

body .app-nav[data-role-menu="true"] .role-menu-brand strong,
body .app-nav[data-role-menu="true"] .role-menu-profile strong {
  display: block !important;
  color: rgba(248, 250, 252, 0.96) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body .app-nav[data-role-menu="true"] .role-menu-brand span,
body .app-nav[data-role-menu="true"] .role-menu-profile span,
body .app-nav[data-role-menu="true"] .role-menu-section-title {
  display: block !important;
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
  /* V3.76 - Fija el interlineado del menu para que no dependa del
     line-height del body de la pagina activa (body.calculadora-page lo
     pone a 1.2, el resto lo dejan al valor por defecto del navegador -
     eso causaba una compresion visual minima del menu al navegar sin
     recarga desde calculadora.html a otra pagina). */
  line-height: 1.5 !important;
}

body .app-nav[data-role-menu="true"] .role-menu-scroll {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body .app-nav[data-role-menu="true"] .role-menu-section {
  display: grid !important;
  gap: 6px !important;
}

body .app-nav[data-role-menu="true"] .role-menu-section-title {
  padding: 4px 8px !important;
  margin: 0 !important;
  font-size: 0.68rem !important;
}

body .app-nav[data-role-menu="true"] a,
body .app-nav[data-role-menu="true"] button,
body .app-nav[data-role-menu="true"] button.link-button {
  width: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.84) !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body .app-nav[data-role-menu="true"] a:hover,
body .app-nav[data-role-menu="true"] button:hover,
body .app-nav[data-role-menu="true"] a[aria-current="page"] {
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.25), rgba(20, 184, 166, 0.12)) !important;
  border-color: rgba(45, 212, 191, 0.26) !important;
}

body .app-nav[data-role-menu="true"] a[aria-current="page"] {
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.88) !important;
}

body .app-nav[data-role-menu="true"] .role-menu-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 24px !important;
  color: rgba(204, 251, 241, 0.96) !important;
  background: rgba(45, 212, 191, 0.10) !important;
  border: 1px solid rgba(45, 212, 191, 0.16) !important;
  font-weight: 950 !important;
  font-size: 0.78rem !important;
}

body .app-nav[data-role-menu="true"] .role-menu-profile {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, 0.58) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
}

body .app-nav[data-role-menu="true"] .role-menu-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.34), rgba(124, 58, 237, 0.20)) !important;
  color: #ecfeff !important;
  font-weight: 950 !important;
}

/* ---------- Móvil: drawer lateral ---------- */

@media (max-width: 1023px) {



  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }

  body.role-sidebar-ready:not(.login-page) main.auth-main,
  body.role-sidebar-ready.formacion-page main.page-shell,
  body.role-sidebar-ready main.tarifas-page.auth-main {
    /* V3.76 - reducido de 62px a 24px: dejaba demasiado espacio muerto
       arriba en movil, sobre todo sumado al notch/isla dinamica real de
       un iPhone (ver captura de Arturo, "empieza muy abajo"). */
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
  }

  /* Mismo valor ANTES de que auth.js confirme el usuario y añada
     role-sidebar-ready, para que el contenido no cargue mas abajo y
     luego salte hacia arriba al quedar listo (ver aviso de Arturo). */
  body:not(.login-page):not(.role-sidebar-ready) main.auth-main,
  body.formacion-page:not(.role-sidebar-ready) main.page-shell {
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
  }
}

@media (max-width: 430px) {
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    width: min(88vw, 318px) !important;
  }

  body.role-sidebar-ready:not(.login-page) main.auth-main,
  body.role-sidebar-ready.formacion-page main.page-shell,
  body.role-sidebar-ready main.tarifas-page.auth-main {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* =========================================================
   V3.28 - Mobile full width inteligente
   Objetivo:
   - Llevar todas las páginas al patrón visual de Calculadora.
   - Contenido más ancho, menos cubos anidados.
   - Sin tocar lógica ni estructura de datos.
   ========================================================= */

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /*
    En móvil, las páginas largas no deben comportarse como login.
    Calculadora se deja prácticamente intacta porque ya es la referencia visual.
  */
  body:not(.calculadora-page).role-sidebar-ready main.auth-main,
  body.formacion-page.role-sidebar-ready main.page-shell,
  body.protocol-page.role-sidebar-ready main.auth-main,
  body.quality-page.role-sidebar-ready main.auth-main,
  body.admin-page.role-sidebar-ready main.auth-main,
  body.history-page.role-sidebar-ready main.auth-main,
  main.tarifas-page.auth-main {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 24px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /*
    Tarjeta principal: ocupa todo el ancho disponible.
    Dejamos un borde redondeado grande, pero pegado al ancho real del móvil.
  */
  body:not(.calculadora-page) .auth-card,
  body.formacion-page .page-shell-card,
  body.protocol-page .protocol-shell-card,
  body.quality-page .auth-card,
  body.admin-page .auth-card,
  body.history-page .auth-card,
  main.tarifas-page .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 26px !important;
    padding: 18px 18px 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
    Si hay envoltorios exteriores decorativos, en móvil se vuelven transparentes.
    Así evitamos 3 o 4 bordes acumulados.
  */
  body.admin-page main.auth-main > .page-shell-card,
  body.quality-page main.auth-main > .page-shell-card,
  body.history-page main.auth-main > .page-shell-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body:not(.calculadora-page) .container.auth-shell,
  main.tarifas-page .container.auth-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /*
    Títulos y textos: anchos completos, sin columnas artificiales.
  */
  body:not(.calculadora-page) .auth-card-header,
  body:not(.calculadora-page) .auth-card-header p,
  body.formacion-page .formation-page-hero,
  body.formacion-page .formation-page-hero p,
  body.protocol-page .protocol-hero,
  body.protocol-page .protocol-hero p,
  main.tarifas-page .auth-card-header,
  main.tarifas-page .auth-card-header p {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.calculadora-page) .auth-card-header h1,
  body:not(.calculadora-page) .auth-card-header h2,
  body.formacion-page .formation-page-hero h1,
  body.protocol-page .protocol-hero h1,
  main.tarifas-page .auth-card-header h1,
  main.tarifas-page .auth-card-header h2 {
    max-width: 100% !important;
    font-size: clamp(2.45rem, 11.5vw, 3.55rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.06em !important;
  }

  /*
    Formación: el protocolo embebido pierde el marco exterior.
    Se queda el contenido y las tarjetas internas, pero más ancho.
  */
  body.formacion-page .formation-inline-protocol,
  body.formacion-page .formation-study-panel,
  body.formacion-page .formation-test-panel,
  body.formacion-page .training-test-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.formacion-page .formation-inline-protocol {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.formacion-page .formation-inline-protocol .protocol-shell-card,
  body.formacion-page .formation-full-protocol-body > .protocol-shell-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.formacion-page .protocol-summary-grid,
  body.protocol-page .protocol-summary-grid {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  body.formacion-page .protocol-summary-item,
  body.protocol-page .protocol-summary-item,
  body.formacion-page .protocol-card,
  body.protocol-page .protocol-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.formacion-page .protocol-section-head,
  body.protocol-page .protocol-section-head {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.formacion-page .protocol-section-head h2,
  body.protocol-page .protocol-section-head h2 {
    min-width: 0 !important;
    font-size: clamp(1.9rem, 9.4vw, 2.7rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.05em !important;
  }

  /*
    Tarjetas/listas generales: nada puede forzar ancho superior.
  */
  body.quality-page .quality-primary-panel,
  body.quality-page .quality-driver-card,
  body.quality-page .quality-stats,
  body.quality-page .quality-toolbar,
  body.admin-page .admin-section,
  body.admin-page .admin-grid,
  body.admin-page .admin-driver-card,
  body.admin-page .admin-user-card,
  body.history-page .calc-card,
  body.history-page .history-list,
  main.tarifas-page .tariff-assistant,
  main.tarifas-page .resource-tools,
  main.tarifas-page .resource-card,
  main.tarifas-page .tariff-card,
  main.tarifas-page .tariff-clean-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
    Evitar cortes por la derecha.
  */
  body:not(.calculadora-page) *,
  main.tarifas-page * {
    min-width: 0;
  }

  body:not(.calculadora-page) p,
  body:not(.calculadora-page) li,
  body:not(.calculadora-page) span,
  body:not(.calculadora-page) strong,
  body:not(.calculadora-page) h1,
  body:not(.calculadora-page) h2,
  body:not(.calculadora-page) h3,
  main.tarifas-page p,
  main.tarifas-page li,
  main.tarifas-page span,
  main.tarifas-page strong,
  main.tarifas-page h1,
  main.tarifas-page h2,
  main.tarifas-page h3 {
    overflow-wrap: break-word !important;
  }

  /*
    Inputs, selects y buscadores a ancho completo real.
  */
  body:not(.calculadora-page) input,
  body:not(.calculadora-page) select,
  body:not(.calculadora-page) textarea,
  main.tarifas-page input,
  main.tarifas-page select,
  main.tarifas-page textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) {
  body:not(.calculadora-page) .auth-card,
  body.formacion-page .page-shell-card,
  body.protocol-page .protocol-shell-card,
  body.quality-page .auth-card,
  body.admin-page .auth-card,
  body.history-page .auth-card,
  main.tarifas-page .auth-card {
    border-radius: 24px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.formacion-page .protocol-summary-item,
  body.protocol-page .protocol-summary-item,
  body.formacion-page .protocol-card,
  body.protocol-page .protocol-card {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}


/* =========================================================
   V3.28 - Polish móvil: menú estable + protocolo más fino
   ========================================================= */

/* ---------- Menú móvil: estructura robusta ---------- */

@media (max-width: 1023px) {

  body.role-sidebar-ready .app-nav[data-role-menu="true"] > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* V3.76 - Reglas unicas consolidadas de marca/scroll/perfil del cajon
     movil. Sustituyen declaraciones duplicadas de estos mismos selectores
     repartidas en varios bloques (ver A4 movil - subelementos en memoria
     del proyecto) - valores confirmados consultando el CSSOM real. */
  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-brand {
    gap: 9px !important;
    padding: 6px 58px 9px 6px !important;
    flex: 0 0 auto !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-brand img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-scroll {
    overflow-y: visible !important;
    padding: 0 !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    overflow-x: visible !important;
    scrollbar-width: thin !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-profile {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 15px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 7px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-profile strong,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-brand strong {
    font-size: 0.93rem !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-profile span,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-brand span {
    font-size: 0.62rem !important;
    letter-spacing: 0.18em !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-logout,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button[data-role-menu-logout] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 1rem !important;
    border-radius: 16px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] a {
    flex: 0 0 auto !important;
    white-space: normal !important;
  }
}

@media (max-height: 760px) and (max-width: 1023px) {
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    gap: 7px !important;
    padding: 12px !important;
  }

  /* V3.76 - Ajustes consolidados de marca/perfil para pantalla movil corta
     (ver A4 movil - subelementos en memoria del proyecto). */
  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-brand {
    padding-bottom: 6px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-brand img {
    width: 34px !important;
    height: 34px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-profile {
    padding: 7px !important;
    margin-top: 5px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] a,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button.link-button {
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 0.9rem !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-section {
    gap: 4px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-section-title {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

}

/* ---------- Protocolo / Formación: títulos menos gigantes ---------- */

@media (max-width: 760px) {
  body.formacion-page .protocol-section-head,
  body.protocol-page .protocol-section-head {
    align-items: center !important;
    gap: 9px !important;
    margin-top: 18px !important;
    margin-bottom: 10px !important;
  }

  body.formacion-page .protocol-section-number,
  body.protocol-page .protocol-section-number {
    flex: 0 0 auto !important;
    transform: translateY(1px) !important;
  }

  body.formacion-page .protocol-section-head h2,
  body.protocol-page .protocol-section-head h2 {
    font-size: clamp(1.55rem, 7.4vw, 2.18rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
  }

  body.formacion-page .protocol-card h3,
  body.protocol-page .protocol-card h3 {
    font-size: clamp(1.08rem, 4.9vw, 1.35rem) !important;
    line-height: 1.12 !important;
  }

  body.formacion-page .protocol-card li,
  body.protocol-page .protocol-card li,
  body.formacion-page .protocol-card p,
  body.protocol-page .protocol-card p {
    font-size: clamp(0.98rem, 4.2vw, 1.12rem) !important;
    line-height: 1.38 !important;
  }

  body.formacion-page .protocol-card,
  body.protocol-page .protocol-card {
    padding: 15px !important;
    border-radius: 22px !important;
  }
}

/* ---------- Iconos visuales en resumen del protocolo ---------- */

body.formacion-page .protocol-summary-item,
body.protocol-page .protocol-summary-item {
  position: relative !important;
  padding-right: 58px !important;
}

body.formacion-page .protocol-summary-item::after,
body.protocol-page .protocol-summary-item::after {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(153, 246, 228, 0.96) !important;
  background: rgba(20, 184, 166, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.25) !important;
  font-size: 1.14rem !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body.formacion-page .protocol-summary-item:nth-child(1)::after,
body.protocol-page .protocol-summary-item:nth-child(1)::after {
  content: "✓" !important;
}

body.formacion-page .protocol-summary-item:nth-child(2)::after,
body.protocol-page .protocol-summary-item:nth-child(2)::after {
  content: "▣" !important;
}

body.formacion-page .protocol-summary-item:nth-child(3)::after,
body.protocol-page .protocol-summary-item:nth-child(3)::after {
  content: "✈" !important;
}

body.formacion-page .protocol-summary-item:nth-child(4)::after,
body.protocol-page .protocol-summary-item:nth-child(4)::after {
  content: "€" !important;
}

@media (max-width: 430px) {
  body.formacion-page .protocol-summary-item,
  body.protocol-page .protocol-summary-item {
    padding-right: 50px !important;
  }

  body.formacion-page .protocol-summary-item::after,
  body.protocol-page .protocol-summary-item::after {
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }
}


/* =========================================================
   V3.28 - Drawer móvil estable y compacto
   Objetivo:
   - Que no cambien posiciones según página activa.
   - Que Cerrar sesión no aparezca/desaparezca con micro-scroll.
   - Compactar ligeramente sin perder estética.
   ========================================================= */

@media (max-width: 1023px) {


  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-section {
    gap: 3px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-section-title {
    padding: 3px 7px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.19em !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] a,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button.link-button {
    min-height: 34px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    border-radius: 13px !important;
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-icon {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] a[aria-current="page"] {
    box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.88) !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-logout,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button[data-role-menu-logout] {
    flex: 0 0 auto !important;
    margin-top: 5px !important;
    min-height: 36px !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
  }
}

/* iPhone con poca altura útil: todavía más compacto */
@media (max-width: 1023px) and (max-height: 760px) {
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    padding: 10px !important;
    gap: 5px !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-top)) !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"] a,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button.link-button {
    min-height: 31px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 0.82rem !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-section-title {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    font-size: 0.58rem !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"] .role-menu-logout,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button[data-role-menu-logout] {
    margin-top: 3px !important;
    min-height: 32px !important;
  }
}


/* =========================================================
   V3.28 - Botón menú móvil siempre visible y anclado
   Objetivo:
   - La hamburguesa no desaparece según página.
   - Al abrir el drawer, el botón se pega al borde del menú.
   - Cerrado muestra ☰, abierto muestra ‹.
   ========================================================= */

@media (max-width: 1023px) {








}

@media (max-width: 430px) {

}


/* =========================================================
   V3.28 - Botón menú móvil simple y fiable
   Corrige V3.28: nada de botón transparente ni desplazamientos raros.
   Cerrado: ☰ / Abierto: ×
   ========================================================= */

@media (max-width: 1023px) {










}


/* =========================================================
   V3.28 - Drawer móvil con pestaña propia
   Solución limpia:
   - El botón antiguo se oculta en móvil.
   - El propio drawer lleva una pestaña ☰ / ‹‹.
   - Cerrado deja visible solo la pestaña.
   - Abierto la pestaña queda anclada al borde derecho del menú.
   ========================================================= */

@media (max-width: 1023px) {
  /* El botón antiguo deja de competir */
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"] > :not(.role-menu-edge-toggle) {
    transition: opacity 0.16s ease !important;
  }

  body.role-sidebar-ready:not(.menu-open) .app-nav[data-role-menu="true"] > :not(.role-menu-edge-toggle) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.role-sidebar-ready.menu-open .app-nav[data-role-menu="true"] > :not(.role-menu-edge-toggle) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }





  .role-menu-edge-open {
    font-size: 1.55rem !important;
    transform: translateY(-1px) !important;
  }

  .role-menu-edge-close {
    display: none !important;
    font-size: 1.22rem !important;
    letter-spacing: -0.18em !important;
    transform: translateX(-2px) !important;
  }

  body.role-sidebar-ready.menu-open .role-menu-edge-open {
    display: none !important;
  }

  body.role-sidebar-ready.menu-open .role-menu-edge-close {
    display: block !important;
  }




  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }

}

@media (max-width: 430px) {
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    width: min(86vw, 322px) !important;
    transform: translateX(calc(-100% + 62px)) !important;
  }

  body.role-sidebar-ready.menu-open .app-nav[data-role-menu="true"] {
    transform: translateX(8px) !important;
  }




}


/* =========================================================
   V3.28 - Drawer móvil cerrado de verdad
   Corrige V3.28:
   - El menú cerrado queda totalmente fuera.
   - Nuevo botón flotante propio: ☰ cerrado / ‹‹ abierto.
   - Se ocultan el botón antiguo y la pestaña interna anterior.
   ========================================================= */

@media (max-width: 1023px) {
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"] > :not(.role-menu-edge-toggle) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }





  .role-menu-float-open {
    font-size: 1.55rem !important;
    transform: translateY(-1px) !important;
  }

  .role-menu-float-close {
    display: none !important;
    font-size: 1.22rem !important;
    letter-spacing: -0.18em !important;
    transform: translateX(-2px) !important;
  }



  body.role-sidebar-ready.menu-open .role-menu-float-open {
    display: none !important;
  }

  body.role-sidebar-ready.menu-open .role-menu-float-close {
    display: block !important;
  }

  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}

@media (max-width: 430px) {
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    width: min(86vw, 322px) !important;
  }

  body.role-sidebar-ready.menu-open .app-nav[data-role-menu="true"] {
    transform: translateX(8px) !important;
  }


}


/* =========================================================
   V3.28 - Menú móvil desde la derecha + desktop limpio
   - Desktop: sidebar izquierdo fijo, sin botones raros.
   - Móvil: botón ☰ arriba derecha.
   - Abierto: drawer entra desde derecha y botón cambia a ‹‹.
   ========================================================= */

/* Limpieza general de restos V3.28/V3.28 */


@media (min-width: 1024px) {

}

@media (max-width: 1023px) {
  /* El botón antiguo queda apagado para que no compita */
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Drawer real desde la derecha */


  body.role-sidebar-ready .app-nav[data-role-menu="true"] > :not(.role-menu-edge-toggle) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Botón flotante nuevo: cerrado arriba derecha */




  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}

@media (max-width: 430px) {
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    width: min(86vw, 322px) !important;
  }

  body.role-sidebar-ready.menu-open .app-nav[data-role-menu="true"] {
    transform: translateX(-8px) !important;
  }


}


/* =========================================================
   V3.28 - Botón de menú integrado en el globo móvil
   - Móvil: botón dentro de la tarjeta principal, arriba derecha.
   - No flota al hacer scroll.
   - Drawer abre desde derecha.
   - Cierre dentro del drawer, arriba derecha.
   - Desktop limpio sin botones extra.
   ========================================================= */

@media (min-width: 1024px) {
  /* V3.76 - Consolidacion del boton hamburguesa (.role-menu-page-toggle) y
     el boton cerrar del cajon (.role-menu-drawer-close). Sustituye
     declaraciones duplicadas repartidas en muchos bloques (ver A4 movil -
     toggle en memoria del proyecto). No se reincorporan aqui los
     selectores ya muertos que iban mezclados en los bloques originales
     (.role-menu-float-toggle, .role-menu-edge-toggle, #globalMenuToggle,
     .menu-toggle) - no coinciden con ningun elemento real del HTML/JS
     actual. */
  .role-menu-page-toggle,
  .role-menu-drawer-close {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  /* Apagamos definitivamente botones flotantes/antiguos */
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .role-menu-page-toggle-host {
    position: relative !important;
  }

  body.role-sidebar-ready .role-menu-page-toggle-host > button.role-menu-page-toggle,
  body.role-sidebar-ready button[data-role-menu-page-toggle] {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(45, 212, 191, 0.24), transparent 42%),
      rgba(15, 23, 42, 0.90) !important;
    color: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 20 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 1.42rem !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
  }

  /*
    Dejamos un poco de aire arriba a la derecha para que el botón no pise logo/título.
    En calculadora casi no molesta, pero en tarjetas con título largo ayuda.
  */
  body.role-sidebar-ready .role-menu-page-toggle-host > .auth-card-header,
  body.role-sidebar-ready .role-menu-page-toggle-host > .app-header,
  body.role-sidebar-ready .role-menu-page-toggle-host > .protocol-hero,
  body.role-sidebar-ready .role-menu-page-toggle-host > .formation-page-hero {
    padding-right: 54px !important;
  }

  /* Drawer desde la derecha */


  body.role-sidebar-ready .app-nav[data-role-menu="true"] > button.role-menu-drawer-close,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] button[data-role-menu-drawer-close] {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(45, 212, 191, 0.42) !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(45, 212, 191, 0.34), transparent 42%),
      rgba(15, 23, 42, 0.96) !important;
    color: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 2rem !important;
    font-weight: 750 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    z-index: 60 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}

@media (max-width: 430px) {
  body.role-sidebar-ready .role-menu-page-toggle-host > button.role-menu-page-toggle,
  body.role-sidebar-ready button[data-role-menu-page-toggle] {
    top: 12px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    width: min(86vw, 322px) !important;
  }
}


/* =========================================================
   V3.28 - Corrección real botón menú móvil derecha
   - Botón abrir dentro del globo, arriba derecha.
   - Drawer desde derecha.
   - Botón cerrar X dentro del drawer, arriba derecha.
   - Neutraliza estilos viejos de botones del menú.
   ========================================================= */

@media (max-width: 1023px) {
  /* Fuera botones viejos/flotantes */
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* El host debe permitir posicionar el botón en su esquina */
  body.role-sidebar-ready .role-menu-page-toggle-host,
  body.formacion-page.role-sidebar-ready .page-shell-card,
  body.formacion-page.role-sidebar-ready .formation-page-hero {
    position: relative !important;
    overflow: visible !important;
  }

  /* Botón ABRIR dentro del globo, arriba derecha */

  /* En abierto lo ocultamos, porque el cierre vive dentro del drawer */
  body.role-sidebar-ready.menu-open button.role-menu-page-toggle,
  body.role-sidebar-ready.menu-open button[data-role-menu-page-toggle] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Drawer desde derecha */


  /* Botón CERRAR dentro del drawer. Selector fuerte para ganar a .app-nav button */

  /* Nada de pseudoelementos raros en abrir/cerrar */
  body.role-sidebar-ready button.role-menu-page-toggle::before,
  body.role-sidebar-ready button.role-menu-page-toggle::after,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] > button.role-menu-drawer-close::before,
  body.role-sidebar-ready .app-nav[data-role-menu="true"] > button.role-menu-drawer-close::after {
    content: none !important;
    display: none !important;
  }

  /* Evita que el botón cerrar pise marca */

  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}

@media (max-width: 430px) {

  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    width: min(86vw, 322px) !important;
  }
}


/* =========================================================
   V3.28 - Estabilización final menú desktop/móvil + Formación
   Objetivo:
   - Desktop/iMac: sidebar limpio, sin X ni botones móviles.
   - Móvil: botón dentro del globo arriba derecha.
   - Formación no pierde el botón ni hereda menús antiguos.
   - Evita flash visual del drawer a la izquierda.
   ========================================================= */

/* Evita precarga visual de menús antes de que el JS de roles termine */
body:not(.role-sidebar-ready) .app-nav[data-role-menu="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Desktop limpio ---------- */
@media (min-width: 1024px) {
  body.role-sidebar-ready .role-menu-page-toggle,
  body.role-sidebar-ready .role-menu-drawer-close,
  body.role-sidebar-ready .mobile-menu-toggle,
  body.role-sidebar-ready button[data-role-menu-page-toggle],
  body.role-sidebar-ready button[data-role-menu-drawer-close] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  /* V3.76 - Reglas unicas consolidadas de marca/scroll/perfil (escritorio),
     ver A4 movil - subelementos en memoria del proyecto. */
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-brand {
    gap: 9px !important;
    padding: 6px 6px 9px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-brand img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-scroll {
    overflow-y: hidden !important;
    gap: 6px !important;
    overflow-x: hidden !important;
    flex: 0 0 auto !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-profile {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 15px !important;
    margin-top: 4px !important;
    flex: 0 0 auto !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-section {
    gap: 3px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-section-title {
    padding: 2px 7px !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.18em !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] a,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button.link-button {
    min-height: 34px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    border-radius: 13px !important;
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-icon {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
  }


  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-logout,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button[data-role-menu-logout] {
    min-height: 32px !important;
    margin-top: 2px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ---------- Móvil estable ---------- */
@media (max-width: 1023px) {
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  body.role-sidebar-ready button.role-menu-page-toggle,
  body.role-sidebar-ready button[data-role-menu-page-toggle],
  body.formacion-page.role-sidebar-ready button.role-menu-page-toggle,
  body.formacion-page.role-sidebar-ready button[data-role-menu-page-toggle] {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(45, 212, 191, 0.24), transparent 42%),
      rgba(15, 23, 42, 0.92) !important;
    color: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 60 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 1.38rem !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
  }


  /* V3.76 - Regla unica consolidada del cajon movil cerrado. Sustituye 8
     declaraciones duplicadas del mismo selector (ver A4 movil en memoria del
     proyecto) - valores confirmados consultando el CSSOM real, no leidos a
     ojo del codigo. */
  body.role-sidebar-ready .app-nav[data-role-menu="true"] {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 10px !important;
    width: min(86vw, 322px) !important;
    max-width: calc(100vw - 18px) !important;
    height: auto !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 58px 10px 10px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(36, 240, 208, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(2, 8, 23, 0.97)) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56) !important;
    z-index: 145 !important;
    overflow: hidden !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
    transform: translateX(calc(100% + 24px)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: transform 0.24s ease !important;
  }


  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}


/* =========================================================
   V3.28 - Formación no borra el botón + sin flash menú antiguo
   ========================================================= */

/* Ocultar desde carga inicial los botones/menús antiguos de cada HTML.
   Así no aparece el drawer izquierdo un segundo antes del menú nuevo. */
@media (max-width: 1023px) {
  body:not(.login-page) .mobile-menu-toggle,
  body:not(.login-page) #mobileMenuPanel,
  body:not(.login-page) .mobile-menu-panel,
  body:not(.login-page) .app-nav:not([data-role-menu="true"]) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* El menú nuevo, incluso antes de role-sidebar-ready, queda preparado a la derecha y oculto. */
  .app-nav[data-role-menu="true"] {
    left: auto !important;
    right: 0 !important;
    transform: translateX(calc(100% + 24px)) !important;
  }

  body:not(.role-sidebar-ready) .app-nav[data-role-menu="true"] {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Formación: el botón debe quedar por encima de su hero y no lo puede esconder ningún overflow interno. */
  body.formacion-page.role-sidebar-ready .page-shell-card,
  body.formacion-page.role-sidebar-ready main.page-shell {
    position: relative !important;
    overflow: visible !important;
  }

  body.formacion-page.role-sidebar-ready button.role-menu-page-toggle,
  body.formacion-page.role-sidebar-ready button[data-role-menu-page-toggle] {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 300 !important;
  }

  body.formacion-page.role-sidebar-ready.menu-open button.role-menu-page-toggle,
  body.formacion-page.role-sidebar-ready.menu-open button[data-role-menu-page-toggle] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   V3.28 - Menú móvil estable dentro del globo + Formación fija
   - Desktop/iMac: sidebar sin botones móviles.
   - Móvil: botón abrir dentro de tarjeta arriba derecha.
   - Formación: botón estático en HTML, no lo borra JS.
   - Drawer desde derecha sin flash izquierdo.
   ========================================================= */

/* Formación conserva header antiguo en HTML, pero el menú real es el de roles */
body.formacion-page > header.formacion-nav-host {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Evitar que cualquier menú antiguo pinte antes del menú de roles */
body:not(.login-page) .mobile-menu-toggle,
body:not(.login-page) #mobileMenuPanel,
body:not(.login-page) .mobile-menu-panel,
body:not(.login-page) .app-nav:not([data-role-menu="true"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Desktop/iMac: no botones móviles, menú compacto ---------- */
@media (min-width: 1024px) {
  body.role-sidebar-ready .role-menu-page-toggle,
  body.role-sidebar-ready .role-menu-drawer-close,
  body.role-sidebar-ready .mobile-menu-toggle,
  body.role-sidebar-ready button[data-role-menu-page-toggle],
  body.role-sidebar-ready button[data-role-menu-drawer-close] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-section {
    gap: 2px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-section-title {
    padding: 2px 7px !important;
    font-size: 0.58rem !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] a,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button.link-button {
    min-height: 32px !important;
    padding: 5px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
    line-height: 1.04 !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-icon {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
  }


  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-logout,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button[data-role-menu-logout] {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    margin-top: 1px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ---------- Móvil: botón dentro del globo, drawer desde derecha ---------- */
@media (max-width: 1023px) {
  body.role-sidebar-ready .mobile-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.role-sidebar-ready .role-menu-page-toggle-host,
  body.formacion-page.role-sidebar-ready .page-shell-card {
    position: relative !important;
    overflow: visible !important;
  }

  body.role-sidebar-ready button.role-menu-page-toggle,
  body.role-sidebar-ready button[data-role-menu-page-toggle],
  body.formacion-page.role-sidebar-ready .page-shell-card > button.role-menu-page-toggle {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(45, 212, 191, 0.24), transparent 42%),
      rgba(15, 23, 42, 0.92) !important;
    color: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 300 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 1.38rem !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"],
  .app-nav[data-role-menu="true"] {
    left: auto !important;
    right: 0 !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    bottom: 10px !important;
    width: min(86vw, 322px) !important;
    max-width: calc(100vw - 18px) !important;
    height: auto !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top)) !important;
    transform: translateX(calc(100% + 24px)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transition: transform 0.24s ease !important;
    z-index: 145 !important;
    padding-top: 58px !important;
  }


  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }

  body.formacion-page.role-sidebar-ready .formation-page-hero {
    padding-right: 54px !important;
  }
}


/* =========================================================
   V3.28 - Formación: botón menú blindado
   ========================================================= */

@media (max-width: 1023px) {
  body.formacion-page > header.formacion-nav-host,
  body.formacion-page .app-header.formacion-nav-host,
  body.formacion-page .app-header.formacion-nav-host .app-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.formacion-page .page-shell-card {
    position: relative !important;
    overflow: visible !important;
  }

  body.formacion-page button.formation-hard-menu-toggle {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(45, 212, 191, 0.24), transparent 42%),
      rgba(15, 23, 42, 0.94) !important;
    color: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 1.38rem !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body.formacion-page button.formation-hard-menu-toggle::before,
  body.formacion-page button.formation-hard-menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  body.formacion-page.menu-open button.formation-hard-menu-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.formacion-page .app-nav[data-role-menu="true"] {
    left: auto !important;
    right: 0 !important;
    transform: translateX(calc(100% + 24px)) !important;
  }

  body.formacion-page.menu-open .app-nav[data-role-menu="true"] {
    transform: translateX(-8px) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.formacion-page .formation-page-hero {
    padding-right: 54px !important;
  }
}


/* =========================================================
   V3.28 - Formación: botón real independiente
   ========================================================= */

@media (max-width: 1023px) {
  body.formacion-page .page-shell-card {
    position: relative !important;
    overflow: visible !important;
  }

  body.formacion-page button.formation-menu-button-real {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    background:
      radial-gradient(circle at 34% 24%, rgba(45, 212, 191, 0.24), transparent 42%),
      rgba(15, 23, 42, 0.94) !important;
    color: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 2147483647 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-size: 1.38rem !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body.formacion-page button.formation-menu-button-real::before,
  body.formacion-page button.formation-menu-button-real::after {
    content: none !important;
    display: none !important;
  }

  body.formacion-page.formation-menu-open button.formation-menu-button-real {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.formacion-page .formation-page-hero {
    padding-right: 54px !important;
  }

  body.formacion-page .app-nav[data-role-menu="true"] {
    left: auto !important;
    right: 0 !important;
    transform: translateX(calc(100% + 24px)) !important;
  }

  body.formacion-page.formation-menu-open .app-nav[data-role-menu="true"],
  body.formacion-page.menu-open .app-nav[data-role-menu="true"] {
    transform: translateX(-8px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.formacion-page.formation-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}

/* Blindaje extra: ninguna regla antigua puede esconder este botón salvo cuando el menú de Formación está abierto */
@media (max-width: 1023px) {

}


/* =========================================================
   V3.28 - Estructura única menú global
   Desktop: sidebar fijo sin botones móviles.
   Móvil: botón dentro de la tarjeta principal + drawer derecho.
   Formación deja de ser caso especial.
   ========================================================= */

body:not(.role-sidebar-ready) .app-nav[data-role-menu="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 1024px) {
  body.role-sidebar-ready:not(.login-page) .navbar,
  body.role-sidebar-ready:not(.login-page) .mobile-menu-toggle,
  body.role-sidebar-ready:not(.login-page) #mobileMenuPanel,
  body.role-sidebar-ready:not(.login-page) .mobile-menu-panel,
  body.role-sidebar-ready:not(.login-page) .role-menu-page-toggle,
  body.role-sidebar-ready:not(.login-page) .role-menu-drawer-close,
  body.role-sidebar-ready:not(.login-page) .formation-menu-button-real,
  body.role-sidebar-ready:not(.login-page) .formation-hard-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] {
    position: fixed !important;
    inset: 16px auto 16px 16px !important;
    width: var(--eventos-sidebar-width) !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 12px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(36, 240, 208, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.94)) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42) !important;
    z-index: 70 !important;
    overflow: hidden !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  body.role-sidebar-ready:not(.login-page) main.auth-main,
  body.role-sidebar-ready.formacion-page main.page-shell,
  body.role-sidebar-ready main.tarifas-page.auth-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 28px !important;
    padding-left: 320px !important;
    box-sizing: border-box !important;
  }

  body.role-sidebar-ready:not(.login-page) .auth-card,
  body.role-sidebar-ready.formacion-page .page-shell-card,
  body.role-sidebar-ready.protocol-page .protocol-shell-card,
  body.role-sidebar-ready main.tarifas-page .auth-card {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.role-sidebar-ready.calculadora-page .auth-card { max-width: none !important; }
  body.role-sidebar-ready.admin-page .auth-card,
  body.role-sidebar-ready.quality-page .auth-card,
  body.role-sidebar-ready.history-page .auth-card { max-width: 1180px !important; }


  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-section { gap: 3px !important; }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-section-title {
    padding: 2px 7px !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.18em !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] a,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button.link-button {
    min-height: 34px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    border-radius: 13px !important;
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-icon {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
  }


  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] .role-menu-logout,
  body.role-sidebar-ready:not(.login-page) .app-nav[data-role-menu="true"] button[data-role-menu-logout] {
    min-height: 32px !important;
    margin-top: 2px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 1023px) {
  body:not(.login-page) .navbar,
  body:not(.login-page) .mobile-menu-toggle,
  body:not(.login-page) #mobileMenuPanel,
  body:not(.login-page) .mobile-menu-panel,
  body:not(.login-page) .nav-links,
  body:not(.login-page) .app-nav:not([data-role-menu="true"]),
  body.role-sidebar-ready .formation-menu-button-real,
  body.role-sidebar-ready .formation-hard-menu-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }


  body.role-sidebar-ready .app-nav[data-role-menu="true"],
  .app-nav[data-role-menu="true"] {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    bottom: 10px !important;
    width: min(86vw, 322px) !important;
    max-width: calc(100vw - 18px) !important;
    height: auto !important;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top)) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(calc(100% + 24px)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transition: transform 0.24s ease !important;
    z-index: 145 !important;
    padding-top: 58px !important;
    box-sizing: border-box !important;
  }

  /* V3.76 - Regla unica consolidada del cajon movil abierto (.menu-open).
     Sustituye 12 declaraciones duplicadas del mismo selector (ver A4 movil en
     memoria del proyecto) - valores confirmados consultando el CSSOM real,
     no leidos a ojo del codigo. */
  body.role-sidebar-ready.menu-open .app-nav[data-role-menu="true"] {
    transform: translateX(-8px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding-left: 16px !important;
    padding-top: 58px !important;
    z-index: 145 !important;
  }


  body.role-sidebar-ready.menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 110 !important;
  }
}

/* =========================================================
   V3.29 - Formación: permitir scroll en iMac/escritorio
   Causa probable: .auth-page antiguo fuerza height:100dvh + overflow:hidden.
   Formación es página larga cuando se abre el protocolo.
   ========================================================= */

@media (min-width: 1024px) {
  body.formacion-page.auth-page,
  body.formacion-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.formacion-page main.page-shell,
  body.formacion-page main.auth-main {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    display: block !important;
  }

  body.formacion-page .page-shell-card,
  body.formacion-page .auth-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.formacion-page #formationInlineProtocol,
  body.formacion-page .formation-inline-protocol,
  body.formacion-page .formation-full-protocol-body,
  body.formacion-page .formation-full-protocol-body > .protocol-shell-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* =========================================================
   V3.30 - Calidad operativa premium
   UI y comportamiento visual. No toca datos ni Firestore.
   ========================================================= */

body.quality-page .quality-primary-panel {
  border-radius: 28px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.10), transparent 34%),
    rgba(15, 23, 42, 0.36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.quality-page .quality-driver-card {
  position: relative !important;
  border-radius: 24px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.46)) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.quality-page .quality-driver-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: rgba(45, 212, 191, 0.0) !important;
  transition: background 0.18s ease !important;
}

body.quality-page .quality-driver-card.is-active-panel,
body.quality-page .quality-driver-card.is-history-open {
  border-color: rgba(45, 212, 191, 0.34) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32) !important;
}

body.quality-page .quality-driver-card.is-active-panel::before,
body.quality-page .quality-driver-card.is-history-open::before {
  background: rgba(45, 212, 191, 0.86) !important;
}

body.quality-page .quality-driver-title-line strong {
  letter-spacing: -0.02em !important;
}

body.quality-page .quality-license-line {
  opacity: 0.78 !important;
}

body.quality-page .quality-driver-chips,
body.quality-page .quality-actions {
  gap: 8px !important;
}

body.quality-page .quality-chip,
body.quality-page .quality-event-badge {
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(15, 23, 42, 0.50) !important;
  color: rgba(226, 232, 240, 0.92) !important;
}

body.quality-page .quality-chip-warning {
  border-color: rgba(251, 191, 36, 0.34) !important;
  background: rgba(251, 191, 36, 0.12) !important;
  color: rgba(254, 243, 199, 0.96) !important;
}

body.quality-page .quality-event-badge {
  background: rgba(45, 212, 191, 0.16) !important;
  color: rgba(204, 251, 241, 0.98) !important;
}

body.quality-page .quality-floating-observation-panel {
  border-radius: 26px !important;
  border: 1px solid rgba(45, 212, 191, 0.26) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.12), transparent 36%),
    rgba(15, 23, 42, 0.78) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34) !important;
  overflow: hidden !important;
}

body.quality-page .quality-history {
  margin-top: 14px !important;
  border-radius: 22px !important;
  background: rgba(2, 6, 23, 0.24) !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  overflow: hidden !important;
}

body.quality-page .quality-history[hidden] {
  display: none !important;
}

body.quality-page .quality-history-timeline-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 14px 10px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}

body.quality-page .quality-history-timeline-head span {
  display: block !important;
  color: rgba(153, 246, 228, 0.88) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

body.quality-page .quality-history-timeline-head strong {
  display: block !important;
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: 1.05rem !important;
}

body.quality-page .quality-history-timeline {
  display: grid !important;
  gap: 0 !important;
  padding: 8px 14px 14px !important;
}

body.quality-page .quality-history-timeline-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px 0 !important;
}

body.quality-page .quality-history-timeline-item:not(:last-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 30px !important;
  bottom: -6px !important;
  width: 1px !important;
  background: rgba(45, 212, 191, 0.20) !important;
}

body.quality-page .quality-history-dot {
  width: 17px !important;
  height: 17px !important;
  margin-top: 2px !important;
  border-radius: 999px !important;
  background: rgba(45, 212, 191, 0.86) !important;
  box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.10) !important;
}

body.quality-page .quality-history-content {
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, 0.48) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

body.quality-page .quality-history-title {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

body.quality-page .quality-history-title strong {
  color: rgba(248, 250, 252, 0.96) !important;
}

body.quality-page .quality-history-title span,
body.quality-page .quality-history-content small,
body.quality-page .quality-muted-text {
  color: rgba(203, 213, 225, 0.68) !important;
}

body.quality-page .quality-history-content p {
  margin: 8px 0 0 !important;
  color: rgba(226, 232, 240, 0.90) !important;
  line-height: 1.36 !important;
}

body.quality-page .quality-history-details {
  margin-top: 10px !important;
  border-radius: 14px !important;
  background: rgba(2, 6, 23, 0.22) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  padding: 8px 10px !important;
}

body.quality-page .quality-history-details summary {
  cursor: pointer !important;
  color: rgba(153, 246, 228, 0.92) !important;
  font-weight: 850 !important;
}

body.quality-page .quality-history-actions {
  margin-top: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.quality-page .quality-history-timeline-empty {
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgba(15, 23, 42, 0.44) !important;
}

body.quality-page .quality-history-timeline-empty strong {
  color: rgba(248, 250, 252, 0.96) !important;
}

body.quality-page .quality-history-timeline-empty p {
  margin: 5px 0 0 !important;
  color: rgba(203, 213, 225, 0.72) !important;
}

@media (max-width: 760px) {
  body.quality-page .quality-toolbar {
    display: grid !important;
    gap: 10px !important;
  }

  body.quality-page .quality-driver-card {
    border-radius: 22px !important;
  }

  body.quality-page .quality-driver-main {
    gap: 10px !important;
  }

  body.quality-page .quality-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  body.quality-page .quality-actions .quality-contact-btn {
    grid-column: auto !important;
  }

  body.quality-page .quality-history-timeline-head {
    align-items: flex-start !important;
  }

  body.quality-page .quality-history-title {
    display: grid !important;
  }

  body.quality-page .quality-history-content {
    padding: 11px !important;
  }
}


/* =========================================================
   V3.38 - Calidad: Nueva observación como modal real
   ========================================================= */

body.quality-page.quality-observation-open {
  overflow-x: hidden !important;
}

body.quality-page.quality-observation-open::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, 0.72) !important;
  z-index: 9000 !important;
  pointer-events: auto !important;
}

body.quality-page.quality-observation-open::after {
  content: none !important;
  display: none !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

  z-index: 9010 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  width: min(560px, calc(100vw - 36px)) !important;
  max-width: 560px !important;
  max-height: calc(100dvh - 48px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(8, 15, 26, 0.995), rgba(2, 8, 23, 0.995)) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel[hidden] {
  display: none !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel .quality-form-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) !important;
  gap: 12px !important;
  align-items: start !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel .quality-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel .field,
body.quality-page #qualityFormPanel.quality-floating-observation-panel label {
  display: grid !important;
  gap: 7px !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel input,
body.quality-page #qualityFormPanel.quality-floating-observation-panel select,
body.quality-page #qualityFormPanel.quality-floating-observation-panel textarea {
  width: 100% !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: rgba(248, 250, 252, 0.98) !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel textarea {
  min-height: 118px !important;
  resize: vertical !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel .quality-storage-preview {
  border-radius: 18px !important;
  background: rgba(15, 23, 42, 0.54) !important;
  border: 1px dashed rgba(148, 163, 184, 0.28) !important;
}

body.quality-page #qualityFormPanel.quality-floating-observation-panel button[type="submit"] {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 18px !important;
}

body.quality-page.quality-observation-open .quality-driver-card:not(.is-active-panel) {
  opacity: 1 !important;
}

@media (max-width: 760px) {
  body.quality-page #qualityFormPanel.quality-floating-observation-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 17px !important;
    border-radius: 26px !important;
  }

  body.quality-page #qualityFormPanel.quality-floating-observation-panel .quality-form-header {
    grid-template-columns: 1fr !important;
  }

  body.quality-page #qualityFormPanel.quality-floating-observation-panel #qualityCancelBtn {
    width: 100% !important;
  }
}


/* =========================================================
   V3.40 - Ajuste global de tamaños de títulos
   ========================================================= */

/* Títulos principales de página: Protocolo eventos 2026, Tarifas fijas,
   Mis cálculos, Calidad operativa, Contacto, Formación, etc. */
body.app-page h1,
body.standard-page h1,
body.auth-page h1,
body.resource-page h1,
body.formacion-page h1,
body.app-page .auth-card-header h2,
body.app-page #pageTitle,
body.app-page #historyTitle,
body.app-page #profileTitle,
body.app-page #privacyTitle {
  font-size: clamp(2.45rem, 8.2vw, 3.15rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

/* Títulos intermedios entre bloques/cajas */
body.app-page main h2,
body.standard-page main h2,
body.resource-page main h2,
body.formacion-page main h2,
body.app-page .protocol-section h2,
body.app-page .formation-panel h2,
body.app-page .resource-section h2,
body.app-page .admin-section h3,
body.app-page .quality-section-title,
body.app-page .quality-analytics h3 {
  font-size: clamp(1.55rem, 5.4vw, 2.05rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
}

/* Subtítulos/descripciones bajo el título principal */
body.app-page h1 + p,
body.standard-page h1 + p,
body.resource-page h1 + p,
body.formacion-page h1 + p,
body.app-page .auth-card-header p {
  font-size: clamp(1rem, 4.2vw, 1.22rem) !important;
  line-height: 1.38 !important;
}

/* En móvil estrecho bajamos un poco más para que no coma media pantalla */
@media (max-width: 430px) {
  body.app-page h1,
  body.standard-page h1,
  body.auth-page h1,
  body.resource-page h1,
  body.formacion-page h1,
  body.app-page .auth-card-header h2,
  body.app-page #pageTitle,
  body.app-page #historyTitle,
  body.app-page #profileTitle,
  body.app-page #privacyTitle {
    font-size: 2.35rem !important;
    line-height: 1 !important;
  }

  body.app-page main h2,
  body.standard-page main h2,
  body.resource-page main h2,
  body.formacion-page main h2,
  body.app-page .protocol-section h2,
  body.app-page .formation-panel h2,
  body.app-page .resource-section h2,
  body.app-page .admin-section h3,
  body.app-page .quality-section-title,
  body.app-page .quality-analytics h3 {
    font-size: 1.55rem !important;
    line-height: 1.08 !important;
  }
}


/* V3.41 - Titulos moviles protocolo/formacion */
@media (max-width: 640px) {
  body.protocolo-page h1,
  body.formacion-page h1 {
    font-size: clamp(3.15rem, 13.2vw, 3.75rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  body.protocolo-page main h1 + p,
  body.formacion-page main h1 + p,
  body.protocolo-page .standard-hero p,
  body.formacion-page .standard-hero p,
  body.protocolo-page .hero-subtitle,
  body.formacion-page .hero-subtitle {
    font-size: clamp(1.18rem, 4.5vw, 1.38rem) !important;
    line-height: 1.36 !important;
    max-width: 100% !important;
    letter-spacing: -0.02em !important;
  }

  body.protocolo-page main h2,
  body.formacion-page main h2 {
    font-size: clamp(2rem, 8.4vw, 2.55rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.05em !important;
  }

  body.protocolo-page .protocol-section-title,
  body.formacion-page .protocol-section-title,
  body.protocolo-page section > h2,
  body.formacion-page section > h2 {
    font-size: clamp(1.9rem, 7.8vw, 2.35rem) !important;
  }
}


/* =========================================================
   V3.42 - Logos públicos + observaciones calculadora
   ========================================================= */

body.public-logo-view-page,
body.logo-extra-view-body {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
}

body.public-logo-view-page .logo-view-main,
body.public-logo-view-page .logo-viewer {
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body.public-logo-view-page img,
body.logo-extra-view-body img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

.calculator-observations-field textarea {
  width: 100%;
  min-height: 72px;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
}

.calculator-observations-field small {
  display: block;
  margin-top: 6px;
}


/* =========================================================
   V3.43 - Visor público de logos limpio
   ========================================================= */

html:has(body.logo-public-view-page),
body.logo-public-view-page {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.logo-public-view-page .logo-view-main,
body.logo-public-view-page .logo-view-main-clean,
body.logo-public-view-page .logo-viewer,
body.logo-public-view-page .logo-viewer-clean,
body.logo-public-view-page main {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.logo-public-view-page img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  margin: auto !important;
  background: #ffffff !important;
}

body.logo-public-view-page .app-shell,
body.logo-public-view-page .app-header,
body.logo-public-view-page .mobile-menu-toggle,
body.logo-public-view-page nav,
body.logo-public-view-page header,
body.logo-public-view-page footer {
  display: none !important;
}

/* V376 - En pantallas anchas (iPad, escritorio) el menu lateral persistente
   (.app-nav[data-role-menu="true"]) tiene reglas con mas especificidad que
   la de arriba y volvia a aparecer sobre el visor publico de logo.
   Este selector repite la clase a proposito para ganar en especificidad
   sin tener que tocar las ~40 reglas existentes del menu lateral. */
body.logo-public-view-page.logo-public-view-page.logo-public-view-page .app-nav[data-role-menu="true"] {
  display: none !important;
}

/* Login/acceso: no mostrar menú hamburguesa si no hay sesión */
body.login-page .mobile-menu-toggle,
body.auth-page .mobile-menu-toggle,
body.login-page [data-mobile-menu-toggle],
body.auth-page [data-mobile-menu-toggle],
body.login-page .mobile-menu-btn,
body.auth-page .mobile-menu-btn {
  display: none !important;
}


/* =========================================================
   V3.45 - Observaciones en calculadora
   ========================================================= */

.calculator-observations-field textarea {
  width: 100%;
  min-height: 74px;
  resize: none;
  overflow: hidden;
  line-height: 1.35;
}

.calculator-observations-field small {
  display: block;
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.72);
}


/* =========================================================
   V3.50 - Observaciones calculadora premium
   ========================================================= */

.calculator-observations-field {
  margin-top: 0.4rem;
}

.calculator-observations-field label {
  display: block;
  margin-bottom: 0.55rem;
  font-weight: 850;
  color: rgba(248, 250, 252, 0.96);
  letter-spacing: -0.02em;
}

.calculator-observations-field textarea,
#serviceObservations {
  width: 100% !important;
  min-height: 52px !important;
  height: auto;
  max-height: none !important;
  resize: none !important;
  overflow: hidden !important;
  display: block !important;
  padding: 1rem 1.08rem !important;
  border-radius: 1.15rem !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88)) !important;
  color: rgba(248, 250, 252, 0.98) !important;
  font-size: 0.95rem !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(20, 184, 166, 0.04) !important;
}

.calculator-observations-field textarea::placeholder,
#serviceObservations::placeholder {
  color: rgba(148, 163, 184, 0.70) !important;
  font-weight: 500 !important;
}

.calculator-observations-field textarea:focus,
#serviceObservations:focus {
  outline: none !important;
  border-color: rgba(45, 212, 191, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(45, 212, 191, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.calculator-observations-field small {
  display: block;
  margin-top: 0.62rem;
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: 0.86rem;
  line-height: 1.28;
}

@media (max-width: 430px) {
  .calculator-observations-field textarea,
  #serviceObservations {
    min-height: 52px !important;
    font-size: 0.95rem !important;
    line-height: 1.42 !important;
  }
}


/* =========================================================
   V3.77 - Observaciones: una linea de inicio, crece con el texto
   Antes esto forzaba min-height:132/max-height:260 + scroll interno,
   pisando al JS que ya la hacia crecer sola (autoGrowServiceObservations
   en calculadora.js). Se quita el tope y el scroll: ahora crece sin
   limite, tanto en movil como en escritorio.
   ========================================================= */

#serviceObservations {
  white-space: pre-wrap !important;
}

/* =========================================================
   V3.76 - Unificacion del panel principal en las 13 paginas
   Antes convivian 3 anchos de escritorio distintos (760/820/1062px)
   sin relacion con la cantidad de contenido de cada pagina, y 2
   sistemas de color (plano en la mayoria, semitransparente en
   protocolo, invisible en formacion). Unificado a un solo estilo -
   el mismo que ya tenian admin.html y calculadora.html - usando
   siempre el maximo ancho disponible del contenedor, tanto en
   escritorio como en movil. El color se unifica arriba (selector
   ".auth-card, .resource-card, ... .page-shell-card, ...").

   IMPORTANTE: .page-shell-card envuelve a .auth-card (u otra tarjeta
   terminal) en 11 de las 13 paginas - es un wrapper invisible desde
   el A1, no una tarjeta propia. Solo en protocolo.html/formacion.html
   .page-shell-card ES la tarjeta terminal (no hay .auth-card dentro).
   Por eso estas reglas de ancho/radio SOLO tocan .page-shell-card
   cuando va con .protocol-shell-card o dentro de body.formacion-page -
   aplicarlo al selector bare .page-shell-card duplicaba visualmente
   la tarjeta en el resto de paginas (dos bordes/sombras concentricos,
   solo visible de cerca). El wrapper se neutraliza mas abajo.
   ========================================================= */
@media (min-width: 1024px) {
  .auth-card,
  .resource-card,
  .calculator-card,
  .quality-card,
  body.formacion-page .page-shell-card,
  .protocol-shell-card {
    width: 100% !important;
    max-width: none !important;
    padding: 34px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  /* El propio "shell" (contenedor grid alrededor de la tarjeta) tambien
     tenia su propio limite de ancho en algunas paginas (calculator-shell
     a 760px via grid-template-columns) - lo ampliamos igual que la
     tarjeta, si no la tarjeta se queda encogida dentro de un shell mas
     estrecho aunque ella misma ya pida el 100%. */
  .calculator-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1023px) {
  .auth-card,
  .resource-card,
  .calculator-card,
  .quality-card,
  body.formacion-page .page-shell-card,
  .protocol-shell-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(16px, 4vw, 26px) !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }
}

/* El wrapper .page-shell-card en las 11 paginas donde NO es la tarjeta
   terminal: sin fondo, borde, sombra ni relleno propios, para que solo
   se vea la tarjeta real (.auth-card/.resource-card/...) que tiene
   dentro. */
body:not(.formacion-page) .page-shell-card:not(.protocol-shell-card) {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}