/* =========================================================
   Hello Kitty Dark — tema compacto
   ========================================================= */
:root{
  --hk-bg-top:#1a0d14; --hk-bg-mid:#3a112a; --hk-bg-bot:#ff5fa2;
  --hk-white:#fff; --hk-ink:#ffecf6;

  --hk-primary:#ff69b4; --hk-primary-dark:#e2559e;
  --hk-secondary:#6a1e55; --hk-secondary-dark:#551846;

  --hk-info:#c8a7ff; --hk-info-dark:#b18fff;
  --hk-warning:#ffc2d1; --hk-warning-d:#f5a9bb;
  --hk-danger:#ff3b6e; --hk-danger-d:#e22f5f;
  --hk-success:#ff8ec7; --hk-success-d:#f36eaf;

  --hk-shadow: rgba(0,0,0,.28);
}

/* Fondo + tipografía base */
html,body{height:100%;margin:0}
body{
  background:linear-gradient(to bottom,var(--hk-bg-top),var(--hk-bg-mid),var(--hk-bg-bot));
  background-attachment:fixed;
  color:var(--hk-ink);
}
h1,h2,h3,h4,h5,h6{color:#ffe7f2;font-weight:700}
.text-muted,small,.help-block{color:rgba(255,255,255,.72)!important}
label{color:var(--hk-ink)}
.glyphicon,.fas{color:#fff}

/* Tarjeta genérica para formularios (sin tocar tu HTML) */
.hk-card,.espacio,.col-md-6>form{
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 10px 30px var(--hk-shadow);
  color:var(--hk-ink);
}
.hk-card h2,.espacio h2,.col-md-6>h2{
  color:#ffe3f1;font-weight:800;text-shadow:0 1px 0 rgba(0,0,0,.35);margin-top:.5rem;
}

/* Inputs (unificado) */
.form-control,
input[type="text"],input[type="number"],textarea,select,
#datetimepicker .add-on,.input-append .add-on,input.add-on{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--hk-white);
  border-radius:8px;
}
.form-control:focus,
input[type="text"]:focus,input[type="number"]:focus,textarea:focus,select:focus,
#datetimepicker input:focus{
  background:rgba(255,255,255,.12);
  border-color:transparent;
  box-shadow:0 0 0 .2rem rgba(255,105,180,.28);
  outline:0;
}
.form-control::placeholder,#datetimepicker input::placeholder{color:rgba(255,255,255,.70)}
.input-append input{width:100%}

/* DateTimePicker */
.bootstrap-datetimepicker-widget{
  background:rgba(0,0,0,.9);
  color:#fff;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;box-shadow:0 12px 30px var(--hk-shadow);
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th{color:#fff}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover{background:var(--hk-primary);color:#fff}
.bootstrap-datetimepicker-widget .picker-switch{color:#fff}
.bootstrap-datetimepicker-widget a{color:#ffd9ea}
.bootstrap-datetimepicker-widget a:hover{color:#fff}

/* Botones — base */
.btn{border:none;font-weight:600;box-shadow:0 6px 18px var(--hk-shadow)}
.btn:focus,.btn:active{box-shadow:0 0 0 .2rem rgba(255,105,180,.35);outline:0}
.btn .glyphicon,.btn i{color:#fff}
.caret{border-top-color:#fff;border-bottom-color:#fff}

/* Variantes sólidas */
.btn-primary{background:var(--hk-primary);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--hk-primary-dark)}
.btn-secondary{background:var(--hk-secondary);color:#fff}
.btn-secondary:hover{background:var(--hk-secondary-dark)}
.btn-info{background:var(--hk-info);color:#1e1230}
.btn-info:hover{background:var(--hk-info-dark)}
.btn-warning{background:var(--hk-warning);color:#2a0a18}
.btn-warning:hover{background:var(--hk-warning-d)}
.btn-danger{background:var(--hk-danger);color:#fff}
.btn-danger:hover{background:var(--hk-danger-d)}
.btn-success{background:var(--hk-success);color:#2a0d16}
.btn-success:hover{background:var(--hk-success-d)}

/* “Botón claro” unificado: default/light/active */
.btn-default,.btn-light,.btn-active{
  background:linear-gradient(180deg,rgba(255,105,180,.95),rgba(226,85,158,.95));
  color:#fff!important;border:1px solid rgba(255,255,255,.28);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.btn-default:hover,.btn-light:hover,.btn-active:hover,
.btn-default:focus,.btn-light:focus,.btn-active:focus{
  background:linear-gradient(180deg,rgba(255,105,180,1),rgba(226,85,158,1));
  box-shadow:0 0 0 .2rem rgba(255,105,180,.28);
}
.btn-xs{padding:.2rem .55rem;font-size:12px;line-height:1.2;border-radius:999px;font-weight:700}
.btn.disabled,.btn:disabled,fieldset[disabled] .btn{opacity:.75;color:#fff!important}

/* Dropdown */
.dropdown-menu{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;box-shadow:0 12px 30px var(--hk-shadow);
}
.dropdown-menu>li>a{color:var(--hk-ink)}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{background:rgba(255,105,180,.18);color:#fff}
.dropdown-menu .btn{width:100%;text-align:left;box-shadow:none}

/* Tablas genéricas y #mitabla */
.table{color:#fff;background:transparent;border-color:rgba(255,255,255,.1)}
.table>thead>tr>th{background:rgba(255,255,255,.06);color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.table>tbody>tr:nth-child(odd){background:rgba(255,255,255,.04)}
.table>tbody>tr:hover{background:rgba(255,105,180,.14)}
/* Botones dentro de tablas (p.ej. “Nuevo Periodo”) */
.table .btn-default,.table .btn-light,.table .btn-active{
  background:var(--hk-primary);border-color:var(--hk-primary-dark)
}
.table .btn-default:hover,.table .btn-light:hover,.table .btn-active:hover{background:var(--hk-primary-dark)}

#mitabla.table{margin-bottom:0}
#mitabla thead th{
  position:sticky;top:0;z-index:2;
  background:linear-gradient(to right,rgba(255,95,162,.85),rgba(58,17,42,.85));
  color:#fff;border-bottom:1px solid rgba(255,255,255,.12);
  text-transform:uppercase;letter-spacing:.03em;backdrop-filter:blur(2px);
}
#mitabla th,#mitabla td{border-color:rgba(255,255,255,.08);vertical-align:middle;padding:.65rem .85rem}
#mitabla tbody tr{background:rgba(255,255,255,.035)}
#mitabla tbody tr:nth-child(odd){background:rgba(255,255,255,.055)}
#mitabla tbody tr:hover{background:rgba(255,105,180,.14)}
#mitabla th:nth-child(4),#mitabla td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
#mitabla tr.danger{background:rgba(255,59,110,.12)!important}
#mitabla tr.warning{background:rgba(255,194,209,.12)!important;color:#ffe7ef}
#mitabla tr.success{background:rgba(255,142,199,.12)!important}
#mitabla tr.airbnb{background:rgba(255,105,180,.18)!important}
#mitabla tr.ventaProducto{background:rgba(200,167,255,.12)!important}
#mitabla tr.rojo{background:rgba(255,59,110,.18)!important}
#mitabla .badge{background:var(--hk-primary);color:#fff;font-weight:700;padding:.35em .55em;border-radius:999px}
#mitabla .delete-ingreso{color:#ffd9ea;text-decoration:none}
#mitabla .delete-ingreso:hover{color:#fff;text-decoration:underline}
#mitabla tbody tr:last-child td{background:rgba(255,105,180,.18);border-top:2px solid rgba(255,255,255,.25);font-weight:700}

/* Modal / paneles / lista / paginación (Bootstrap 3 legacy) */
.modal-content{background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 18px 44px var(--hk-shadow)}
.modal-header{border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(255,95,162,.35),rgba(58,17,42,.35))}
.modal-title{color:#fff}.close{color:#fff;text-shadow:none;opacity:.85}.close:hover{opacity:1}

.panel,.well{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);color:var(--hk-ink);border-radius:12px}
.panel-heading{background:linear-gradient(90deg,rgba(255,95,162,.35),rgba(58,17,42,.35));color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.panel-title{color:#fff}
.list-group-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff}
.list-group-item:hover{background:rgba(255,105,180,.12)}
.pagination>li>a,.pagination>li>span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff}
.pagination>.active>a,.pagination>.active>span{background:var(--hk-primary);border-color:var(--hk-primary-dark);color:#fff}
.label,.badge{background:var(--hk-secondary);color:#fff}

/* Botón “claro”: que NO quede blanco por Bootstrap */
.btn.btn-default,
.btn.btn-light,
.btn.btn-active{
  background: linear-gradient(180deg, rgba(255,105,180,.95), rgba(226,85,158,.95)) !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.btn.btn-default:hover,
.btn.btn-light:hover,
.btn.btn-active:hover{
  background: linear-gradient(180deg, rgba(255,105,180,1), rgba(226,85,158,1)) !important;
}

/* Si está disabled, que siga rosado (sólo baja opacidad) */
.btn.btn-default:disabled,
.btn.btn-light:disabled,
.btn.btn-active:disabled{
  opacity:.75; /* mantenemos el mismo fondo */
}
/* =========================
   Texto legible sobre fondo oscuro
   ========================= */
.text-light { color: var(--hk-ink) !important; }
.text-white { color:#fff !important; }

/* =========================
   Contenedores tipo well/panel
   ========================= */
/* =========================
   Superficies oscuras tipo well/panel (override Bootstrap)
   ========================= */

/* well + variaciones y equivalentes en BS3 */
.well,
.well.well-sm,
.well.well-lg,
.panel,
.panel-default,
.panel-body,
.panel-heading {
  background-color: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--hk-ink) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px var(--hk-shadow);
}

/* títulos dentro del contenedor oscuro */
.panel-heading,
.well h1, .well h2, .well h3,
.panel-heading h1, .panel-heading h2, .panel-heading h3 {
  color: #fff !important;
}

/* enlaces legibles dentro de superficies oscuras */
.well a, .panel a { color:#ffd9ea; }
.well a:hover, .panel a:hover { color:#fff; }

/* Si usas .hk-card para “Variables Calculadas”, la igualamos a .well */
.hk-card {
  background-color: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--hk-ink) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px var(--hk-shadow);
  padding: 16px;
}


/* =========================
   Campos de texto legibles (global)
   ========================= */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--hk-white) !important;
  caret-color: var(--hk-primary);
  border-radius: 8px;
}

/* Focus */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  background: rgba(255,255,255,.12);
  color: var(--hk-white) !important;
  outline: 0;
  border-color: transparent;
  box-shadow: 0 0 0 .2rem rgba(255,105,180,.28);
}

/* Placeholders claros */
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,.65);
}

/* =========================
   Caso específico: datepicker viejo (class="add-on")
   ========================= */
.input-append.date input.add-on,
#datetimepicker input.add-on,
input.add-on {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--hk-white) !important;
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 8px !important;
  line-height: 1.2;
}

.input-append.date input.add-on::placeholder,
#datetimepicker input.add-on::placeholder,
input.add-on::placeholder {
  color: rgba(255,255,255,.65) !important;
}

.input-append.date input.add-on:focus,
#datetimepicker input.add-on:focus,
input.add-on:focus {
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 .2rem rgba(255,105,180,.28) !important;
  border-color: transparent !important;
  outline: 0;
}

/* ===== Select oscuro HK ===== */

/* Cuerpo del select (flecha personalizada) */
select.form-control,
select {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--hk-white) !important;
  border-radius: 8px !important;

  /* quita UI nativa y añade flecha */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem !important;

  /* flecha: SVG inline del color de texto */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffecf6'><path d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: .9rem;
}

select.form-control:hover,
select:hover{
  background-color: rgba(255,255,255,.10) !important;
}

select.form-control:focus,
select:focus{
  background-color: rgba(255,255,255,.12) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 .2rem rgba(255,105,180,.28) !important;
  outline: 0;
}

/* Opciones del desplegable */
select option,
select optgroup{
  background-color: #1a0d14;       /* fondo oscuro del menú */
  color: var(--hk-white);
}

/* Estados visuales (según soporte del navegador) */
select option:hover{
  background-color: #3a112a;
  color: #fff;
}
select option:checked,
select option:focus{
  background-color: var(--hk-primary);
  color: #1a0d14; /* contraste con rosa */
}

/* IE heredado (oculta chevron nativo) */
select::-ms-expand{ display:none; }

/* Evitar que el hover del <a> oscurezca el botón dentro del dropdown */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  /* mantenemos el highlight del item, pero que no afecte al botón */
  background: rgba(255,105,180,.18);
}

/* Fuerza de color y fondo del botón cuando el <a> está en hover/focus */
.dropdown-menu > li > a:hover .btn,
.dropdown-menu > li > a:focus .btn,
.dropdown-menu .btn:hover,
.dropdown-menu .btn:focus,
.dropdown-menu .btn:active{
  color: #fff !important;
  background: var(--hk-secondary-dark) !important;  /* tu tono más oscuro */
  box-shadow: none;
}

/* Asegura que cualquier icono dentro del botón también quede claro */
.dropdown-menu .btn *,
.dropdown-menu > li > a:hover .btn *,
.dropdown-menu > li > a:focus .btn *{
  color: #fff !important;
}
/* =========================
   Date/Datetime picker — tema HK oscuro
   (cubre Eonasdan y el datepicker clásico)
   ========================= */

/* —— Contenedor del widget —— */
.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dropdown-menu,
.datepicker,
.datepicker.dropdown-menu{
  background: rgba(12, 4, 10, .96);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--hk-ink);
  border-radius: 12px;
  box-shadow: 0 18px 40px var(--hk-shadow);
}

/* quitar triangulitos blancos de Bootstrap */
.bootstrap-datetimepicker-widget:before,
.bootstrap-datetimepicker-widget:after,
.datepicker:before,
.datepicker:after{ border: none; }

/* asegurar que quede por encima de modales/paneles */
.bootstrap-datetimepicker-widget,
.datepicker{ z-index: 1051 !important; }

/* —— Cabecera / navegación —— */
.bootstrap-datetimepicker-widget table thead tr:first-child th,
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next{
  color:#fff;
  font-weight:700;
  background: linear-gradient(90deg, rgba(255,95,162,.18), rgba(58,17,42,.18));
  border-radius: 8px;
}

.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .prev span,
.bootstrap-datetimepicker-widget .next span{
  color: var(--hk-ink);
}

.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget .prev:hover,
.bootstrap-datetimepicker-widget .next:hover,
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover{
  background: rgba(255,105,180,.22);
  border-radius: 8px;
}

/* —— Celdas/tabla —— */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.datepicker table tr td,
.datepicker table tr th{
  border: 0;
  color: var(--hk-ink);
  text-align: center;
  border-radius: 8px;
}

/* días/horas normales */
.bootstrap-datetimepicker-widget table td.day,
.bootstrap-datetimepicker-widget table td.hour,
.bootstrap-datetimepicker-widget table td.minute,
.bootstrap-datetimepicker-widget table td.second,
.datepicker table tr td.day{
  background: transparent;
  color: var(--hk-ink);
}

/* días de mes anterior/siguiente */
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new,
.datepicker table tr td.old,
.datepicker table tr td.new{
  color: rgba(255,255,255,.35);
}

/* hover */
.bootstrap-datetimepicker-widget table td:hover,
.bootstrap-datetimepicker-widget table span:hover,
.datepicker table tr td:hover{
  background: rgba(255,105,180,.22);
  color:#fff;
}

/* HOY y ACTIVO (seleccionado) */
.bootstrap-datetimepicker-widget table td.today,
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.today{
  background: var(--hk-primary) !important;
  color:#fff !important;
  text-shadow: none;
}

/* deshabilitados */
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover,
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover{
  background: transparent !important;
  color: rgba(255,255,255,.25) !important;
  cursor: not-allowed;
}

/* —— Alineación del input “add-on” que ya usas —— */
.input-append.date input.add-on{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--hk-white) !important;
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 8px;
}
.input-append.date input.add-on::placeholder{ color: rgba(255,255,255,.65); }
.input-append.date input.add-on:focus{
  background: rgba(255,255,255,.12);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem rgba(255,105,180,.28);
}

/* ===== Acciones superiores (registrar / calendario / fuego) — overrides ===== */
/* 1) Registrar (+) — se queda rosa HK, pero con anillo y hover marcado */
.btn-toolbar .btn-group > .btn-primary.dropdown-toggle{
  background: var(--hk-primary) !important;
  color: #fff !important;
  border: none !important;
}
.btn-toolbar .btn-group > .btn-primary.dropdown-toggle:hover,
.btn-toolbar .btn-group > .btn-primary.dropdown-toggle:focus{
  background: var(--hk-primary-dark) !important;
  box-shadow: 0 0 0 .2rem rgba(255,105,180,.32) !important;
}

/* 2) Calendario — cambia a lila independientemente de que sea .btn-primary */
button.btn.btn-lg.btn-primary[data-target="#calendario"]{
  background: #b6a6ff !important;   /* lila más saturado */
  color: #1e1230 !important;
  border: none !important;
}
button.btn.btn-lg.btn-primary[data-target="#calendario"]:hover,
button.btn.btn-lg.btn-primary[data-target="#calendario"]:focus{
  background: #a392ff !important;   /* hover lila oscuro */
  color: #1e1230 !important;
  box-shadow: 0 0 0 .2rem rgba(182,166,255,.35) !important;
}

/* 3) Resumen/Fuego — coral para diferenciarlo totalmente del rosa */
.btn-toolbar .btn-group > .btn-warning{
  background: linear-gradient(90deg,#ff6a88,#ff9fb0) !important;
  color: #fff !important;
  border: none !important;
}
.btn-toolbar .btn-group > .btn-warning:hover,
.btn-toolbar .btn-group > .btn-warning:focus{
  background: linear-gradient(90deg,#ff5678,#ff8aa3) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(255,106,136,.35) !important;
}

/* Asegura caret e íconos siempre blancos en los 3 */
.btn-toolbar .btn-group .caret{ border-top-color:#fff !important; border-bottom-color:#fff !important; }
.btn-toolbar .btn-group .glyphicon{ color:#fff !important; }

/* BONUS: cuando el botón del dropdown está dentro de <a> y haces hover,
   que el texto del botón NO se oscurezca */
.dropdown-menu > li > a:hover .btn,
.dropdown-menu > li > a:focus .btn{
  color:#fff !important;
  background: var(--hk-secondary-dark) !important;
  box-shadow: none !important;
}
/* =========================
   Tablas (global para .table)
   ========================= */
.table{
  color: var(--hk-white);
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}
.table > thead > tr > th,
.table > tbody > tr > td{
  border-color: rgba(255,255,255,.08);
  vertical-align: middle;
  padding: .65rem .85rem;
}

/* Encabezado con buen contraste */
.table > thead > tr > th{
  background:
    linear-gradient(to right,
      rgba(255, 95, 162, .85),
      rgba(58, 17, 42,  .85));
  color:#fff;
  text-transform: uppercase;
  letter-spacing:.03em;
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
}

/* Zebra consistente (reemplaza el de Bootstrap) */
.table-striped > tbody > tr:nth-of-type(odd){
  background: rgba(255,255,255,.045) !important;
}
.table-striped > tbody > tr:nth-of-type(even){
  background: rgba(255,255,255,.065) !important;
}

/* Hover claro y acorde al tema */
.table-hover > tbody > tr:hover{
  background: rgba(255,105,180,.14) !important;
}

/* Fila de TOTAL (si es la última) */
.table > tbody > tr:last-child td{
  background: rgba(255,105,180,.18);
  border-top: 2px solid rgba(255,255,255,.25);
  font-weight:700;
}

/* ===== Reseteo de estados Bootstrap (evita el beige) ===== */
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active{
  background: rgba(0,0,0,.18) !important;
  color: var(--hk-ink) !important;
}

.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning{
  background: rgba(255, 194, 209, .12) !important;
  color: #ffe7ef !important;
}

.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success{
  background: rgba(255, 142, 199, .12) !important;
  color: var(--hk-ink) !important;
}

.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger{
  background: rgba(255, 59, 110, .12) !important;
  color: #ffd9ea !important;
}

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info{
  background: rgba(200,167,255,.12) !important;
  color: #eee !important;
}

/* Si tu cabecera de "CANTIDAD" debe ir a la derecha */
.table thead th:last-child,
.table tbody td:last-child{
  text-align: right;
  font-variant-numeric: tabular-nums;
}