/* ── El aspecto de ClinicasGT (02/11/2026) ─────────────────────────────────
   Alberto: «un doctor queda más impresionado cuando la plataforma ofrece
   confianza, y lo visual da eso». Tres cosas:

   1. Una letra propia (Inter, en /static/fuentes): con `system-ui` cada
      computadora se veía distinta (Segoe en Windows, otra en Linux).
   2. El estilo por defecto («Clásico»): más pulido sobre la misma base de
      Tabler (radios, bordes finos, botones con volumen, tablas limpias).
   3. Estilos para escoger en el panel «Apariencia» (data-estilo en <html>):
      clásico · clínico · elegante · cálido · compacto. Un estilo solo cambia
      las variables --cg-* y unas pocas reglas; el color de acento, la barra
      lateral y claro/oscuro se siguen eligiendo aparte.

   Todas las reglas llevan `html[data-estilo]` delante: pesan más que lo que
   hay inline en base.html y así mandan sin `!important`. */

@font-face {
  font-family: "Inter";
  src: url("/static/fuentes/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fuentes/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

/* ── Variables: el estilo «Clásico» es el de salida ── */
:root {
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --cg-titulos: var(--tblr-font-sans-serif);
  --cg-titulos-peso: 650;
  --cg-radio: .8rem;                  /* cuadros */
  --cg-radio-s: .55rem;               /* botones y campos */
  --cg-fondo: #f3f5f9;
  --cg-borde: rgba(15, 23, 42, .075);
  --cg-sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .07);
  --cg-sombra-s: 0 1px 3px rgba(15, 23, 42, .06);
  --cg-menu-a: #1b2b47;               /* barra lateral oscura: de arriba… */
  --cg-menu-b: #0e1a2f;               /* …a abajo */
  --cg-cuerpo: .875rem;
}
html[data-estilo="clinico"] {
  --cg-radio: 1.1rem; --cg-radio-s: .7rem;
  --cg-fondo: #f1f8f8; --cg-borde: rgba(13, 110, 118, .12);
  --cg-sombra: 0 1px 2px rgba(13, 110, 118, .06), 0 10px 28px rgba(13, 110, 118, .08);
  --cg-sombra-s: 0 1px 3px rgba(13, 110, 118, .08);
  --cg-menu-a: #12343a; --cg-menu-b: #0b2227;
}
html[data-estilo="elegante"] {
  --cg-titulos: "Source Serif 4", Georgia, "Times New Roman", serif;
  --cg-titulos-peso: 600;
  --cg-radio: .45rem; --cg-radio-s: .35rem;
  --cg-fondo: #f6f3ec; --cg-borde: rgba(70, 55, 30, .16);
  --cg-sombra: 0 1px 0 rgba(70, 55, 30, .05), 0 2px 10px rgba(70, 55, 30, .06);
  --cg-sombra-s: 0 1px 2px rgba(70, 55, 30, .06);
  --cg-menu-a: #191b24; --cg-menu-b: #0d0e14;
}
html[data-estilo="calido"] {
  --cg-radio: 1rem; --cg-radio-s: .65rem;
  --cg-fondo: #faf5ee; --cg-borde: rgba(120, 70, 30, .13);
  --cg-sombra: 0 1px 2px rgba(120, 53, 15, .06), 0 10px 26px rgba(120, 53, 15, .09);
  --cg-sombra-s: 0 1px 3px rgba(120, 53, 15, .08);
  --cg-menu-a: #33271f; --cg-menu-b: #20170f;
}
html[data-estilo="compacto"] {
  --cg-radio: .55rem; --cg-radio-s: .4rem;
  --cg-fondo: #f4f5f8; --cg-borde: rgba(15, 23, 42, .1);
  --cg-sombra: 0 1px 2px rgba(15, 23, 42, .06);
  --cg-sombra-s: none;
  --cg-cuerpo: .8125rem;
}

/* ── Base (todos los estilos) ── */
html[data-estilo] { --tblr-body-font-size: var(--cg-cuerpo); }
html[data-estilo]:not([data-bs-theme="dark"]) { --tblr-body-bg: var(--cg-fondo); }
html[data-estilo] body {
  font-family: var(--tblr-font-sans-serif);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-estilo] .table td, html[data-estilo] .table th,
html[data-estilo] .h1, html[data-estilo] .h2, html[data-estilo] .subheader,
html[data-estilo] .fs-1, html[data-estilo] .fs-2 { font-variant-numeric: tabular-nums; }

/* Títulos */
html[data-estilo] h1, html[data-estilo] h2, html[data-estilo] h3, html[data-estilo] h4,
html[data-estilo] .page-title, html[data-estilo] .card-title, html[data-estilo] .modal-title,
html[data-estilo] .offcanvas-title, html[data-estilo] .navbar-brand {
  font-family: var(--cg-titulos); font-weight: var(--cg-titulos-peso); letter-spacing: -.01em;
}
html[data-estilo] .page-title { font-size: 1.4rem; }
html[data-estilo] .subheader { letter-spacing: .06em; font-weight: 600; font-size: .68rem; }

/* Cuadros */
html[data-estilo] .page-wrapper .card {
  border: 1px solid var(--cg-borde); border-radius: var(--cg-radio);
  box-shadow: var(--cg-sombra); overflow: hidden;
}
html[data-estilo] .page-wrapper .card .card { box-shadow: var(--cg-sombra-s); }
html[data-estilo] .page-wrapper .card > .card-header { border-top-left-radius: inherit; border-top-right-radius: inherit; }
html[data-estilo] .card-title { font-size: 1rem; }
html[data-estilo] .modal-content, html[data-estilo] .offcanvas, html[data-estilo] .dropdown-menu {
  border-radius: var(--cg-radio); border: 1px solid var(--cg-borde);
}
html[data-estilo] .offcanvas { border-radius: var(--cg-radio) 0 0 var(--cg-radio); }
html[data-estilo] .dropdown-menu { box-shadow: 0 10px 30px rgba(15, 23, 42, .15); padding: .35rem; }
html[data-estilo] .dropdown-item { border-radius: calc(var(--cg-radio-s) - .1rem); }

/* Botones y campos */
html[data-estilo] .btn { border-radius: var(--cg-radio-s); font-weight: 500; letter-spacing: -.005em; }
html[data-estilo] .btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 1px 2px rgba(var(--tblr-primary-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
html[data-estilo] .btn-primary:hover { filter: brightness(1.06); }
html[data-estilo] .form-control, html[data-estilo] .form-select, html[data-estilo] .input-group-text {
  border-radius: var(--cg-radio-s);
}
html[data-estilo] .input-group > .form-control, html[data-estilo] .input-group > .form-select { border-radius: 0; }
html[data-estilo] .input-group > :first-child { border-top-left-radius: var(--cg-radio-s); border-bottom-left-radius: var(--cg-radio-s); }
html[data-estilo] .input-group > :last-child { border-top-right-radius: var(--cg-radio-s); border-bottom-right-radius: var(--cg-radio-s); }
html[data-estilo] .form-control:focus, html[data-estilo] .form-select:focus {
  border-color: rgba(var(--tblr-primary-rgb), .6);
  box-shadow: 0 0 0 .22rem rgba(var(--tblr-primary-rgb), .16);
}
html[data-estilo] .form-label { font-weight: 600; font-size: .8rem; }
html[data-estilo] .badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }

/* Tablas */
html[data-estilo] .table thead th {
  text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; font-weight: 650;
  color: var(--tblr-secondary); background: rgba(var(--tblr-primary-rgb), .035);
  border-bottom-color: var(--cg-borde);
}
html[data-estilo] .table > :not(caption) > * > * { border-bottom-color: var(--cg-borde); }
html[data-estilo] .table-hover > tbody > tr:hover > * { background: rgba(var(--tblr-primary-rgb), .045); }

/* ── Barra lateral ── */
html[data-estilo] .navbar-vertical[data-bs-theme="dark"] {
  background-image: linear-gradient(180deg, var(--cg-menu-a), var(--cg-menu-b));
  border-right: 1px solid rgba(255, 255, 255, .04);
}
html[data-estilo] .navbar-vertical:not([data-bs-theme="dark"]) {
  border-right: 1px solid var(--cg-borde);
}
html[data-estilo] .navbar-vertical .navbar-brand { font-size: 1.05rem; letter-spacing: -.015em; }
html[data-estilo] .navbar-vertical .nav-link {
  border-radius: var(--cg-radio-s); font-weight: 500; margin: .08rem .5rem;
  transition: background .15s, color .15s;
}
html[data-estilo] .navbar-vertical .nav-link .nav-link-icon { opacity: .8; }
html[data-estilo] .navbar-vertical[data-bs-theme="dark"] .nav-item.active > .nav-link {
  background: rgba(255, 255, 255, .1); color: #fff;
  box-shadow: inset 3px 0 0 var(--tblr-primary);
}
html[data-estilo] .navbar-vertical[data-bs-theme="dark"] .nav-item.active > .nav-link .nav-link-icon { opacity: 1; color: #fff; }
html[data-estilo] .navbar-vertical:not([data-bs-theme="dark"]) .nav-item.active > .nav-link {
  background: rgba(var(--tblr-primary-rgb), .1); color: var(--tblr-primary);
  box-shadow: inset 3px 0 0 var(--tblr-primary);
}
html[data-estilo] .navbar-vertical:not([data-bs-theme="dark"]) .nav-item.active > .nav-link .nav-link-icon { opacity: 1; color: var(--tblr-primary); }
html[data-estilo] .navbar-vertical .navbar-footer { border-top-color: rgba(128, 128, 128, .18); }

/* ── Cada estilo, lo suyo ── */

/* Elegante: sin degradados, títulos con serifa y filos finos */
html[data-estilo="elegante"] .page-wrapper .card > .card-header:not([class*="bg-"]):not(:has(.nav-tabs)) {
  background: rgba(70, 55, 30, .035); border-bottom: 1px solid var(--cg-borde);
}
html[data-estilo="elegante"] .btn-primary { background-image: none; box-shadow: none; }
html[data-estilo="elegante"] .page-title { font-size: 1.55rem; }
html[data-estilo="elegante"] .navbar-vertical .navbar-brand { font-size: 1.15rem; }

/* Clínico: aire y suavidad */
html[data-estilo="clinico"] .page-wrapper .card > .card-header:not([class*="bg-"]):not(:has(.nav-tabs)) {
  background: linear-gradient(115deg, rgba(var(--tblr-primary-rgb), .13), rgba(var(--tblr-primary-rgb), .03) 70%, transparent);
}
html[data-estilo="clinico"] .navbar-vertical .nav-link { padding-top: .55rem; padding-bottom: .55rem; }

/* Cálido: cabeceras en tono arena */
html[data-estilo="calido"] .page-wrapper .card > .card-header:not([class*="bg-"]):not(:has(.nav-tabs)) {
  background: linear-gradient(115deg, rgba(var(--tblr-primary-rgb), .14), rgba(var(--tblr-primary-rgb), .04) 65%, transparent);
}

/* Compacto: más datos en la misma pantalla */
html[data-estilo="compacto"] .page-wrapper .card > .card-body { padding: .8rem 1rem; }
html[data-estilo="compacto"] .page-wrapper .card > .card-header { min-height: 2.7rem; padding: .35rem 1rem; }
html[data-estilo="compacto"] .page-wrapper .card > .card-header .card-title { font-size: .92rem; }
html[data-estilo="compacto"] .table > :not(caption) > * > * { padding: .4rem .65rem; }
html[data-estilo="compacto"] .btn { --tblr-btn-padding-y: .3rem; --tblr-btn-padding-x: .7rem; --tblr-btn-font-size: .8125rem; }
html[data-estilo="compacto"] .btn-primary { background-image: none; }
html[data-estilo="compacto"] .navbar-vertical .nav-link { padding-top: .35rem; padding-bottom: .35rem; }
html[data-estilo="compacto"] .page-header { margin-bottom: .6rem; }

@media print {
  html[data-estilo] .page-wrapper .card { box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Pantalla de entrada (02/11/2026): la marca de la clínica a un lado, el
   formulario al otro. Toma el color de la clínica (--tblr-primary) y las
   variables del estilo escogido, así que no hace falta un login por estilo.
   ═══════════════════════════════════════════════════════════════════════ */
.login-pagina { background: var(--cg-fondo, #f3f5f9); }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-marca {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 4rem clamp(2rem, 6vw, 5.5rem); color: #fff;
  background: linear-gradient(160deg, var(--cg-menu-a, #1b2b47) 0%, var(--cg-menu-b, #0e1a2f) 100%);
}
.login-halo {
  position: absolute; inset: auto -20% -35% auto; width: 90%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--tblr-primary-rgb), .55), rgba(var(--tblr-primary-rgb), 0) 65%);
  filter: blur(10px); opacity: .7;
}
.login-marca-int { position: relative; z-index: 1; max-width: 30rem; animation: cg-sube .7s cubic-bezier(.2, .7, .2, 1) both; }
.login-logo {
  width: 4.2rem; height: 4.2rem; border-radius: 1.1rem; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); margin-bottom: 1.6rem; font-size: 2rem; backdrop-filter: blur(4px);
}
.login-logo img { max-width: 3rem; max-height: 3rem; }
/* El logo de la clínica: su ficha, grande y sin el vidrio (ver services/logo.py). */
.login-logo-propio {
  width: auto; height: auto; min-width: 6rem; min-height: 6rem; max-width: min(21rem, 100%);
  display: inline-flex; padding: 1rem 1.25rem; border: 0; border-radius: 1.35rem; backdrop-filter: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .14);
}
.login-logo-propio img { display: block; max-width: 100%; max-height: 5.5rem; object-fit: contain; }
.login-nombre { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; margin: 0 0 .8rem; color: #fff; font-weight: var(--cg-titulos-peso, 650); }
.login-lema { font-size: 1.15rem; color: rgba(255, 255, 255, .85); margin-bottom: 2rem; }
.login-lema em { font-style: normal; color: #ffce86; }
.login-puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.login-puntos li { display: flex; align-items: center; gap: .8rem; color: rgba(255, 255, 255, .9); }
.login-puntos .ti {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); font-size: 1.15rem;
}
.login-latido { position: absolute; left: 0; right: 0; bottom: 12%; width: 100%; height: 6.5rem; opacity: .5; pointer-events: none; }
.login-latido path {
  fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: cg-latido 6s ease-in-out infinite;
}
.login-pie-marca { position: absolute; left: clamp(2rem, 6vw, 5.5rem); bottom: 1.6rem; font-size: .8rem; color: rgba(255, 255, 255, .55); z-index: 1; }
.login-pie-marca strong { color: rgba(255, 255, 255, .85); }

.login-forma { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.login-tarjeta { width: 100%; max-width: 25rem; animation: cg-sube .6s .08s cubic-bezier(.2, .7, .2, 1) both; }
.login-titulo { font-size: 1.7rem; margin: 0 0 .35rem; font-weight: var(--cg-titulos-peso, 650); }
.login-sub { color: var(--tblr-secondary); margin-bottom: 1.6rem; }
.login-campo { position: relative; }
.login-campo > .ti { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--tblr-secondary); pointer-events: none; font-size: 1.1rem; }
.login-campo .form-control { padding: .7rem .9rem .7rem 2.55rem; font-size: .95rem; }
.login-ojo {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: .45rem .55rem;
  color: var(--tblr-secondary); border-radius: .5rem; line-height: 1;
}
.login-ojo:hover { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .08); }
.login-campo:has(.login-ojo) .form-control { padding-right: 2.8rem; }
.login-entrar { padding: .75rem 1rem; font-size: 1rem; position: relative; }
.login-entrar-spin { display: none; }
.login-entrar.cargando .login-entrar-texto { visibility: hidden; }
.login-entrar.cargando .login-entrar-spin { display: inline-block; position: absolute; left: 50%; top: 50%; margin: -.5rem 0 0 -.5rem; }
.login-seguro { text-align: center; margin-top: 1.8rem; font-size: .8rem; color: var(--tblr-secondary); }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; min-height: 0; }
  .login-marca { padding: 1.6rem 1.4rem 1.4rem; flex-direction: row; align-items: center; }
  .login-marca-int { display: flex; align-items: center; gap: 1rem; max-width: none; flex-wrap: wrap; }
  .login-logo { width: 3.2rem; height: 3.2rem; margin: 0; font-size: 1.5rem; border-radius: .9rem; }
  .login-logo-propio { width: auto; height: auto; min-width: 3.2rem; min-height: 3.2rem; max-width: 10rem; padding: .4rem .55rem; flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
  .login-logo-propio img { max-height: 2.4rem; }
  .login-nombre { font-size: 1.25rem; margin: 0; flex: 1; min-width: 0; }
  .login-lema, .login-puntos, .login-latido, .login-pie-marca, .login-halo { display: none; }
  .login-forma { align-items: flex-start; padding: 2rem 1.25rem 2.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Un poco de vida (02/11/2026): entradas suaves, botones que responden y
   estados vacíos con cariño. Todo es adorno: quien pidió «menos movimiento»
   en su sistema no lo ve, y nada depende de que se vea.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes cg-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cg-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cg-latido { 0% { stroke-dashoffset: 1200; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1200; } }

/* Cada pantalla entra con un suave aparecer (solo opacidad: nada se mueve de
   sitio, así que no pelea con el calendario ni con los modales). */
html[data-estilo] .page-body { animation: cg-entra .28s ease-out both; }

/* Botones que responden */
html[data-estilo] .btn { transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background-color .15s, border-color .15s, color .15s; }
html[data-estilo] .btn:active:not(:disabled):not(.disabled) { transform: translateY(1px) scale(.985); }
html[data-estilo] .btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(var(--tblr-primary-rgb), .38), inset 0 1px 0 rgba(255, 255, 255, .2); }

/* Las tarjetas que son enlace (los atajos) se levantan al pasar */
html[data-estilo] a.card, html[data-estilo] .card-link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
html[data-estilo] a.card:hover, html[data-estilo] .card-link:hover { transform: translateY(-2px); border-color: rgba(var(--tblr-primary-rgb), .35); }

/* Estados vacíos: el ícono dentro de un halo suave del color de la clínica,
   que flota despacio. Sirve a los de Tabler (.empty) y al del Inicio. */
html[data-estilo] .page-wrapper .empty { padding-top: 2.2rem; padding-bottom: 2.2rem; }
html[data-estilo] .page-wrapper .empty .empty-icon,
html[data-estilo] .page-wrapper .avatar-xl.bg-primary-lt.mb-3 {
  display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;
  width: 4.6rem; height: 4.6rem; border-radius: 50%; color: var(--tblr-primary);
  background: radial-gradient(circle at 30% 25%, rgba(var(--tblr-primary-rgb), .22), rgba(var(--tblr-primary-rgb), .07));
  box-shadow: 0 0 0 .55rem rgba(var(--tblr-primary-rgb), .05);
  animation: cg-flota 4.5s ease-in-out infinite;
}
html[data-estilo] .page-wrapper .empty .empty-icon { margin-bottom: 1.1rem; }
html[data-estilo] .page-wrapper .empty .empty-icon .ti { font-size: 2rem; color: var(--tblr-primary); }
html[data-estilo] .page-wrapper .empty-title { font-weight: 650; font-size: 1.08rem; margin-bottom: .3rem; }
html[data-estilo] .page-wrapper .empty-subtitle { max-width: 30rem; margin: 0 auto 1rem; }

@media (prefers-reduced-motion: reduce) {
  .login-marca-int, .login-tarjeta, .login-latido path, html[data-estilo] .page-body,
  html[data-estilo] .page-wrapper .empty .empty-icon, html[data-estilo] .page-wrapper .avatar-xl.bg-primary-lt.mb-3 { animation: none; }
  .login-latido path { stroke-dashoffset: 0; }
  html[data-estilo] .btn, html[data-estilo] a.card, html[data-estilo] .card-link { transition: none; }
  html[data-estilo] .btn:active, html[data-estilo] a.card:hover, html[data-estilo] .card-link:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   El logo de la clínica (02/11/2026): siempre sobre su ficha, cuyo color se
   calcula del propio logo. Así se ve sobre cualquier estilo de la barra.
   ═══════════════════════════════════════════════════════════════════════ */
.marca-barra { display: flex; align-items: center; gap: .6rem; }
.marca-logo {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  height: 2.5rem; min-width: 2.5rem; max-width: 100%; padding: .22rem; overflow: hidden;
  border-radius: .6rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.marca-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.marca-logo-grande { height: 4rem; min-width: 4rem; max-width: 14rem; padding: .35rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
/* Alargado: no cabe junto al nombre, va encima y a todo lo ancho. */
.marca-barra-ancha { flex-direction: column; align-items: flex-start; gap: .4rem; }
.marca-barra-ancha .marca-logo { height: 3rem; padding: .3rem .5rem; }
@media (max-width: 991.98px) {
  .marca-barra-ancha { flex-direction: row; align-items: center; }
  .marca-barra-ancha .marca-logo { height: 2.4rem; max-width: 8rem; }
}
.logo-linea { font-size: .85rem; margin-bottom: .2rem; }
.logo-bien .ti { color: var(--tblr-success); }
.logo-ojo { color: var(--tblr-warning-text, #8a5a00); }
.logo-mal { color: var(--tblr-danger); font-weight: 500; }
.logo-previas { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: .75rem; }
.logo-previa-titulo { font-size: .75rem; color: var(--tblr-secondary); margin-bottom: .25rem; }
.logo-previa { border-radius: .6rem; padding: .75rem; min-height: 4rem; display: flex; align-items: center; }
.logo-previa-barra, .logo-previa-login { background: #15233c; }
.logo-previa-login { justify-content: center; padding: 1.25rem .75rem; }
.logo-previa-login .login-logo-propio { margin: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.logo-previa-pestana { background: #dee1e6; align-items: flex-end; padding-bottom: 0; }
.logo-pestana {
  display: flex; align-items: center; gap: .45rem; width: 13rem; max-width: 100%; padding: .45rem .7rem;
  background: #fff; color: #333; font-size: .8rem; border-radius: .55rem .55rem 0 0;
}
.logo-pestana img { width: 16px; height: 16px; flex: none; }