/* Centro de envío RIPS · interfaz operativa FEV-RIPS */
.rips-command {
    --rips-ink: #09243b;
    --rips-navy: #0b2f4a;
    --rips-blue: #087dbb;
    --rips-cyan: #38d6cf;
    --rips-mint: #dff8f3;
    --rips-paper: #f5f9fb;
    --rips-line: #d7e5eb;
    flex-direction: column;
    max-width: 1120px !important;
    gap: 14px;
    padding-bottom: 56px !important;
    color: var(--rips-ink);
}

/* Una vista RIPS inactiva debe obedecer el mismo contrato que las demás
   pestañas. La versión anterior forzaba display:flex incluso sin .active,
   haciendo que RIPS apareciera sobre Pacientes, Citas y otros módulos. */
#view-rips.rips-command {
    display: none !important;
}

#view-rips.rips-command.active {
    display: flex !important;
}

.rips-command__heading { margin: 8px 2px 4px !important; }
.rips-command__heading > div:first-child {
    background: var(--rips-mint) !important;
    box-shadow: none !important;
    border-radius: 13px !important;
    padding: 11px !important;
}
.rips-command__heading h2 { color: var(--rips-ink) !important; font-size: clamp(1.45rem, 3vw, 2rem) !important; }
.rips-command__heading p { color: #587183 !important; }

.rips-cloud-hero {
    order: 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    padding: 16px 20px 14px;
    border: 1px solid #c8dfe9;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(18, 93, 128, .07);
    color: var(--rips-ink);
}
.rips-cloud-hero::after { display: none; }
.rips-eyebrow {
    color: #087dbb;
    font: 800 .67rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.rips-cloud-hero h3 { margin: 5px 0 3px; font-size: 1.05rem; letter-spacing: -.025em; }
.rips-cloud-hero p { margin: 0; max-width: 610px; color: #597487; font-size: .8rem; line-height: 1.45; }
.rips-cloud-state {
    z-index: 1;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    padding: 10px 13px;
    border: 1px solid #d7e5eb;
    border-radius: 12px;
    background: #f5f9fb;
}
.rips-cloud-state > .material-symbols-outlined { color: #f8c65b; }
.rips-cloud-state.is-ready { border-color: #a6dfd3; background: #e9f8f4; }
.rips-cloud-state.is-ready > .material-symbols-outlined { color: #61e9cd; }
.rips-cloud-state strong, .rips-cloud-state small { display: block; }
.rips-cloud-state strong { color: #173e55; font-size: .79rem; }
.rips-cloud-state small { margin-top: 2px; color: #688091; font-size: .67rem; }
.rips-route {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding-top: 12px;
    border-top: 1px solid #e1ebef;
}
.rips-route span { display: flex; align-items: center; gap: 7px; color: #31576d; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.rips-route i { color: #087dbb; font: 800 .62rem ui-monospace, SFMono-Regular, Consolas, monospace; font-style: normal; }
.rips-route b { height: 1px; background: #b8dae5; }

.rips-primary-flow { order: 1; border: 1px solid #b9dce7 !important; border-radius: 24px !important; padding: 25px !important; box-shadow: 0 14px 34px rgba(9, 73, 103, .09) !important; }
.rips-primary-flow > h4 > div { background: var(--rips-mint) !important; color: #087c76 !important; }
.rips-primary-flow > h4 > span { background: #eaf5fa !important; color: #236179 !important; }
.rips-primary-flow #btn-flujo-fevRips {
    background: linear-gradient(110deg, #087dbb, #075b8b) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 18px rgba(8, 93, 139, .22) !important;
}
.rips-primary-flow #flujo-paciente-seleccionado { background: #e9f8f6 !important; border-color: #b6e8e1 !important; color: #08766f !important; }
.rips-primary-flow #paso-preparar,
.rips-primary-flow #paso-fev,
.rips-primary-flow #paso-muv { border-radius: 14px !important; min-height: 66px; }

.rips-xml-card { order: 2; border: 1px solid var(--rips-line) !important; background: var(--rips-paper) !important; box-shadow: none !important; }
.rips-batch-card { order: 3; border: 1px solid var(--rips-line) !important; box-shadow: none !important; }
.rips-batch-card > div:first-child { background: #f3f7f9 !important; border-color: var(--rips-line) !important; }
.rips-individual-card { order: 4; border: 1px solid var(--rips-line) !important; box-shadow: none !important; }
.rips-settings-grid { order: 5; }
.rips-settings-grid > .card { border: 1px solid var(--rips-line) !important; box-shadow: none !important; }
.rips-settings-grid > .card > div:first-child { background: #f3f7f9 !important; }
.rips-advanced-panel { display: none !important; }
.rips-technical-url { display: none; }

.rips-command button { font-family: inherit; }
.rips-command button:focus-visible,
.rips-command input:focus-visible,
.rips-command select:focus-visible {
    outline: 3px solid rgba(56, 214, 207, .36) !important;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .rips-command { padding: 12px 10px 42px !important; gap: 13px; }
    .rips-cloud-hero { grid-template-columns: 1fr; padding: 21px 18px 17px; border-radius: 19px; }
    .rips-cloud-state { width: auto; }
    .rips-route { grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .rips-route b { display: none; }
    .rips-route span { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
    .rips-primary-flow { padding: 18px !important; }
    .rips-primary-flow > div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    .rips-settings-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rips-command *, .rips-command *::before, .rips-command *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}