/**
 * La hoja del wizard de la reserva (rxs99, custom/amt/js.js). Salio de njs/adm.css el 2026-09-27.
 *
 * En el admin viaja en el bundle njs/app.css, pegada despues de adm.css (rxsAppCssSources):
 * ninguna regla posterior de adm.css pisa estas clases, asi que la cascada no cambia. Un sitio de
 * filas no carga app.css; ahi la pide el wizard mismo (rxs99EnsureCss) cuando .rxs99-section no
 * sale escondida. Sin esta hoja el wizard dibuja todos sus pasos a la vez.
 *
 * Lo demas lo pone Bootstrap. Un sitio sin Bootstrap trae su propio subconjunto acotado a
 * .rxs99-container (ver docs/sql/2026-09-26-medical-nativo-1349.php).
 *
 * Al final, las notas que el wizard dibuja entre la pregunta y las opciones (rxsNote, las arma
 * rxsNotesHtml() de njs/g.js): tambien salieron de adm.css el 27-09, por la misma razon.
 */

/**
 * RXS99 - Code99 Dynamic Forms
 * CSS Mínimo - Usa Bootstrap 4/5 para todo lo demás
 *
 * @version 2.0.0
 * @author RXS99
 */

/* ==========================================
   Variables CSS Personalizadas (Solo gradientes)
   ========================================== */
.rxs99-container {
    --rxs99-primary-gradient: linear-gradient(135deg, var(--rx-color1) 0%, var(--rx-color3) 100%);
    --rxs99-success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --rxs99-danger-gradient: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --rxs99-info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.mbhelper #code99-question{color:white}
/* ==========================================
   Animaciones de Transición
   ========================================== */
.rxs99-section {
    display: none;
}

.rxs99-section.active {
    display: block;
    animation: rxs99FadeIn 0.5s ease-in;
}

@keyframes rxs99FadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Botones con Gradientes
   ========================================== */
.rxs99-btn-primary-gradient {
    background: var(--rxs99-primary-gradient);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.rxs99-btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    color: white;
}

.rxs99-btn-success-gradient {
    background: var(--rxs99-success-gradient);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.rxs99-btn-success-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(17, 153, 142, 0.3);
    color: white;
}

.rxs99-btn-danger-gradient {
    background: var(--rxs99-danger-gradient);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.rxs99-btn-danger-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(238, 9, 121, 0.3);
    color: white;
}

/* ==========================================
   Cards de Opciones
   ========================================== */
.rxs99-option-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rxs99-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rxs99-primary-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.rxs99-option-card:hover::before {
    opacity: 0.1;
}

.rxs99-option-card:hover {
    border-color: #667eea;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
}

.rxs99-option-content {
    position: relative;
    z-index: 1;
}

.rxs99-option-number {
    display: inline-block;
    background: var(--rxs99-primary-gradient);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 35px;
    font-weight: 700;
    text-align:center;
    margin-bottom: 10px;
}

.rxs99-option-text {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.rxs99-option-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.rxs99-option-price {
    display: block;
    margin-top: 3px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #667eea;
}

.rxs99-option-btn-img .rxs99-option-price,
.btn .rxs99-option-price {
    display: inline;
    margin-top: 0;
    color: inherit;
    opacity: 0.85;
}

/* Card con media (imagen o numero): va al lado del texto, no arriba, asi las cards
   con imagen y las que solo tienen numero quedan alineadas igual en una lista mixta */
.rxs99-option-card-media .rxs99-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    width: 100%;
}

.rxs99-option-card-media .rxs99-option-image {
    width: 45px;
    height: 45px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.rxs99-option-card-media .rxs99-option-number {
    margin-bottom: 0;
    flex-shrink: 0;
}

.rxs99-option-btn-img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.rxs99-option-btn-img .rxs99-option-image {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.rxs99-search-wrap {
    position: relative;
}

.rxs99-search-wrap i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #a0aec0;
}

.rxs99-search-wrap input.form-control {
    padding-left: 40px !important;
    border-radius: 25px;
    border: 2px solid #e2e8f0;
}

.rxs99-search-wrap input:focus {
    border-color: #667eea;
    box-shadow: none;
    outline: none;
}

#code99-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.rxs99-breadcrumb-item {
    color: #718096;
    font-weight: 600;
}

/* etiqueta del paso ("Profesional", "Sede", ...): sin esto el breadcrumb es una
   fila de nombres sueltos y no se entiende qué es cada uno. */
.rxs99-breadcrumb-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #a0aec0;
}

.rxs99-breadcrumb-item:last-child {
    color: #667eea;
}

/* pasos ya respondidos: se puede volver a cualquiera con un click. Los prefilleados por la
   puerta de entrada (ops.prefill) no tienen paso al que volver: van sin cursor ni hover. */
.rxs99-breadcrumb-link {
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
}

.rxs99-breadcrumb-link:hover,
.rxs99-breadcrumb-link:focus {
    color: #667eea;
    border-bottom-style: solid;
    outline: none;
}

.rxs99-breadcrumb-fixed {
    cursor: default;
}

.rxs99-breadcrumb-sep {
    font-size: 0.65rem;
    color: #cbd5e0;
}

/* ==========================================
   Progress Bar Custom
   ========================================== */
.rxs99-progress-custom {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.rxs99-progress-fill {
    height: 100%;
    background: var(--rxs99-success-gradient);
    transition: width 0.5s ease;
}

/* ==========================================
   Badge con Gradiente
   ========================================== */
.rxs99-badge-gradient {
    background: var(--rxs99-info-gradient);
    color: white;
}
.rxs99-container.rxsShort .card.shadow-lg{
  background:transparent;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Notas del sitio (rxsNote) — la pieza que dibuja una FRASE cuando no es popup
   ni banner sino una tarjeta adentro de otra cosa (hoy: la informacion de un
   turno, docs/frontend/banners-popup-diario.md §26).

   Vive ACA (rxs99.css, salio de adm.css el 2026-09-27) y no en ui_v2.css a
   proposito: la nota se dibuja en la pagina PUBLICA, y ui_v2.css solo lo baja
   el sitio que tiene ui_v=2 (page.php:377 / index.php:806). En el admin y en
   las webs por deploy viaja en app.css, pegada despues de adm.css; un sitio de
   filas no carga app.css y la pide el wizard, que es quien dibuja las notas
   (rxs99EnsureCss, custom/amt/js.js). En adm.css se quedaba sin estilo ahi.
   ui_v2.css despues solo REDEFINE los tokens (intensidad "vivid"), nunca los
   define por primera vez: un token cuya unica definicion viviera ahi dejaria
   la nota sin pintar en cualquier tenant sin v2.

   Los valores no son nuevos. Salen de los dos lugares donde UI v2 ya tenia
   estos cuatro colores a mano, y que hasta ahora no compartian nada:
     - tinte al 16% + tinta legible: `.chat-main-box .badge-*` (ui_v2.css), que
       ya trae medido el contraste sobre su propio tinte en claro;
     - color pleno: `.rxs-ui-vivid .btn-*` (ui_v2.css).
   El tono "importante" es el unico que no sale de ahi: usa el ACENTO del sitio
   (--rx-v2-accent, con fallback a --rx-color1), o sea que cada centro lo ve de
   su color. Es lo que separa "importante para este centro" de "peligro".
--------------------------------------------------------------------------- */
:root {
    /* 0 - informacion */
    --rx-tone-0-bg: rgba(30, 136, 229, .12);
    --rx-tone-0-bd: rgba(30, 136, 229, .30);
    --rx-tone-0-ink: #0f4f96;
    /* 1 - atencion */
    --rx-tone-1-bg: rgba(245, 184, 61, .14);
    --rx-tone-1-bd: rgba(245, 184, 61, .38);
    --rx-tone-1-ink: #7a5000;
    /* 2 - importante (el acento del sitio) */
    --rx-tone-2-bg: var(--rx-v2-accent-soft, color-mix(in srgb, var(--rx-color1, #f28c28) 14%, transparent));
    --rx-tone-2-bd: color-mix(in srgb, var(--rx-v2-accent, var(--rx-color1, #f28c28)) 34%, transparent);
    --rx-tone-2-ink: var(--rx-v2-accent, var(--rx-color1, #f28c28));
    /* 3 - peligro */
    --rx-tone-3-bg: rgba(239, 68, 68, .12);
    --rx-tone-3-bd: rgba(239, 68, 68, .32);
    --rx-tone-3-ink: #9e1c11;
    /* 4 - listo */
    --rx-tone-4-bg: rgba(46, 207, 110, .14);
    --rx-tone-4-bd: rgba(46, 207, 110, .32);
    --rx-tone-4-ink: #0f6633;
    /* 5 - neutro (sin color: la nota que solo informa y no compite) */
    --rx-tone-5-bg: rgba(18, 25, 33, .05);
    --rx-tone-5-bd: rgba(18, 25, 33, .12);
    --rx-tone-5-ink: #4a545f;
    /* La superficie opaca de abajo del tinte. Tiene token propio porque --rx-v2-panel
       SOLO existe dentro de la capa v2: en un sitio sin v2 y en tema oscuro, tomar su
       fallback claro dejaba tinta clara sobre una tarjeta blanca. */
    --rx-tone-surface: var(--rx-v2-panel, #ffffff);
    --rx-tone-text: var(--rx-v2-text, #1d242c);
}

/* En OSCURO se invierte la regla del contraste: el tinte ya es oscuro, asi que
   la tinta buena es el color VIVO (la clara se lava). Es la misma nota que
   ui_v2.css deja escrita para los badges del chat, medida alla. */
body.thr-dark {
    --rx-tone-0-bg: rgba(80, 170, 245, .16);
    --rx-tone-0-bd: rgba(80, 170, 245, .34);
    --rx-tone-0-ink: #6ab5f5;
    --rx-tone-1-bg: rgba(245, 184, 61, .16);
    --rx-tone-1-bd: rgba(245, 184, 61, .34);
    --rx-tone-1-ink: #f5b83d;
    --rx-tone-3-bg: rgba(239, 68, 68, .18);
    --rx-tone-3-bd: rgba(239, 68, 68, .36);
    --rx-tone-3-ink: #ff6b6b;
    --rx-tone-4-bg: rgba(46, 207, 110, .16);
    --rx-tone-4-bd: rgba(46, 207, 110, .34);
    --rx-tone-4-ink: #2ecf6e;
    --rx-tone-5-bg: rgba(255, 255, 255, .06);
    --rx-tone-5-bd: rgba(255, 255, 255, .12);
    --rx-tone-5-ink: #9aa4b1;
    --rx-tone-surface: var(--rx-v2-panel, #171b20);
    --rx-tone-text: var(--rx-v2-text, #e8ecf1);
}

/* La grilla. Es el autogrid de Bootstrap y nada mas: la columna la pone
   options_tabs.bs_cols (domain.php:16188), asi que aca solo va el aire. */
.rxsNotes { margin: 0 0 14px; }
.rxsNotes > .row { margin-left: -6px; margin-right: -6px; }
.rxsNotes > .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }

/* La tarjeta. Un solo bloque para los seis tonos: lo unico que cambia son los
   tres tokens, y el tono se elige con data-tone (el smallint de la frase). */
.rxsNote {
    /* El tinte va como CAPA sobre una superficie opaca, no suelto: una nota se dibuja
       adentro de otra cosa —el encabezado de color de un turno, por ejemplo— y un fondo
       translucido al 12% se mezclaba con lo que hubiera atras, que es justo lo que rompe
       el contraste medido. Mismo criterio que la pastilla de estado del chat. */
    background: linear-gradient(var(--rx-tone-bg, var(--rx-tone-5-bg)), var(--rx-tone-bg, var(--rx-tone-5-bg))),
                var(--rx-tone-surface, #ffffff);
    border: 1px solid var(--rx-tone-bd, var(--rx-tone-5-bd));
    border-left: 4px solid var(--rx-tone-ink, var(--rx-tone-5-ink));
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--rx-tone-text);
    height: 100%;
    padding: 12px 14px;
    text-align: left;
}
.rxsNote[data-tone="0"] { --rx-tone-bg: var(--rx-tone-0-bg); --rx-tone-bd: var(--rx-tone-0-bd); --rx-tone-ink: var(--rx-tone-0-ink); }
.rxsNote[data-tone="1"] { --rx-tone-bg: var(--rx-tone-1-bg); --rx-tone-bd: var(--rx-tone-1-bd); --rx-tone-ink: var(--rx-tone-1-ink); }
.rxsNote[data-tone="2"] { --rx-tone-bg: var(--rx-tone-2-bg); --rx-tone-bd: var(--rx-tone-2-bd); --rx-tone-ink: var(--rx-tone-2-ink); }
.rxsNote[data-tone="3"] { --rx-tone-bg: var(--rx-tone-3-bg); --rx-tone-bd: var(--rx-tone-3-bd); --rx-tone-ink: var(--rx-tone-3-ink); }
.rxsNote[data-tone="4"] { --rx-tone-bg: var(--rx-tone-4-bg); --rx-tone-bd: var(--rx-tone-4-bd); --rx-tone-ink: var(--rx-tone-4-ink); }
.rxsNote[data-tone="5"] { --rx-tone-bg: var(--rx-tone-5-bg); --rx-tone-bd: var(--rx-tone-5-bd); --rx-tone-ink: var(--rx-tone-5-ink); }

.rxsNote-h {
    align-items: center;
    color: var(--rx-tone-ink, var(--rx-tone-5-ink));
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    line-height: 1.3;
    margin: 0 0 6px;
}
.rxsNote[data-tone="2"] > .rxsNote-h { color: var(--rx-tone-text); }
.rxsNote[data-tone="2"] > .rxsNote-h > .fa,
.rxsNote[data-tone="2"] > .rxsNote-h > .fas,
.rxsNote[data-tone="2"] > .rxsNote-h > .far { color: var(--rx-tone-2-ink); }

.rxsNote-h > .fa,
.rxsNote-h > .fas,
.rxsNote-h > .far { flex: none; font-size: 15px; }

/* El texto de la frase entra por v-html y puede traer <p>/<ul>: se le saca el
   margen de arriba al primero y el de abajo al ultimo para que la tarjeta no
   quede con aire de mas adentro. */
.rxsNote-b { color: inherit; font-size: 14px; line-height: 1.5; opacity: .92; }
.rxsNote-b > :first-child { margin-top: 0; }
.rxsNote-b > :last-child { margin-bottom: 0; }

/* La pastilla: mismo juego de tokens, para cuando la nota va inline y no como
   tarjeta (una fila de la lista, el titulo de un turno). */
.rxsToneBadge {
    background: var(--rx-tone-bg, var(--rx-tone-5-bg));
    border-radius: 999px;
    color: var(--rx-tone-ink, var(--rx-tone-5-ink));
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
}
.rxsToneBadge[data-tone="0"] { --rx-tone-bg: var(--rx-tone-0-bg); --rx-tone-ink: var(--rx-tone-0-ink); }
.rxsToneBadge[data-tone="1"] { --rx-tone-bg: var(--rx-tone-1-bg); --rx-tone-ink: var(--rx-tone-1-ink); }
.rxsToneBadge[data-tone="2"] { --rx-tone-bg: var(--rx-tone-2-bg); --rx-tone-ink: var(--rx-tone-2-ink); }
.rxsToneBadge[data-tone="3"] { --rx-tone-bg: var(--rx-tone-3-bg); --rx-tone-ink: var(--rx-tone-3-ink); }
.rxsToneBadge[data-tone="4"] { --rx-tone-bg: var(--rx-tone-4-bg); --rx-tone-ink: var(--rx-tone-4-ink); }
.rxsToneBadge[data-tone="5"] { --rx-tone-bg: var(--rx-tone-5-bg); --rx-tone-ink: var(--rx-tone-5-ink); }