:root {
    /* Header brand logo image  */
    --brand-logo: url('../app/resources/qmLogo.png');
    /* Header brand logo background color */
    --brand-logo-background: transparent;
    /* Application background color */
    --app-bg-primary-color: #FFFFFF;

    /* Background color for Services,Branches,delay time, appointment arrival, ticket layout in waiting page, etc */
    /* BCR: Sky Blue (guía de marca pág. 4) */
    --primary-bg-color: #DCE7FF;
    /* Text colour for Services,Branches,delay time, appointment arrival, ticket layout in waiting page, etc */
    /* BCR: Main-Primary (guía de marca pág. 4). Antes #0072CE: sobre #DCE7FF daba 3,94:1 y no
       cumplía WCAG AA (4,5:1); #0033A0 da 8,54:1. */
    --primary-text-color: #0033A0;
    /* Background color for Services,Branches,delay time when selected and ticket layout in calling page, etc */
    /* BCR: Main-Primary (guía de marca pág. 4) */
    --secondary-bg-color: #0033A0;
    /* Text color for Services,Branches,delay time when selected and ticket layout in calling page, etc */
    --secondary-text-color: #FFFFFF;
    /* Service Groups text color */
    /* BCR: Main-Primary (guía de marca pág. 4); mismo motivo de contraste que --primary-text-color */
    --service-group-text-color: #0033A0;
    /* Service Groups background color (previously undefined, fell back to hardcoded #c1c1c1) */
    /* BCR: Sky Blue (guía de marca pág. 4) */
    --group-button-background: #DCE7FF;
    /* Service group seperator line color */
    --service-group-line-color: rgba(0, 0, 0, 0.2);


    /* Text color used throughout the application in common areas which are not specific to any UI component.  */
    /* BCR: Tertiary text (guía de marca pág. 4) */
    --general-text-color: #2C3436;

    /* Footer logo */
    --footer-logo: url('../app/resources/brand_logo.png');
    /* Footer text */
    /* BCR: Tertiary text (guía de marca pág. 4) */
    --footer-text-color: #2C3436;

    /* Privacy & Cookie concent button text color*/
    /* BCR: Tertiary text (guía de marca pág. 4) */
    --pop-up-button-text-color: #2C3436;

    /* Bottom button/get in line button background color */
    /* BCR: Main-Primary, botón Contained/Primary (guía de marca pág. 4, 24) */
    --get-in-line-btn-bg-color: #0033A0;
    /* Bottom button/get in line text color*/
    --get-in-line-btn-text-color: #FFFFFF;
    /* Bottom button leave the line color*/
    /* BCR: Error/Main (guía de marca pág. 5) */
    --leave-button-text-color: #DE1220;
    /* Secondary button text color which is blue by default */
    /* BCR: Main-Primary (guía de marca pág. 4, botón Outlined/Primary pág. 24). En el bundle
       esta variable solo la usan los botones contorneados y sus íconos (.secondary-btn-path,
       .svg-path-buttons, .delay-btn, .back-button, .bottom_button, .estimated_*). Antes
       #001238: los íconos quedaban más oscuros que el texto/borde #0033A0. */
    --secondary-btn-text-color: #0033A0;
    /* Error text color for the app's own field errors (.feild-error, .phone-num-error).
       The bundle uses var(--eror-text) (sic) but never defines it. */
    /* BCR: Error/Main (guía de marca pág. 5) */
    --eror-text: #DE1220;
}
/* Replace bell icon with Tucan logo in the Tucan validation popup */
.form-buttons-container.popup .form-icon svg {
    display: none !important;
}
.form-buttons-container.popup .form-icon {
    width: 48px;
    height: 48px;
    background-image: url('../../img/logo_tucan.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* BCR brand typography (Guía de Diseño Digital BCR v2.0, pág. 7-8): Montserrat para
   títulos (H1-H6), Roboto para cuerpo, botones y alertas. Los .ttf (Montserrat, SIL OFL
   1.1, ver Montserrat-OFL.txt) están en src/app/resources/.
   Las url() de @font-face se resuelven relativas a ESTE archivo (/app/theme/), por eso
   es '../resources/...' (= /app/resources/). Ojo: no es igual que las url() dentro de
   variables CSS como --brand-logo, que se resuelven donde se usan (bundle.min.css). */
@font-face {
    font-family: Montserrat-Bold;
    src: url('../resources/Montserrat-Bold.ttf');
    font-display: swap;
}
@font-face {
    font-family: Montserrat-Medium;
    src: url('../resources/Montserrat-Medium.ttf');
    font-display: swap;
}
@font-face {
    font-family: Montserrat-Regular;
    src: url('../resources/Montserrat-Regular.ttf');
    font-display: swap;
}
@font-face {
    font-family: Montserrat-Light;
    src: url('../resources/Montserrat-Light.ttf');
    font-display: swap;
}

/* El bundle compilado no referencia Montserrat; los títulos de todas las pantallas son
   <h1>-<h6> reales, así que se les asigna aquí por selector de elemento (no está
   scopeado por Angular). H1 en Regular (no Bold): en las pantallas de ejemplo de la guía
   (pág. 38 y 40) los títulos de formularios/pantallas son livianos; Bold queda reservado
   para mensajes de alto impacto. H2-H3 Regular, H4-H6 Light (guía pág. 8). Roboto queda
   como respaldo si la fuente no carga. */
h1 {
    font-family: Montserrat-Regular, Roboto-Regular, sans-serif !important;
    font-weight: 400 !important;
}
h2,
h3 {
    font-family: Montserrat-Regular, Roboto-Regular, sans-serif !important;
}
h4,
h5,
h6 {
    font-family: Montserrat-Light, Roboto-Light, sans-serif !important;
}

/* Títulos de página sobre fondo blanco: Dark-Primary #001238 (guía pág. 4; así se ven
   los títulos en las pantallas de ejemplo, pág. 38 y 40). NO se aplica a todos los h1:
   en "Es tu turno" (.visitcall-heading-*) y en el tiquete los títulos van sobre el fondo
   azul #0033A0 en blanco y quedarían ilegibles.
   - .sub-heading-text-2: oficinas, servicios, hora de llegada y "Gracias por visitarnos".
   - .customer-data-title: formulario "Contanos sobre vos" (el bundle le daba 16px y
     #2C3436, color de texto de cuerpo).
   - .customer-otp-heading, .privacy-policy-title: PIN y política de privacidad. */
.sub-heading-text-2,
.customer-data-title,
.customer-otp-heading,
.privacy-policy-title {
    color: #001238 !important;
    font-family: Montserrat-Regular, Roboto-Regular, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.25px;
}
.sub-heading-text-2 {
    font-size: 20px !important;
    line-height: 1.4 !important;
}
.customer-data-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

/* Show "Tipo de Identificación" (injected, see theme-loader.js) then "Cédula"
   (customerId) first in the customer-data form (Nombre/Apellidos/Cédula/Teléfono
   today). This is a purely visual CSS reorder — it does not touch the compiled
   Angular template — done via flexbox `order` on the direct children of
   #customer-data-container, targeting each field by its <input name="..."> with
   :has() since the field wrapper <div>s carry no class/id of their own.
   Requires :has() support (all current major browsers). If unsupported, this block is
   silently ignored and the original Nombre/Apellidos/Cédula/Teléfono order is kept. */
#customer-data-container {
    display: flex;
    flex-direction: column;
}
#customer-data-container > .customer-data-title {
    order: 1;
}
#customer-data-container > .qm-doc-type-field {
    order: 2;
}
#customer-data-container > div:has(input[name="customerId"]) {
    order: 3;
}
#customer-data-container > div:has(input[name="firstName"]) {
    order: 4;
}
#customer-data-container > div:has(input[name="lastName"]) {
    order: 5;
}
#customer-data-container > div:has(input[name="phoneNumber"]) {
    order: 6;
}

/* Footer logo (the "qm-brand-logo" img — used only for the footer brand logo, the
   header logo uses a separate "logo" class) shown a bit larger. Overrides the
   compiled default of width:67px. !important matches this file's existing convention
   for overriding bundle.min.js component styles. */
.qm-brand-logo {
    width: 95px !important;
}

/* Visual feedback for Nombre/Apellidos once auto-completados y bloqueados por
   cédula identificada (ver src/app/theme/theme-loader.js). BCR: Grey (guía de
   marca pág. 4) para el fondo de un campo no editable. */
.qm-padron-locked {
    background-color: #F3F4F5 !important;
    cursor: not-allowed;
}

/* "Tipo de Identificación" dropdown injected by theme-loader.js — reuses the
   existing .qm-customer-field card and .customer-id-input box so it blends in
   visually with Cédula/Nombre/Apellidos without needing to touch the compiled
   Angular styles. */
/* NOTA: este bloque no puede apoyarse en las clases .qm-customer-field /
   .customer-id-input del bundle (aunque se les pongan como clase extra) porque esas
   reglas están scopeadas por Angular con un atributo [_ngcontent-xxxx] que Angular
   solo agrega a los elementos que él mismo crea. Un <div>/<select> creado con
   document.createElement() nunca tiene ese atributo, así que esas reglas jamás
   matchean — hay que declarar el look completo acá, sin depender de heredarlo. */
.qm-doc-type-field {
    order: 2;
    margin: 10px auto;
    max-width: 431px;
    width: calc(88.5vw + 21px);
    font-family: Roboto-Regular;
    position: relative;
    background: #fff;
    padding: 12px 15px;
    border-radius: 10px;
    box-sizing: border-box;
}
.qm-doc-type-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15px;
    color: #2C3436;
    margin: 0 0 6px 4px;
    font-family: Roboto-Regular;
}
.qm-doc-type-select {
    border: 1px solid #001238;
    color: #000000d1;
    width: 100%;
    font-size: 16px;
    height: 55px;
    padding: 5px 40px 5px 20px;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Roboto-Regular;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    /* Archivo y no data: URI — la CSP de server.js solo permite img-src 'self' */
    background-image: url('../resources/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    cursor: pointer;
}

/* Error text for the new "Tipo de Identificación"-aware validation on Cédula/DIMEX/
   Expediente. Reuses the .feild-error look (font-size/color) already used by the
   app's own field errors. */
.qm-doc-error {
    font-size: 12px;
    color: var(--eror-text, #DE1220);
    margin: 4px 15px 0;
    font-family: Roboto-Regular;
}

/* Texto de ayuda fijo bajo el campo de identificación (theme-loader.js lo cambia según
   el tipo elegido y lo oculta mientras se muestra .qm-doc-error). Guía BCR pág. 38:
   helper text pequeño bajo el campo. #2C3436 sobre blanco = 12,7:1. */
.qm-doc-help {
    font-size: 12px;
    line-height: 1.4;
    color: #2C3436;
    margin: 4px 15px 0;
    font-family: Roboto-Regular;
}
.qm-doc-help[hidden] {
    display: none;
}

/* Small inline "Cargando..." overlay shown over the identification-number field
   while the padrón lookup is in flight (Cédula nacional only). */
.qm-padron-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 5;
}
.qm-padron-overlay img {
    width: 24px;
    height: 24px;
    animation: qm-padron-spin 1s linear infinite;
}
.qm-padron-overlay span {
    font-size: 14px;
    font-family: Roboto-Regular;
    color: #2C3436;
}
@keyframes qm-padron-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------------
   Botones según la Guía de Diseño Digital BCR (pág. 24): píldora, Roboto Medium en
   MAYÚSCULAS. Colores MEDIDOS en los píxeles de la diapositiva pág. 24 (14/10/2026):
     Contained/Primary: #0033A0, hover #00226B (= tono "21" de la paleta), disabled #E1E2E7
     Outlined/Primary : fondo blanco, borde 1px azul suave, texto #0033A0, hover #B3CCFF
     Outlined/Error   : borde 1px rojo suave, texto #DE1220, hover rojo al 4%
   Reemplaza los colores heredados de Qmatic (verde #dcf7cf, guindo #a9023b, #0079C2).
   ESPECIFICIDAD: los estilos de los componentes del bundle van en <style> agregados
   DESPUÉS de este archivo y llevan [_ngcontent-xxx] (clase + atributo = 0,2,0), varios
   con !important (.delay-btn, .back-button, .secondary-button, .leave-line,
   .estimated_*). Una regla de una sola clase aquí pierde aunque tenga !important; por eso
   los contorneados se escriben con la clase repetida 3 veces (.x.x.x = 0,3,0).
   --------------------------------------------------------------------------------- */

/* Base común de botones de acción */
.accent-btn,
.bottom_button,
.form-button,
.ewt-btn,
.phone-secondary-btn {
    font-family: Roboto-Medium, Roboto-Regular, sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 999px !important;
}

/* Contained / Primary: botón principal ("Hacer fila", etc.). Varios botones contorneados
   del bundle comparten .accent-bg-color con el principal; la lista de exclusión debe ser
   la MISMA que la de "Outlined / Primary" de abajo. Si se agrega una variante contorneada,
   agregarla en los dos lugares. (Antes faltaba .estimated_enabled: en hover quedaba con
   fondo #001238 y texto azul ilegible — "Indicar hora de llegada".) */
.accent-btn.accent-bg-color:not(.secondary-button):not(.delay-btn):not(.leave-line):not(.estimated_enabled):not(.estimated_disabled) {
    min-height: 48px;
    box-shadow: 0 2px 4px rgba(0, 18, 56, .2);
}
.accent-btn.accent-bg-color:not(.secondary-button):not(.delay-btn):not(.leave-line):not(.estimated_enabled):not(.estimated_disabled):hover {
    background: #00226B !important;
}

/* Outlined / Primary */
.secondary-button.secondary-button.secondary-button,
.delay-btn.delay-btn.delay-btn,
.back-button.back-button.back-button,
.bottom_button.bottom_button.bottom_button,
.estimated_enabled.estimated_enabled.estimated_enabled,
.estimated_disabled.estimated_disabled.estimated_disabled {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(0, 51, 160, .5) !important;
    color: #0033A0 !important;
}
.secondary-button.secondary-button.secondary-button:hover,
.delay-btn.delay-btn.delay-btn:hover,
.back-button.back-button.back-button:hover,
.bottom_button.bottom_button.bottom_button:hover,
.estimated_enabled.estimated_enabled.estimated_enabled:hover {
    background-color: #B3CCFF !important;
    border-color: rgba(0, 51, 160, .6) !important;
}

/* Outlined / Error: salir de la fila */
.leave-line.leave-line.leave-line {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(222, 18, 32, .5) !important;
    color: #DE1220 !important;
}
.leave-line.leave-line.leave-line:hover {
    background-color: rgba(175, 14, 25, .04) !important;
}

/* Popups (validación, confirmaciones): confirmar = Contained/Primary, el resto =
   Outlined/Primary. Antes: verde #dcf7cf y gris #323232. */
.form-button.form-button.form-button {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 51, 160, .5) !important;
    color: #0033A0 !important;
}
.form-button.form-button.form-button:hover {
    background: #B3CCFF !important;
}
.form-button.form-button.form-button-primary {
    background: #0033A0 !important;
    border-color: #0033A0 !important;
    color: #FFFFFF !important;
}
.form-button.form-button.form-button-primary:hover {
    background: #00226B !important;
}

/* Alerta de tiempo estimado: antes verde #dcf6cf */
.ewt-btn.ewt-btn.ewt-btn {
    background: #0033A0 !important;
    color: #FFFFFF !important;
}
.ewt-btn.ewt-btn.ewt-btn:hover {
    background: #00226B !important;
}

/* Botón de texto del teléfono: antes guindo #a9023b */
.phone-secondary-btn {
    color: #0033A0 !important;
}

/* Disabled: gris de la guía (#E1E2E7 medido), para cualquier variante. Clase repetida
   para ganarle también a las reglas de contorneados de arriba. */
.accent-btn.accent-btn.accent-btn:disabled,
.bottom_button.bottom_button.bottom_button:disabled,
.form-button.form-button.form-button:disabled,
.accent-btn.accent-btn.accent-btn[disabled],
.bottom_button.bottom_button.bottom_button[disabled] {
    background: #E1E2E7 !important;
    border-color: #E1E2E7 !important;
    color: #9AA0A6 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Foco visible (navegación con teclado), anillo #0033A0 al 30% (guía pág. 4 "Focus
   Visible" + accesibilidad, informe CX sec. 5) */
.accent-btn:focus-visible,
.bottom_button:focus-visible,
.form-button:focus-visible,
.ewt-btn:focus-visible,
.phone-secondary-btn:focus-visible,
.qm-doc-type-select:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 160, .3) !important;
}

/* ---------------------------------------------------------------------------------
   Mensajes de error con icono + texto + color (informe CX sec. 5: no depender solo
   del rojo). Aplica a los errores propios del bundle y al de "Tipo de Identificación".
   --------------------------------------------------------------------------------- */
.feild-error,
.phone-num-error,
.qm-doc-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.feild-error:not(:empty)::before,
.phone-num-error:not(:empty)::before,
.qm-doc-error:not(:empty)::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    /* Archivo y no data: URI — la CSP de server.js solo permite img-src 'self' */
    background: url('../resources/error-icon.svg') no-repeat center / contain;
}

/* ---------------------------------------------------------------------------------
   Tiquete (guía pág. 7-8): el número es el mensaje de mayor impacto -> Montserrat Bold
   (H1 Bold "mensajes clave que requieren alto impacto visual"); servicio y oficina en
   Montserrat Medium (estilo "Caption"). Antes: Roboto-Medium con font-weight 700.
   - font-weight 400: el archivo Montserrat-Bold ya es negrita; pedir 700 encima haría
     que el navegador la engrose otra vez (negrita sintética).
   - Color #001238 SOLO en .text-dark (tiquete en espera, sobre celeste). Cuando llaman
     al cliente el tiquete usa .text-light sobre fondo azul y conserva el blanco.
   - Clase repetida 3 veces: el bundle declara .ticket-service-name con
     font-weight:700 !important y especificidad de clase + atributo de Angular.
   --------------------------------------------------------------------------------- */
.ticket_nmbr.ticket_nmbr.ticket_nmbr {
    font-family: Montserrat-Bold, Roboto-Bold, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -1px;
}
.ticket-service-name.ticket-service-name.ticket-service-name {
    font-family: Montserrat-Medium, Roboto-Medium, sans-serif !important;
    font-weight: 400 !important;
}
.ticket_nmbr.ticket_nmbr.text-dark,
.ticket-service-name.ticket-service-name.text-dark {
    color: #001238 !important;
}
.ticket_branch.ticket_branch.ticket_branch {
    font-family: Montserrat-Medium, Roboto-Medium, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .4px;
}

/* ---------------------------------------------------------------------------------
   Grupos de servicios (app-service-group-item, .group-btn): mismo óvalo que los
   servicios (.service-btn del bundle: border-radius 25px, margen inferior 16px).
   Antes el grupo era una barra con línea separadora inferior y, abierto
   (.group-btn-active), solo 3px de radio. Clase repetida 3 veces para ganarle a
   .group-btn[_ngcontent] / .group-btn-active[_ngcontent] (0,2,0).
   Abierto: margen inferior 6px + padding 10px de .service-selected = 16px hasta el
   primer servicio, igual que la separación entre servicios.
   --------------------------------------------------------------------------------- */
.group-btn.group-btn.group-btn {
    border-radius: 25px !important;
    border-bottom: none !important;
    margin: 0 auto 16px !important;
    overflow: hidden;
}
.group-btn.group-btn.group-btn-active {
    border-radius: 25px !important;
    margin-bottom: 6px !important;
}