/* =====================================================================
   TEMA OSCURO DE RUTATORTILLA
   Un solo archivo para los cuatro perfiles: negocio, mototortillero,
   cliente y adulto mayor. Los tonos salen del diseño aprobado.
   ===================================================================== */

:root {
    --rt-fondo:      #12141a;   /* fondo de la página */
    --rt-tarjeta:    #1a1d26;   /* tarjetas y paneles */
    --rt-tarjeta-2:  #232734;   /* cuadros de icono, elementos internos */
    --rt-borde:      #2a2f3d;
    --rt-texto:      #ffffff;
    --rt-texto-2:    #d1d5db;
    --rt-texto-3:    #9ca3af;
    --rt-texto-4:    #6b7280;

    --rt-naranja:    #FF6B00;
    --rt-azul:       #3b82f6;
    --rt-verde:      #22c55e;
    --rt-ambar:      #f59e0b;
    --rt-rojo:       #ef4444;
}

/* Bootstrap 5.3 pinta el fondo con sus propias variables --bs-*.
   Hay que redefinirlas o el tema oscuro queda tapado por el blanco. */
:root, [data-bs-theme=light] {
    --bs-body-bg: #12141a;
    --bs-body-color: #d1d5db;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #9ca3af;
    --bs-tertiary-bg: #1a1d26;
    --bs-border-color: #2a2f3d;
    --bs-card-bg: #1a1d26;
    --bs-heading-color: #ffffff;
}

html, body {
    background: var(--rt-fondo) !important;
    color: var(--rt-texto-2) !important;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 { color: var(--rt-texto); }

/* ---------- Barra superior ---------- */
.rt-barra {
    background: var(--rt-fondo);
    border-bottom: 1px solid #1f2430;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 900;
}
.rt-marca { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.rt-logo {
    width:34px; height:34px; border-radius:10px; background:var(--rt-naranja);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem;
}
.rt-marca-nombre { color:var(--rt-texto); font-size:.95rem; font-weight:600; line-height:1.2; }
.rt-marca-sub { color:var(--rt-texto-4); font-size:.75rem; }
.rt-btn-menu {
    background:none; border:none; color:var(--rt-texto-3); font-size:1.5rem;
    line-height:1; padding:.25rem .4rem; cursor:pointer;
}

/* ---------- Menú lateral deslizable ---------- */
.rt-menu-fondo {
    position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000;
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.rt-menu-fondo.abierto { opacity:1; visibility:visible; }

.rt-menu {
    position:fixed; top:0; left:0; bottom:0; width:280px; max-width:85vw;
    background:var(--rt-tarjeta); z-index:1001; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease;
    padding:1.1rem 0;
}
.rt-menu.abierto { transform:translateX(0); }

.rt-menu-perfil { padding:0 1.1rem 1.1rem; display:flex; align-items:center; gap:.7rem; }
.rt-menu-nombre { color:var(--rt-texto); font-size:.98rem; font-weight:600; }
.rt-menu-rol { color:var(--rt-texto-4); font-size:.78rem; }

.rt-menu-grupo {
    color:var(--rt-texto-4); font-size:.7rem; letter-spacing:.1em;
    padding:.9rem 1.1rem .45rem; text-transform:uppercase;
}
.rt-menu-item {
    display:flex; align-items:center; gap:.8rem; padding:.7rem 1.1rem;
    color:var(--rt-texto-2); text-decoration:none; font-size:.95rem;
    border-left:3px solid transparent;
}
.rt-menu-item:hover { background:var(--rt-tarjeta-2); color:var(--rt-texto); }
.rt-menu-item.activo {
    background:var(--rt-tarjeta-2); border-left-color:var(--rt-naranja); color:var(--rt-texto);
}
.rt-menu-item.activo .rt-menu-icono { color:var(--rt-naranja); }
.rt-menu-icono { font-size:1.2rem; color:var(--rt-texto-3); width:1.4rem; text-align:center; }
.rt-menu-texto { flex:1; }
.rt-menu-conteo {
    background:var(--rt-naranja); color:#fff; font-size:.75rem; min-width:22px; height:22px;
    border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 .35rem;
}
.rt-menu-sep { height:1px; background:var(--rt-borde); margin:.8rem 1.1rem; }
.rt-menu-salir { color:#f87171; }
.rt-menu-salir .rt-menu-icono { color:#f87171; }

/* ---------- Tarjetas y contenido ---------- */
/* Ancho fluido: en celular ocupa todo, en pantallas grandes se limita
   para que las líneas de texto no queden larguísimas. */
.rt-contenido { padding:1rem; width:100%; margin:0 auto; }
@media (min-width: 992px) {
    .rt-contenido { max-width: 1140px; padding:1.5rem; }
}

/* En pantallas anchas el menú puede quedarse fijo a la izquierda. */
@media (min-width: 1200px) {
    .rt-menu { transform:none; box-shadow:none; border-right:1px solid var(--rt-borde); }
    .rt-menu-fondo { display:none; }
    body.rt-con-menu { padding-left:280px; }
    body.rt-con-menu .rt-barra { padding-left:1.5rem; }
    .rt-btn-menu { display:none; }
}
.rt-eti-grupo {
    color:var(--rt-texto-4); font-size:.7rem; letter-spacing:.08em;
    text-transform:uppercase; margin:1.3rem 0 .6rem;
}
.rt-tarjeta {
    background:var(--rt-tarjeta); border-radius:12px; padding:.9rem 1rem; margin-bottom:.6rem;
}
.rt-kpi { background:var(--rt-tarjeta); border-radius:12px; padding:.9rem; border-left:3px solid var(--rt-texto-4); }
.rt-kpi-num { color:var(--rt-texto); font-size:1.6rem; font-weight:600; line-height:1; margin-top:.35rem; }
.rt-kpi-eti { color:var(--rt-texto-3); font-size:.78rem; margin-top:.2rem; }
.rt-kpi.ambar { border-left-color:var(--rt-ambar); }
.rt-kpi.azul  { border-left-color:var(--rt-azul); }
.rt-kpi.verde { border-left-color:var(--rt-verde); }
.rt-kpi.naranja { border-left-color:var(--rt-naranja); }

.rt-icono-caja {
    width:34px; height:34px; border-radius:10px; background:var(--rt-tarjeta-2);
    display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}

.rt-fila {
    background:var(--rt-tarjeta); border-radius:12px; padding:.8rem .9rem; margin-bottom:.5rem;
    display:flex; align-items:center; gap:.75rem; cursor:pointer; border:none; width:100%; text-align:left;
}
.rt-fila-titulo { color:var(--rt-texto); font-size:.95rem; }
.rt-fila-sub { color:var(--rt-texto-4); font-size:.82rem; }

.rt-btn-principal {
    background:var(--rt-naranja); border:none; border-radius:14px; padding:1.05rem;
    width:100%; color:#fff; font-size:1.05rem; font-weight:600; text-align:center;
}
.rt-btn-principal small { display:block; color:#ffd9bd; font-size:.85rem; font-weight:400; margin-top:.2rem; }
.rt-btn-secundario {
    background:var(--rt-tarjeta); border:1px solid var(--rt-borde); border-radius:14px;
    padding:.95rem; width:100%; color:var(--rt-texto-2); font-size:.98rem;
}

.rt-aviso-vivo {
    background:#132033; border-left:3px solid var(--rt-azul); border-radius:12px;
    padding:.85rem .9rem; margin-bottom:1rem; display:flex; align-items:center; gap:.7rem; cursor:pointer;
}
.rt-aviso-titulo { color:#93c5fd; font-size:.95rem; font-weight:600; }
.rt-aviso-sub { color:#6b93c4; font-size:.82rem; }

/* Pestañas */
.rt-tabs { display:flex; gap:.4rem; margin-bottom:.9rem; flex-wrap:wrap; }
.rt-tab {
    background:var(--rt-tarjeta); color:var(--rt-texto-3); border:none;
    font-size:.85rem; padding:.45rem .9rem; border-radius:999px;
    display:flex; align-items:center; gap:.4rem;
}
.rt-tab.activa { background:var(--rt-naranja); color:#fff; }
.rt-tab-conteo { background:var(--rt-rojo); color:#fff; font-size:.7rem; padding:0 .35rem; border-radius:999px; }
.rt-vista { display:none; }
.rt-vista.activa { display:block; }

/* Ajustes sobre Bootstrap para que no rompa el tema */
.card, .list-group-item { background:var(--rt-tarjeta); color:var(--rt-texto-2); border-color:var(--rt-borde); }
.table { color:var(--rt-texto-2); }
.table thead th { color:var(--rt-texto-4); border-color:var(--rt-borde); font-weight:500; }
.table td, .table th { border-color:var(--rt-borde); }
.form-control, .form-select {
    background:var(--rt-tarjeta-2); border-color:var(--rt-borde); color:var(--rt-texto);
}
.form-control:focus, .form-select:focus {
    background:var(--rt-tarjeta-2); color:var(--rt-texto);
    border-color:var(--rt-naranja); box-shadow:0 0 0 .2rem rgba(255,107,0,.2);
}
.form-control::placeholder { color:var(--rt-texto-4); }
.text-muted { color:var(--rt-texto-4) !important; }
.bg-light { background:var(--rt-tarjeta-2) !important; }
.border { border-color:var(--rt-borde) !important; }
a { color:#60a5fa; }


/* ---------- Refuerzos sobre Bootstrap ---------- */
.card { background: var(--rt-tarjeta) !important; border-color: var(--rt-borde) !important; }
.list-group-item { background: var(--rt-tarjeta) !important; color: var(--rt-texto-2) !important;
                   border-color: var(--rt-borde) !important; }
.table > :not(caption) > * > * { background: transparent !important; color: var(--rt-texto-2); }
.alert-info { background: #132033 !important; color: #93c5fd !important; border-color: #1e3a5f !important; }
.alert-warning { background: #2a2210 !important; color: #fbbf24 !important; border-color: #4a3a12 !important; }
.alert-success { background: #14321f !important; color: #4ade80 !important; border-color: #1e5233 !important; }
.alert-danger { background: #2d1616 !important; color: #f87171 !important; border-color: #5a2020 !important; }
.alert-light, .alert-secondary { background: var(--rt-tarjeta) !important; color: var(--rt-texto-2) !important;
                                 border-color: var(--rt-borde) !important; }
.btn-outline-dark { color: var(--rt-texto-2); border-color: var(--rt-borde); }
.btn-outline-dark:hover { background: var(--rt-tarjeta-2); color: var(--rt-texto); border-color: var(--rt-borde); }
.btn-outline-secondary { color: var(--rt-texto-3); border-color: var(--rt-borde); }
.btn-light { background: var(--rt-tarjeta-2); color: var(--rt-texto-2); border: none; }
.badge.bg-light { background: var(--rt-tarjeta-2) !important; color: var(--rt-texto-2) !important; }
.badge.bg-secondary { background: var(--rt-tarjeta-2) !important; color: var(--rt-texto-3) !important; }
.badge.bg-dark { background: var(--rt-tarjeta-2) !important; color: var(--rt-texto-2) !important; }
.form-check-input { background-color: var(--rt-tarjeta-2); border-color: var(--rt-borde); }
.form-check-input:checked { background-color: var(--rt-naranja); border-color: var(--rt-naranja); }
.text-dark { color: var(--rt-texto-2) !important; }
.bg-white { background: var(--rt-tarjeta) !important; }
hr { border-color: var(--rt-borde); }


/* ---------- Responsivo ---------- */
@media (max-width: 575.98px) {
    .rt-contenido { padding:.75rem; }
    .rt-kpi-num { font-size:1.4rem; }
    .rt-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:.25rem; }
    .rt-tab { white-space:nowrap; }
    .table { font-size:.85rem; }
    h4, h5 { font-size:1.1rem; }
}

/* Las tablas anchas se desplazan en lugar de romper la pantalla. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Botones y campos cómodos para el dedo en celular. */
@media (max-width: 767.98px) {
    .btn { min-height:42px; }
    .form-control, .form-select { min-height:42px; font-size:1rem; }
}


/* ---------- Filas de producto en el formulario de pedido ---------- */
.rt-producto {
    background: var(--rt-tarjeta-2); border-radius: 10px; padding: .75rem .9rem;
    margin-bottom: .5rem; display: flex; align-items: center; gap: .75rem;
    transition: opacity .15s ease;
}
.rt-producto.vacio { opacity: .62; }
.rt-paso {
    width: 38px; height: 38px; border-radius: 8px; border: none;
    background: var(--rt-fondo); color: var(--rt-texto-3);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.rt-paso:active { background: var(--rt-borde); }
.rt-paso-mas { background: var(--rt-naranja); color: #fff; }
.rt-cant {
    width: 62px; text-align: center; background: var(--rt-fondo);
    border: 1px solid var(--rt-borde); border-radius: 8px;
    color: var(--rt-texto); font-size: 1rem; padding: .45rem .25rem;
}
.rt-cant:focus { outline: none; border-color: var(--rt-naranja); }
/* Ocultar las flechitas del campo numérico: ya hay botones +/- */
.rt-cant::-webkit-outer-spin-button, .rt-cant::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.rt-cant { -moz-appearance: textfield; }


/* ---------- Ventana de confirmación ---------- */
.rt-modal {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0, 0, 0, .72);
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.rt-modal.d-none { display: none; }
.rt-modal-caja {
    background: var(--rt-tarjeta); border-radius: 18px; padding: 1.75rem 1.5rem;
    width: 100%; max-width: 380px; text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    animation: rt-aparece .22s ease;
}
@keyframes rt-aparece {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.rt-modal-icono {
    width: 68px; height: 68px; border-radius: 50%; background: #14321f;
    color: #4ade80; font-size: 2.3rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}