/* Marca Clínica Capón — azul corporativo #144365
   Chatwoot v4 usa escalas tipo Radix en RGB (espacios, sin comas).
   El acento principal de la app es la escala --blue-*; se sustituye
   por una rampa construida alrededor de #144365 (rgb 20 67 101). */

:root{
  --blue-1: 252 253 254;
  --blue-2: 246 250 253;
  --blue-3: 234 242 249;
  --blue-4: 219 233 244;
  --blue-5: 201 221 236;
  --blue-6: 177 204 225;
  --blue-7: 145 181 209;
  --blue-8: 100 148 186;
  --blue-9: 20 67 101;    /* #144365 — sólido principal */
  --blue-10: 15 53 80;    /* hover */
  --blue-11: 21 76 115;   /* texto sobre fondo claro */
  --blue-12: 10 32 49;    /* máximo contraste */
}

/* En modo oscuro el #144365 puro no contrasta contra el fondo,
   así que la rampa se aclara manteniendo el mismo tono. */
.dark{
  --blue-1: 12 17 23;
  --blue-2: 15 22 30;
  --blue-3: 17 32 47;
  --blue-4: 19 41 61;
  --blue-5: 22 50 74;
  --blue-6: 27 61 90;
  --blue-7: 33 76 112;
  --blue-8: 42 97 142;
  --blue-9: 34 96 145;
  --blue-10: 41 112 167;
  --blue-11: 130 180 220;
  --blue-12: 216 233 246;
}

/* ---- Pie de marca: sólo visible en las pantallas de acceso ---- */
#nooria-credit{ display:none; }

html.nooria-auth #nooria-credit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  position:fixed;
  left:0; right:0; bottom:0;
  padding:1rem .75rem calc(1rem + env(safe-area-inset-bottom));
  z-index:50;
  pointer-events:none;
  font-family:inherit;
  font-size:.75rem;
  line-height:1.45;
  text-align:center;
  color:rgb(var(--slate-11));
  background:linear-gradient(to top, rgb(var(--slate-1) / .95), rgb(var(--slate-1) / 0));
}

html.nooria-auth #nooria-credit a{
  pointer-events:auto;
  color:rgb(var(--blue-11));
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid rgb(var(--blue-11) / .35);
  transition:color .15s ease, border-color .15s ease;
}
html.nooria-auth #nooria-credit a:hover{
  color:rgb(var(--blue-9));
  border-bottom-color:rgb(var(--blue-9) / .7);
}
html.dark.nooria-auth #nooria-credit a:hover{
  color:rgb(var(--blue-11));
}

#nooria-credit .nooria-heart{
  color:#e0364f;
  font-size:.9em;
}

@media (max-width: 480px){
  html.nooria-auth #nooria-credit{ font-size:.6875rem; }
}

@media (prefers-reduced-motion: reduce){
  html.nooria-auth #nooria-credit a{ transition:none; }
}

/* ================================================================
   Color de marca #144365 sobre los tokens de acento de Chatwoot.
   Tailwind compiló el azul (#2781f6) HARDCODEADO en 83 reglas
   (n-brand, n-blue-9, text-link, color por defecto del widget), no
   como variable CSS — por eso no basta redefinir --blue-*.
   Reglas REGENERADAS del CSS compilado: mismo selector, misma
   especificidad, y esta hoja carga la última.
   ⚠️ Al actualizar Chatwoot hay que regenerarlas (ver documentación).

   Dos variables a propósito:
   --cc-brand      -> superficies (fondos, bordes)
   --cc-brand-text -> texto, iconos y anillos de foco, que en modo
                      oscuro necesitan más luminosidad para cumplir
                      el contraste mínimo (AA 4.5:1 / foco 3:1).
   ================================================================ */
:root{
  --cc-brand: 20 67 101;        /* #144365 — texto sobre blanco: 10.9:1 */
  --cc-brand-text: 20 67 101;
}
.dark{
  --cc-brand: 31 92 139;        /* #1F5C8B — sólido; blanco encima: 5.3:1 */
  --cc-brand-text: 127 179 220; /* #7FB3DC — sobre fondo oscuro: 7.6:1 */
}
.border-n-blue-border{border-color:rgb(var(--cc-brand) / 0.502);border-color:rgba(var(--border-blue))}
.border-n-brand{--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.border-n-brand{border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.border-n-brand\/50{border-color:rgb(var(--cc-brand) / 0.502)}
.border-t-n-brand{--tw-border-opacity: 1;border-top-color:rgb(var(--cc-brand))}
.border-t-n-brand{border-top-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.bg-\[\#2781F6\]{--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.bg-\[\#2781F6\]{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.bg-n-blue-9{--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand));background-color:rgb(var(--blue-9) / var(--tw-bg-opacity, 1))}
.bg-n-brand{--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.bg-n-brand{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.bg-n-brand\/10{background-color:rgb(var(--cc-brand) / 0.102)}
.bg-n-brand\/20{background-color:rgb(var(--cc-brand) / 0.2)}
.bg-n-brand\/5{background-color:rgb(var(--cc-brand) / 0.051)}
.from-n-brand\/15{--tw-gradient-from: rgb(var(--cc-brand) / .15) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--cc-brand) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.fill-n-blue-9{fill:rgb(var(--cc-brand-text));fill:rgb(var(--blue-9) / 1)}
.text-n-blue-9{--tw-text-opacity: 1;color:rgb(var(--cc-brand-text));color:rgb(var(--blue-9) / var(--tw-text-opacity, 1))}
.text-n-brand{--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.text-n-brand{color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.accent-n-blue-9{accent-color:rgb(var(--cc-brand) / 1);accent-color:rgb(var(--blue-9) / 1)}
.\!shadow-\[var\(--widget-color\,\#2781f6\)\]{--tw-shadow-color: var(--widget-color,rgb(var(--cc-brand))) !important;--tw-shadow: var(--tw-shadow-colored) !important}
.\!outline-n-brand{outline-color:rgb(var(--cc-brand-text))!important}
.outline-n-blue-9{outline-color:rgb(var(--cc-brand-text));outline-color:rgb(var(--blue-9) / 1)}
.outline-n-brand{outline-color:rgb(var(--cc-brand-text))}
.ring-n-brand{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--cc-brand-text) / var(--tw-ring-opacity, 1))}
.text-link{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.text-link{color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.before\:\!border-t-n-brand:before{content:var(--tw-content);--tw-border-opacity: 1 !important;border-top-color:rgb(var(--cc-brand))!important}
.before\:\!border-t-n-brand:before{border-top-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))!important}
.before\:bg-n-brand:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.before\:bg-n-brand:before{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.after\:bg-n-brand:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.after\:bg-n-brand:after{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.checked\:border-n-brand:checked{--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.checked\:border-n-brand:checked{border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.checked\:bg-n-brand:checked{--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.checked\:bg-n-brand:checked{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.indeterminate\:border-n-brand:indeterminate{--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.indeterminate\:border-n-brand:indeterminate{border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.indeterminate\:bg-n-brand:indeterminate{--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.indeterminate\:bg-n-brand:indeterminate{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.focus-within\:outline-n-brand:focus-within{outline-color:rgb(var(--cc-brand-text))}
.focus-within\:ring-n-brand:focus-within{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--cc-brand-text) / var(--tw-ring-opacity, 1))}
.hover\:border-n-brand:hover{--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.hover\:border-n-brand:hover{border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.hover\:bg-n-brand\/10:hover{background-color:rgb(var(--cc-brand) / 0.102)}
.hover\:bg-n-brand\/80:hover{background-color:rgb(var(--cc-brand) / 0.8)}
.hover\:text-n-brand:hover{--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.hover\:text-n-brand:hover{color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.focus\:border-n-brand:focus{--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.focus\:border-n-brand:focus{border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.focus\:outline-n-blue-9:focus{outline-color:rgb(var(--cc-brand-text));outline-color:rgb(var(--blue-9) / 1)}
.focus\:outline-n-brand:focus{outline-color:rgb(var(--cc-brand-text))}
.focus\:ring-n-brand:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--cc-brand-text) / var(--tw-ring-opacity, 1))}
.focus-visible\:bg-n-brand\/20:focus-visible{background-color:rgb(var(--cc-brand) / 0.2)}
.focus-visible\:outline-n-brand:focus-visible{outline-color:rgb(var(--cc-brand-text))}
.focus-visible\:ring-n-brand:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--cc-brand-text) / var(--tw-ring-opacity, 1))}
.hover\:enabled\:border-n-blue-9:enabled:hover{--tw-border-opacity: 1;border-color:rgb(var(--cc-brand));border-color:rgb(var(--blue-9) / var(--tw-border-opacity, 1))}
.hover\:enabled\:bg-n-blue-border:enabled:hover{background-color:rgb(var(--cc-brand) / 0.502);background-color:rgba(var(--border-blue))}
.hover\:enabled\:bg-n-brand\/20:enabled:hover{background-color:rgb(var(--cc-brand) / 0.2)}
.group:focus-within .group-focus-within\:text-n-brand{--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.group:focus-within .group-focus-within\:text-n-brand{color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.group:hover .group-hover\:bg-n-brand{--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.group:hover .group-hover\:bg-n-brand{background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.has-\[\:focus\]\:outline-n-brand:has(:focus){outline-color:rgb(var(--cc-brand-text))}
.prose-a\:text-n-brand :is(:where(a):not(:where([class~=not-prose],[class~=not-prose] *))){--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.prose-a\:text-n-brand :is(:where(a):not(:where([class~=not-prose],[class~=not-prose] *))){color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))){--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~=not-prose],[class~=not-prose] *))){color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.dark\:border-n-brand:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.dark\:border-n-brand:is(.dark *){border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.dark\:bg-n-brand\/10:is(.dark *){background-color:rgb(var(--cc-brand) / 0.102)}
.dark\:\!outline-n-brand:is(.dark *){outline-color:rgb(var(--cc-brand-text))!important}
.dark\:ring-n-brand:is(.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--cc-brand-text) / var(--tw-ring-opacity, 1))}
.dark\:checked\:border-n-brand:checked:is(.dark *){--tw-border-opacity: 1;border-color:rgb(var(--cc-brand))}
.dark\:checked\:border-n-brand:checked:is(.dark *){border-color:rgb(var(--cc-brand) / var(--tw-border-opacity, 1))}
.dark\:checked\:bg-n-brand:checked:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--cc-brand))}
.dark\:checked\:bg-n-brand:checked:is(.dark *){background-color:rgb(var(--cc-brand) / var(--tw-bg-opacity, 1))}
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *){outline-color:rgb(var(--cc-brand-text))}
.dark\:hover\:text-n-brand:hover:is(.dark *){--tw-text-opacity: 1;color:rgb(var(--cc-brand-text))}
.dark\:hover\:text-n-brand:hover:is(.dark *){color:rgb(var(--cc-brand-text) / var(--tw-text-opacity, 1))}
.dark\:focus\:outline-n-brand:focus:is(.dark *){outline-color:rgb(var(--cc-brand-text))}
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *){outline-color:rgb(var(--cc-brand-text))}