i {
    font-style: normal !important;
    font-weight: bolder;
}

.row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

[class*="span"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.span1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.span2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.span3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.span4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.span5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.span6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.span7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.span8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.span9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.span10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.span11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.span12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* --- Input Groups & Forms (Critico para Calendario) --- */
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
    display: table-cell;
}

/* --- Tables Legacy --- */
.table-bordered {
    border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border: 1px solid #ddd;
}

.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
    padding: 5px;
}

/* --- Panels & Wells --- */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-default {
    border-color: #ddd;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-body {
    padding: 0px;
}

/* --- Buttons Legacy --- */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* --- Modals Shim --- */
/* BS5 Modals usually work, but sometimes legacy structure breaks */
.modal-header .close {
    margin-top: -2px;
}

/* --- Visibilidad --- */
.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/* =========================================================
   SISTEMA DE ICONOS PROPIOS (HÍDO – EMOJI / UNICODE / FUTURO SVG)
   ========================================================= */

/* Base */
.ico {
    display: inline-block;
    font-family: "Segoe UI Emoji", "Segoe UI Symbol",
                 "Apple Color Emoji", "Noto Color Emoji", sans-serif;

    font-style: normal;
    font-weight: 400;
    line-height: 1;
    position: relative;
    top: 1px;
    font-size: 1.1em;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Tamaños */
.ico-sm { font-size: 0.9em; }
.ico-lg { font-size: 1.4em; }
.ico-xl { font-size: 1.8em; }

/* Colores estándar */
.ico-success { color: #00a65a; }
.ico-danger  { color: #dd4b39; }
.ico-warning { color: #f39c12; }
.ico-info    { color: #3c8dbc; }
.ico-muted   { color: #777; }

/* =========================================================
   ICONOS BÁSICOS UI / ACCIONES / ESTADOS / HELP / EDICIÓN / ADMIN
   Todos en versión color (FE0F) y sin duplicados
   ========================================================= */

/* =========================================================
   Tamaños predefinidos
   ========================================================= */
.ico-050 { font-size: 0.5em !important; }
.ico-075 { font-size: 0.75em !important; }
.ico-080 { font-size: 0.80em !important; }
.ico-085 { font-size: 0.85em !important; }
.ico-090 { font-size: 0.90em !important; }
.ico-095 { font-size: 0.95em !important; }

.ico-100 { font-size: 1em !important; }
.ico-125 { font-size: 1.25em !important; }
.ico-150 { font-size: 1.5em !important; }
.ico-200 { font-size: 2em !important; }
.ico-300 { font-size: 3em !important; }
.ico-500 { font-size: 5em !important; }

/* =========================================================
   ICONOS BÁSICOS / ACCIONES / ESTADOS
   ========================================================= */
.ico-clipboardblanco::before{
    content: "\1F4CB\FE0E"; /* 📋 texto (recto) */
    color: #fff;
}
.ico-clipboardrojo::before{
    content: "\1F4CB\FE0E"; /* 📋 texto (recto) */
    color: #f00;
}
.ico-clipboardverde::before{
    content: "\1F4CB\FE0E"; /* 📋 texto (recto) */
    color: #0f0;
}

.ico-calendar::before  { content: "\1F4C5\FE0F"; } /* 📅 */
.ico-user::before      { content: "\1F464\FE0F"; } /* 👤 */
.ico-search::before    { content: "\1F50D\FE0F"; } /* 🔍 */
.ico-eye::before       { content: "\1F441\FE0F"; } /* 👁 */
.ico-time::before      { content: "\1F552\FE0F"; } /* 🕒 */
.ico-home::before      { content: "\1F3E0\FE0F"; } /* 🏠 */
.ico-gear::before      { content: "\2699\FE0F";  } /* ⚙ */
.ico-info::before      { content: "\2139\FE0F";  } /* ℹ️ */
.ico-lock::before      { content: "\1F512\FE0F"; } /* 🔒 */
.ico-unlock::before    { content: "\1F513\FE0F"; } /* 🔓 */

.ico-check::before     { content: "\2714\FE0F"; } /* ✔ */
.ico-times::before     { content: "\2716\FE0F"; } /* ✖ */
.ico-plus::before      { content: "\2795\FE0F"; } /* ➕ */
.ico-minus::before     { content: "\2796\FE0F"; } /* ➖ */
.ico-play::before      { content: "\25B6\FE0F"; } /* ▶ */
.ico-pause::before     { content: "\23F8\FE0F"; } /* ⏸ */
.ico-stop::before      { content: "\23F9\FE0F"; } /* ⏹ */
.ico-refresh::before   { content: "\21BB\FE0F"; } /* ↻ */
.ico-download::before  { content: "\2B07\FE0F"; } /* ⬇ */
.ico-upload::before    { content: "\2B06\FE0F"; } /* ⬆ */
.ico-trash::before     { content: "\1F5D1\FE0F"; } /* 🗑 */

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.ico-chevron-left::before   { content: "\2039\FE0F"; } /* ‹ */
.ico-chevron-right::before  { content: "\203A\FE0F"; } /* › */
.ico-fast-backward::before  { content: "\23EE\FE0F"; } /* ⏮ */
.ico-fast-forward::before   { content: "\23ED\FE0F"; } /* ⏭ */
.ico-arrow-up::before       { content: "\2191\FE0F"; } /* ↑ */
.ico-arrow-down::before     { content: "\2193\FE0F"; } /* ↓ */

/* =========================================================
   ESTADOS MODERNOS / FEEDBACK / HELP
   ========================================================= */
.ico-warning-sign::before { content: "\26A0\FE0F"; } /* ⚠ */
.ico-error::before        { content: "\274C\FE0F"; } /* ❌ */
.ico-question::before     { content: "\2753\FE0F"; } /* ❓ */
.ico-ok-circle::before    { content: "\2705\FE0F"; } /* ✅ */
.ico-help::before         { content: "\2754\FE0F"; } /* ❔ */
.ico-help-alt2::before    { content: "\003F\FE0F"; } /* ? */
.ico-help-alt3::before    { content: "\2139\FE0F"; } /* ℹ️ */
.ico-help-alt4::before    { content: "\1F6C8\FE0F"; } /* 🛈 */
.ico-help-alt5::before    { content: "\1F194\FE0F"; } /* 🆔 */
.ico-help-alt6::before    { content: "\1F198\FE0F"; } /* 🆘 */

/* =========================================================
   ICONOS DE EDICIÓN
   ========================================================= */
.ico-pencil::before      { content: "\270D\FE0F"; } /* ✍ */
.ico-pencil-alt1::before { content: "\270F\FE0F"; } /* ✏ */
.ico-pencil-alt2::before { content: "\1F589\FE0F"; } /* 🖉 */
.ico-pencil-alt3::before { content: "\1F58A\FE0F"; } /* 🖊 */
.ico-pencil-alt4::before { content: "\1F58B\FE0F"; } /* 🖋 */
.ico-paperclip::before   { content: "\1F4CE\FE0F"; }/* 📎 */


.ico-film-v {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.ico-film-v::before {
    content: "\01F39E ";
    transform: rotate(90deg);
    display: inline-block;
}


.ico-film-v {
    outline: 1px solid red;
}

/* =========================================================
   ICONOS ADMINISTRATIVOS / COMERCIALES
   ========================================================= */
.ico-print::before       { content: "\1F5A8\FE0F"; } /* 🖨 */
.ico-print1::before      { content: "\1F5A8"; } /* 🖨 */
.ico-thumb-up1::before    { content: "\1F44D\FE0F"; /* 👍 */}
.ico-thumb-up2::before    { content: "\1F44D\1F3FF"; /* 👍🏿 */}
.ico-thumb-up-white::before{
    content: "\1F44D\1F3FF"; /* 👍🏿 */
    color: #fff;
}
.ico-thumb-up-red::before{
    content: "\1F44D\1F3FF"; /* 👍🏿 */
    color: #f00;
}
.ico-mail::before        { content: "\2709\FE0F"; } /* ✉ */
.ico-mail-open::before   { content: "\1F4E8\FE0F"; } /* 📨 */
.ico-file::before        { content: "\1F4C4\FE0F"; } /* 📄 */
.ico-folder::before      { content: "\1F4C1\FE0F"; } /* 📁 */
.ico-clipboard::before   { content: "\1F4CB\FE0F"; } /* 📋 */
.ico-money::before       { content: "\1F4B0\FE0F"; } /* 💰 */
.ico-cash::before        { content: "\1F4B5\FE0F"; } /* 💵 */
.ico-card::before        { content: "\1F4B3\FE0F"; } /* 💳 */
.ico-receipt::before     { content: "\1F9FE\FE0F"; } /* 🧾 */
.ico-chart::before       { content: "\1F4CA\FE0F"; } /* 📊 */
.ico-truck::before       { content: "\1F69A\FE0F"; } /* 🚚 */
.ico-box::before         { content: "\1F4E6\FE0F"; } /* 📦 */
.ico-warehouse::before   { content: "\1F3EC\FE0F"; } /* 🏬 */
.ico-client::before      { content: "\1F465\FE0F"; } /* 👥 */
.ico-phone::before       { content: "\260E\FE0F"; } /* ☎ */
.ico-mobile::before      { content: "\1F4F1\FE0F"; } /* 📱 */
.ico-invoice::before     { content: "\1F4C3\FE0F"; } /* 📃 */
.ico-remito::before      { content: "\1F4E6\FE0F"; } /* 📦 */
.ico-all::before         { content: "\1F5C2\FE0F"; } /* 🗂 */

.ico-todos::before       {content: "\1F4CB\FE0F"; }/* 📋 */
.ico-refresh::before     {content: "\1F503\FE0F"; }/* 🔃 */

.ico-update::before      {content: "\1F504\FE0F"; }/* 🔄 */

.ico-all-green::before   {content: "\1F5C2"; color: green;} /* 🗂 */

.ico-all-red::before     {content: "\1F5C2"; color: red; } /* 🗂 */


.ico-person::before        { content: "\1F464\FE0F"; } /* 👤 persona */
.ico-persona::before       { content: "\1F465\FE0F"; } /* 👥 grupo / empleados */
.ico-empleado::before      { content: "\1F9D1\FE0F"; } /* 🧑 persona neutra */
.ico-trabajador::before    { content: "\1F468\200D\1F4BC\FE0F"; } /* 👨‍💼 empleado */
.ico-trabajadora::before   { content: "\1F469\200D\1F4BC\FE0F"; } /* 👩‍💼 empleada */
.ico-operario::before      { content: "\1F9D1\200D\1F527\FE0F"; } /* 🧑‍🔧 operario */

.toggle-symbol-izq::before     {content:"◀";}

.toggle-symbol-der::before    {    content:"▶";}
.abierto .toggle-symbol::before{ content:"▼";
}


.ico-clipboard::before { content: "\1F4CB\FE0F"; } /* 📋 clipboard */

.ico-dollar::before {
    content: "\0024";
    font-weight: bold;
    font-size: 1.4em;

    background: linear-gradient(
        90deg,
        #ffffff,
        #ffffff,
        #009900,
        #009900,
        #000000,
        #000000
    );

    background-size: 400% 100%;
    background-position: 0% 0%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: moverGradiente 1s linear infinite alternate;
}

@keyframes moverGradiente {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}


/* =========================================================
   LOADING / ANIMACIONES
   ========================================================= */
.ico-loading::before { content: "\27F3\FE0F"; } /* ⟳ */


.ico-spin {
    animation: ico-spin 1s linear infinite;
}

@keyframes ico-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =========================================================
   USO FUTURO SVG / PNG (NO ACTIVO AÚN)
   ========================================================= */
/*
.ico-svg {
    background-image: url("icon.svg");
    width: 1em;
    height: 1em;
}
*/


/* ==============================================
   4. ESTILOS PROPIOS ORIGINALES (sp.css)
   ============================================== */

body {
    font-family: Arial, sans-serif;
    margin: 0;
   
    background-color: #f4f4f4;
    color: #333;
}

.containerFlotante {
    position: fixed;
    top: 0px;
    max-width: 300px;
    margin: 10px auto;
    
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.message {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

.info {
    background-color: #f2f2de;
    color: #4444ff;
    border: 1px solid #ebccd1;
}

pre {
    background-color: #f8f8f8;
    padding: 0px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.bverde {
    *float: left;
    *margin-left: 20px;
    width: 100px;
    *height: 2vw;
    *margin-left: 2vw;
    box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.6), 10px 10px 20px rgba(0, 255, 0, 0.6), 5px 5px 10px rgba(0, 0, 255, 6);
    border-radius: 10px 10px 10px 10px;
    background-color: #0f0;
    text-align: center;
    font-size: 10;
}

.bverdo {
    *float: left;
    *margin-left: 20px;
    width: 100px;
    *height: 2vw;
    *margin-left: 2vw;
    box-shadow: 2px 2px 4px rgba(255, 0, 255, 0.6), 10px 10px 20px rgba(0, 255, 255, 0.6), 5px 5px 10px rgba(255, 0, 0, 6);
    border-radius: 10px 10px 10px 10px;
    background-color: #f00;
    text-align: center;
    font-size: 10;
}

.botonR {
    *float: left;
    border-radius: 10px 10px 10px 10px;
    width: 120px;
    background-color: #f00;
    color: #fff;
    *font-size: 1.2vw;
}

.botonrojo {
    *float: left;
    width: 120px;
}

.span_sp {
    display: inline-block;
    width: 300px;
}


.btnG {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Botón Enviar */
.btn-enviar {
    background: linear-gradient(to bottom, #4CAF50, #1e4620);
    color: white;
}

.btn-enviar:hover {
    background: linear-gradient(to bottom, #45a049, #173917);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

/* Botón Cancelar con degradé */
.btn-cancelar {
    background: linear-gradient(to bottom, #a4a3a6, #515b55);
    color: white;
}

.btn-cancelar:hover {
    background: linear-gradient(to bottom, #a5a9a5, #1a1210);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

/* Botón Azul con degradé */
.btn-azul {
    background: linear-gradient(to bottom, #a4a3ff, #515b55);
    color: white;
}

.btn-azul:hover {
    background: linear-gradient(to bottom, #a5a9ff, #1a1210);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}


/* Botón verde con degradé */
.btn-verde {
    background: linear-gradient(to bottom, #a4ffa6, #515b55);
    color: white;
}

.btn-verde:hover {
    background: linear-gradient(to bottom, #a5ffa5, #1a1210);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}


/* Efecto activo (click) */
.btnG:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.btnA {
    *color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

.btnA:hover {
    transform: scale(1.05);
}

.btnA:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btnA-in {
    width:190px;
    height: 20px;
    background: linear-gradient(to right, #4dff4d, #99ff99);
}

.btnA-in:hover {
    background-color: #00b300;
}

.btnA-cerrar {
    background: linear-gradient(to right, #994d4d, #559999);
}

.btnA-cerrar:hover {
    background-color: #996666;
}

.btnA-regresar {
    background: linear-gradient(to right, #00ff4d, #22ff99);
}

.btnA-regresar:hover {
    background-color: #00b300;
}

.btnA-sel {
    width: 140px;
    height: 20px;
    background: linear-gradient(to right, #994dff, #55ffff);
}

.btnA-sel:hover {
    background-color: #99ffff;
}

.btnA-out {
    width: 150px;
    height: 20px;
    background: linear-gradient(to left, #ff4dff, #55ff66);
}

.btnA-out:hover {
    background: #994ff6;
}

.btnB-out {
    border-radius: 20px;
    width: 150px;
    height: 40px;
    color: #fff;
    background: #111;
}

.btnB-out:hover {
    color: #fff;
    background: linear-gradient(to bottom, #111, #119);
}

.btnA-dolar {
    width: 140px;
    height: 20px;
    background: linear-gradient(to right, #99ffff, #55ff66);
}

.btnA-dolar:hover {
    background-color: #99fff6;
}


  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    *background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-info1 {
    color: #fff;
    background-color: #ccffcc;
    border-color: #46b8da;
}


/* Focus general */
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/* Hover / focus */
.btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
}

/* Active */
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;

  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
          box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

/* Disabled */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;

  opacity: .65;
  filter: alpha(opacity=65);

  -webkit-box-shadow: none;
          box-shadow: none;
}


.btn-warning {
  color: #fff;
  background-color: #b85c5c;
  border-color: #4cae4c;
}

/* Hover / focus */
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
  color: #fff;
  background-color: #9d4444;
  border-color: #398439;
}

/* Active */
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #9d4444;
  border-color: #398439;
}

/* Active + hover/focus */
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
  color: #fff;
  background-color: #843939;
  border-color: #255625;
}


.btn-orange {
  color: #fff;
  background-color: #D49A6A;
  border-color: #4cae4c;
}

/* Hover / focus */
.btn-orange:hover,
.btn-orange:focus,
.btn-orange.focus {
  color: #fff;
  background-color: #8A6445;
  border-color: #398439;
}

/* Active */
.btn-orange:active,
.btn-orange.active,
.open > .dropdown-toggle.btn-orange {
  color: #fff;
  background-color: #8A6445;
  border-color: #B8744E; /* naranja medio */
}

/* Active + hover/focus */
.btn-orange:active:hover,
.btn-orange.active:hover,
.open > .dropdown-toggle.btn-orange:hover,
.btn-orange:active:focus,
.btn-orange.active:focus,
.open > .dropdown-toggle.btn-orange:focus,
.btn-orange:active.focus,
.btn-orange.active.focus,
.open > .dropdown-toggle.btn-orange.focus {
  color: #fff;
  background-color: #D49A6A;
  border-color: #6E442D; /* naranja oscuro */
}

/* =========================================================
   BTN-SUCCESS
   ========================================================= */

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

/* Hover / focus */
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

/* Active */
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

/* Active + hover/focus */
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
  color: #fff;
  background-color: #398439;
  border-color: #255625;
}

.btn-paso {
  cursor: pointer;
  text-align: center;

  background: linear-gradient(to bottom, #f5f5f5, #dcdcdc);
  border: 1px solid #b5b5b5;
  border-radius: 4px;

  padding: 4px 8px;
  font-weight: bold;
  color: #333;

  transition: 
    background .2s ease,
    box-shadow .2s ease,
    transform .05s ease;
}

/* Hover */
.btn-paso:hover {
  background: linear-gradient(to bottom, #ffffff, #cfcfcf);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Click */
.btn-paso:active {
  background: linear-gradient(to bottom, #cfcfcf, #ffffff);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
  transform: translateY(1px);
}

/* CONTENEDOR CON SCROLL */
.table-scroll {
  max-height: 65vh;          /* altura visible */
  overflow-y: auto;
  border: 1px solid #444;
}

/* HEADER FIJO */
.table-scroll table thead th {
  position: sticky;
  top: 0;
  background: #bbb;
  z-index: 2;
}

/* AJUSTE VISUAL */
.table-scroll table {
  border-collapse: collapse;
}