/**
* Template Name: NiceAdmin - v2.5.0
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", sans-serif;
  background: #f6f9ff;
  color: #444444;
}

a {
  color: #4154f1;
  text-decoration: none;
}

a:hover {
  color: #717ff5;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: 60px;
  padding: 20px 30px;
  transition: all 0.3s;
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 10px;
}

.pagetitle h1 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 600;
  color: #012970;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #4154f1;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  -webkit-animation-name: dropdown-animate;
  animation-name: dropdown-animate;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f6f9ff;
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }
}

@-webkit-keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

/* Light Backgrounds */
.bg-primary-light {
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}

.bg-secondary-light {
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

.bg-success-light {
  background-color: #d1e7dd;
  border-color: #d1e7dd;
}

.bg-danger-light {
  background-color: #f8d7da;
  border-color: #f8d7da;
}

.bg-warning-light {
  background-color: #fff3cd;
  border-color: #fff3cd;
}

.bg-info-light {
  background-color: #cff4fc;
  border-color: #cff4fc;
}

.bg-dark-light {
  background-color: #d3d3d4;
  border-color: #d3d3d4;
}

/* Card */
.card {
  margin-bottom: 30px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
  border-color: #ebeef4;
  background-color: #fff;
  color: #798eb3;
  padding: 15px;
}

.card-title {
  padding: 20px 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: #012970;
  font-family: "Poppins", sans-serif;
}

.card-title span {
  color: #899bbd;
  font-size: 14px;
  font-weight: 400;
}

.card-body {
  padding: 0 20px 20px 20px;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 25%;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

/* Accordion */
.accordion-item {
  border: 1px solid #ebeef4;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #012970;
  background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: #4154f1;
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  color: #899bbd;
  font-weight: 600;
}

.breadcrumb a {
  color: #899bbd;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
  color: #899bbd;
}

.breadcrumb .active {
  color: #51678f;
  font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
  background-color: #fff;
  color: #4154f1;
  border-bottom: 2px solid #4154f1;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1200px) {
  .logo {
    width: 180px;
  }
}

/* El logo va sobre una placa blanca, como en fabrica-ropa.
   Iba directo sobre el vino de la barra, y un logo oscuro sobre un fondo
   oscuro no se lee: en el panel apenas se distinguia la marca. La placa
   tambien sirve para el proximo cliente, cuyo logo no tiene por que
   contrastar con este color. */
.logo img {
  max-height: 40px;
  margin-right: 6px;
  background: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  object-fit: contain;
}

.logo span {
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF; /* texto blanco sobre vino */
  font-family: "Nunito", sans-serif;
}

.header {
  transition: all 0.5s;
  z-index: 997;
  height: 60px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);
  background-color: #490102; /* vino tinto */
  padding-left: 20px;
}

/* Toggle Sidebar Button */
.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: #FFFFFF;
}

/* Search Bar */
.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
    background: #490102;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  border: 1px solid #E94E1B; /* naranja */
  box-shadow: 0 0 8px rgba(233, 78, 27, 0.4);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: #E94E1B; /* naranja */
}
/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav>ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: #012970;
  margin-right: 25px;
  position: relative;
}

.header-nav .nav-profile {
  color: #012970;
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: -2px -5px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 20px 0 10px;
  font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .notifications .notification-item:hover {
  background-color: #f6f9ff;
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444444;
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .messages .message-item:hover {
  background-color: #f6f9ff;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 230px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E94E1B transparent;
  box-shadow: 0px 0px 20px rgba(73, 1, 2, 0.2);
  background-color: #490102; /* vino tinto */
}

@media (max-width: 1199px) {
  .sidebar {
    left: -230px;
  }
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #490102;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #E94E1B;
}

@media (min-width: 1200px) {
  #main,
  #footer {
    margin-left: 230px;
  }
}

@media (max-width: 1199px) {
  .toggle-sidebar .sidebar {
    left: 0;
  }
}

@media (min-width: 1200px) {
  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: 0;
  }

  .toggle-sidebar .sidebar {
    left: -300px;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
  background: #490102;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #E94E1B;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  transition: 0.3s;
  background: #E94E1B;
  padding: 10px 15px;
  border-radius: 4px;
}

.sidebar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: #FFFFFF;
}

.sidebar-nav .nav-link.collapsed {
  color: #FFFFFF;
  background: #490102;
}

.sidebar-nav .nav-link.collapsed i {
  color: #E94E1B;
}

.sidebar-nav .nav-link:hover {
  color: #FFFFFF;
  background: #c63f14; /* naranja más profundo */
}

.sidebar-nav .nav-link:hover i {
  color: #FFFFFF;
}

.sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  transition: 0.3s;
  padding: 10px 0 10px 40px;
}

.sidebar-nav .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: #E94E1B;
}

.sidebar-nav .nav-content a.active i {
  background-color: #E94E1B;
}
/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: #4154f1;
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
  padding-bottom: 10px;
}

.dashboard .info-card h6 {
  font-size: 28px;
  color: #012970;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.dashboard .card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.dashboard .sales-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

/* Activity */
.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item+.post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.dashboard .news h4 a:hover {
  color: #4154f1;
}

.dashboard .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
  font-size: 14px;
}

.dashboard .recent-sales .table thead {
  background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
  border: 0;
}

.dashboard .recent-sales .dataTable-top {
  padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
  padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding-top: 15px;
}

.iconslist .icon {
  background-color: #fff;
  border-radius: 0.25rem;
  text-align: center;
  color: #012970;
  padding: 15px 0;
}

.iconslist i {
  margin: 0.25rem;
  font-size: 2.5rem;
}

.iconslist .label {
  font-family: var(--bs-font-monospace);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c384e;
  margin: 10px 0 0 0;
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: #012970;
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: #012970;
}

.profile .profile-overview .label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 600;
  color: #4154f1;
}

.faq .basic p {
  color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 28px 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #4154f1;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
  background: #4154f1;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #5969f3;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
  padding: 30px;
}

.error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: #4154f1;
  margin-bottom: 0;
  line-height: 150px;
}

.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 30px;
}

.error-404 .btn {
  background: #51678f;
  color: #fff;
  padding: 8px 30px;
}

.error-404 .btn:hover {
  background: #3e4f6f;
}

@media (min-width: 992px) {
  .error-404 img {
    max-width: 50%;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 20px 0;
  font-size: 14px;
  transition: all 0.3s;
  border-top: 1px solid #cddfff;
}

.footer .copyright {
  text-align: center;
  color: #012970;
}

.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: #012970;
}

/* Pie del panel (mockup/_footer.php): la estructura del de fabrica-ropa, en
   una fila con la empresa, el desarrollador y soporte, y el color de la
   plataforma como la barra superior. Va con su propia clase para no tocar
   otros .footer (el sitio publico tiene el suyo). */
.footer.footer-panel {
  padding: 14px 0;
  background: linear-gradient(135deg, var(--rm-vino-dark, #2f0001) 0%, var(--rm-vino, #490102) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}

.footer-panel .container-fluid {
  padding: 0 24px;
}

.footer-panel .footer-brand {
  font-weight: 600;
  color: #fff;
  font-size: 13px;
}

.footer-panel .footer-dev {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.footer-panel .footer-dev a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-panel .footer-dev a:hover {
  color: var(--rm-naranja, #e94e1b);
}

.footer-panel .footer-kondory-logo {
  height: 18px;
  margin: 0 2px;
  filter: brightness(0) invert(1);
}

.footer-panel .footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #25d366;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-panel .footer-wa:hover {
  color: #fff;
}

.footer-panel .footer-wa i {
  font-size: 16px;
}

@media (max-width: 575.98px) {
  .footer-panel .container-fluid {
    padding: 0 14px;
  }

  .footer-panel .container-fluid > .d-flex {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* El pie siempre al fondo de la pantalla: en paginas cortas el contenido
   (#main) crece hasta llenar el alto y empuja el pie abajo; en las largas no
   cambia nada. El header, el menu, los modales y el preloader son fixed y no
   cuentan para el acomodo. Solo aplica a las paginas con el pie del panel. */
body:has(> #footer.footer-panel) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(> #footer.footer-panel) > #main {
  flex: 1 0 auto;
}

body:has(> #footer.footer-panel) > #footer {
  flex-shrink: 0;
}

/*--------------------------------------------------------------
# Custom Form Validation - Solo mostrar estados inválidos (rojos)
--------------------------------------------------------------*/

/* Oculta el borde verde y el checkmark en campos válidos */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: #ced4da !important;
  background-image: none !important;
}

/* Al hacer focus en campos válidos, muestra azul (color Bootstrap) */
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Muestra rojo para campos inválidos */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545 !important;
}

/* Al hacer focus en campos inválidos, mantiene rojo */
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}


.login-bg {
  position: relative;
  background: url('../../assets/img/login_bg.png') center center / cover no-repeat;
}

.login-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 36, 64, 0.6); /* overlay azul oscuro */
  z-index: 0;
}

.login-bg .container {
  position: relative;
  z-index: 1;
}

/*--------------------------------------------------------------
# Contadores (KPI)

Los de ordenes de corte de project-fabrica-ropa, que es la referencia de
diseño: tarjeta blanca, chip de color con el icono, cifra y rotulo.

    <div class="row g-2 mb-3">
      <div class="col-6 col-md-3">
        <div class="card mb-0">
          <div class="kpi">
            <div class="kpi-ic" style="background:#f0a330;"><i class="bi bi-hourglass-split"></i></div>
            <div>
              <div class="kpi-val">12</div>
              <div class="kpi-lbl">Pendientes</div>
            </div>
          </div>
        </div>
      </div>
    </div>
--------------------------------------------------------------*/
/* Para que todas las tarjetas de una fila tengan el alto de la mas alta
   (p. ej. la que lleva .kpi-hint), la card va con h-100 y .kpi ocupa todo
   su alto, con el contenido centrado. */
.kpi {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.kpi-ic {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.kpi-val {
  font-size: 1.35rem;
  font-weight: 700;
  color: #012970;
  line-height: 1.1;
}

.kpi-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #899bbd;
  font-weight: 600;
}

/* Aclaracion opcional debajo del rotulo */
.kpi-hint {
  font-size: 0.72rem;
  color: #899bbd;
}

/* Rueda de progreso opcional, pegada a la derecha de la tarjeta. El SVG
   gira -90deg para que el trazo arranque arriba y no a las 3 en punto. */
.kpi-ring {
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: auto;
  flex-shrink: 0;
}

.kpi-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.kpi-ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #012970;
}

/*--------------------------------------------------------------
# Botones de accion redondos (Elements::botonAccionCircular)

Solo icono y con fondo, como crearBotonVer de fabrica-ropa. Tamaño fijo
para que los de una misma fila midan igual y el icono quede centrado.
--------------------------------------------------------------*/
.btn-accion {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

/*--------------------------------------------------------------
# Acordeon con aspecto de card

Seccion plegable que se ve igual que las cards del panel: fondo blanco,
la misma sombra y separacion, y el titulo con el tamaño de un encabezado
de card (h5 en negrita, color de la marca). Para bloques secundarios de
una pantalla que no hace falta tener siempre abiertos.

    <div class="accordion accordion-card" id="accX">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse" data-bs-target="#panelX">
            <i class="bi bi-archive me-2"></i>Titulo
          </button>
        </h2>
        <div id="panelX" class="accordion-collapse collapse">
          <div class="accordion-body"> ... </div>
        </div>
      </div>
    </div>
--------------------------------------------------------------*/
.accordion-card {
  margin-bottom: 30px;
}

.accordion-card .accordion-item {
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.accordion-card .accordion-button {
  padding: 15px 20px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rm-vino, #012970);
  background-color: #fff;
}

.accordion-card .accordion-button:not(.collapsed) {
  color: var(--rm-vino, #012970);
  background-color: #fff;
  border-bottom: 1px solid #ebeef4;
  box-shadow: none;
}

.accordion-card .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-card .accordion-body {
  padding: 15px 20px 20px;
}

/*--------------------------------------------------------------
# DataTables

Estilo comun de TODOS los listados del panel, traido de
project-fabrica-ropa, que es la referencia de diseño. Vive aca porque
style.css carga despues del tema de Bootstrap 4 de DataTables (ver
mockup/_head.php) y asi le gana, incluidas las flechas de ordenamiento.

El acento usa el color de la marca (--rm-vino) en vez del azul fijo de
fabrica.

Funciona con o sin las clases table-bordered / table-striped: mas abajo
se neutralizan las dos para que todos los listados se vean igual.
--------------------------------------------------------------*/

/* ---------- Barra superior: cantidad de registros y buscador ----------
   El tema de Bootstrap 4 pinta el buscador como form-control-sm, que es
   lo que lo hacia ver pequeño. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6c757d;
  white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter label {
  justify-content: flex-end;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.9rem;
  color: #3f4756;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dataTables_wrapper .dataTables_filter input {
  min-width: 260px;
  margin-left: 0;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: 0;
  border-color: var(--rm-vino, #4154f1);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_filter label {
    justify-content: flex-start;
  }

  .dataTables_wrapper .dataTables_filter input {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Tabla ----------
   El marco redondeado se arma con los bordes de las celdas de los
   extremos: DataTables inserta sus propios divs alrededor de la tabla y
   no queda un contenedor estable donde ponerlo. */
.dataTables_wrapper table.dataTable {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Apaga el rayado de table-striped y el realce de table-hover; el
   escalonado y el :hover los ponen las reglas de mas abajo. */
.dataTables_wrapper table.dataTable > tbody > tr > *,
.dataTables_wrapper table.dataTable > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
}

/* Cabecera */
.dataTables_wrapper table.dataTable > thead > tr > th {
  padding: 11px 14px;
  /* La letra de los titulos y el header (Nunito), no la del texto corrido */
  font-family: "Nunito", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5b6577;
  background: #f6f8fb;
  /* Primero se limpian los bordes de table-bordered y del tema; despues
     se pone solo lo que se quiere ver. Sin esto quedaba doble linea. */
  border: 0;
  border-top: 1px solid #dde3ee;
  border-bottom: 1px solid #dde3ee;
  border-right: 1px solid #dde3ee;
  vertical-align: middle;
  white-space: nowrap;
}

/* Hueco para la flecha de orden */
.dataTables_wrapper table.dataTable > thead > tr > th:not(.sorting_disabled) {
  padding-right: 30px;
}

.dataTables_wrapper table.dataTable > thead > tr > th:first-child {
  border-left: 1px solid #e7eaf1;
  border-top-left-radius: 10px;
}

.dataTables_wrapper table.dataTable > thead > tr > th:last-child {
  border-right: 1px solid #e7eaf1;
  border-top-right-radius: 10px;
}

/* Cuerpo: sin lineas verticales entre columnas, solo la linea entre filas
   (arriba y abajo de cada una) y el marco de la tabla por los extremos. */
.dataTables_wrapper table.dataTable > tbody > tr > td {
  padding: 10px 14px;
  font-family: "Nunito", sans-serif;
  font-size: 0.92rem;
  color: #3f4756;
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid #eaeef5;
  vertical-align: middle;
  transition: background-color 0.12s ease;
}

.dataTables_wrapper table.dataTable > tbody > tr > td:first-child {
  border-left: 1px solid #e7eaf1;
}

.dataTables_wrapper table.dataTable > tbody > tr > td:last-child {
  border-right: 1px solid #e7eaf1;
}

.dataTables_wrapper table.dataTable > tbody > tr:last-child > td {
  border-bottom: 1px solid #e7eaf1;
}

.dataTables_wrapper table.dataTable > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 10px;
}

.dataTables_wrapper table.dataTable > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 10px;
}

/* Escalonado gris/blanco. El :hover va despues a proposito: misma
   especificidad, gana el ultimo. */
.dataTables_wrapper table.dataTable > tbody > tr:nth-child(even) > td {
  background-color: #fafbfd;
}

.dataTables_wrapper table.dataTable > tbody > tr:hover > td {
  background-color: #eef3fb;
}

/* Sin resultados */
.dataTables_wrapper table.dataTable > tbody > tr > td.dataTables_empty {
  padding: 36px 14px;
  color: #9aa4b4;
  font-size: 0.95rem;
}

/* ---------- Flechas de ordenamiento ----------
   El tema pinta dos flechas siempre visibles; se deja una sola, gris
   cuando se puede ordenar y con el acento cuando el orden esta activo. */
.dataTables_wrapper table.dataTable > thead .sorting:before,
.dataTables_wrapper table.dataTable > thead .sorting_asc:before,
.dataTables_wrapper table.dataTable > thead .sorting_desc:before,
.dataTables_wrapper table.dataTable > thead .sorting_asc_disabled:before,
.dataTables_wrapper table.dataTable > thead .sorting_desc_disabled:before {
  display: none;
}

.dataTables_wrapper table.dataTable > thead .sorting:after,
.dataTables_wrapper table.dataTable > thead .sorting_asc:after,
.dataTables_wrapper table.dataTable > thead .sorting_desc:after {
  right: 10px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.4;
  color: #8d97a8;
  content: "\2195";
}

.dataTables_wrapper table.dataTable > thead .sorting:hover:after {
  opacity: 0.75;
}

.dataTables_wrapper table.dataTable > thead .sorting_asc:after {
  content: "\2191";
  opacity: 1;
  color: var(--rm-vino, #4154f1);
}

.dataTables_wrapper table.dataTable > thead .sorting_desc:after {
  content: "\2193";
  opacity: 1;
  color: var(--rm-vino, #4154f1);
}

/* La columna ordenada se marca tambien en el fondo */
.dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc,
.dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc {
  color: var(--rm-vino, #012970);
  background: #eef2fb;
}

/* ---------- Pie: conteo y paginacion ---------- */
.dataTables_wrapper .dataTables_info {
  padding-top: 16px !important;
  font-size: 0.85rem;
  color: #8d97a8;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  gap: 4px;
  /* La pagina activa toma el mismo color de acento que los demas enlaces,
     aclarado de fondo. Las lineas repetidas son el respaldo para
     navegadores sin color-mix. */
  --bs-pagination-active-color: var(--bs-pagination-color);
  --bs-pagination-active-bg: #e6edf6;
  --bs-pagination-active-bg: color-mix(in srgb, var(--bs-pagination-color) 14%, #fff);
  --bs-pagination-active-border-color: #c8d5e6;
  --bs-pagination-active-border-color: var(--bs-pagination-color);
}

.dataTables_wrapper .dataTables_paginate .page-link {
  border: 1px solid #e7eaf1;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 0.875rem;
  background-color: #fff;
}

.dataTables_wrapper .dataTables_paginate .page-link:hover {
  background-color: #f5f7fb;
  border-color: #dbe2ee;
}

.dataTables_wrapper .dataTables_paginate .page-link:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px currentColor;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  color: #c3c9d4;
  background-color: #fff;
  border-color: #eef1f6;
}

/* ---------- Indicador de "procesando" ---------- */
.dataTables_wrapper .dataTables_processing {
  z-index: 10;
  padding: 14px 22px !important;
  margin-top: -30px;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(1, 41, 112, 0.12);
  font-size: 0.875rem;
  font-weight: 600;
  color: #5b6577;
}

/* ---------- Tablas que no parten sus celdas ----------
   Con la clase dt-nowrap el texto no se parte en varias lineas: si la tabla
   no cabe, hace scroll horizontal (scrollX de DataTables) en vez de
   apretarse y dejar filas altisimas. */
.dt-nowrap th,
.dt-nowrap td {
  white-space: nowrap;
}

/* ---------- Filas resaltadas ----------
   El estilo comun de arriba pinta el fondo de cada celda y taparia el de
   table-warning / table-success de Bootstrap. Van despues para ganarle al
   escalonado y al :hover. */
.dataTables_wrapper table.dataTable > tbody > tr.table-warning > td {
  background-color: #fff6df;
}

.dataTables_wrapper table.dataTable > tbody > tr.table-success > td {
  background-color: #e9f6ee;
}

/*--------------------------------------------------------------
# Pie de los modales

Los botones del pie van en una sola fila; Bootstrap los deja bajar de
linea. En celular, donde no caben, si pueden bajar.
--------------------------------------------------------------*/
@media (min-width: 576px) {
  .modal-footer {
    flex-wrap: nowrap;
  }

  .modal-footer .btn {
    white-space: nowrap;
  }
}

/*--------------------------------------------------------------
# Lector con camara (system/js/cameraScanner.js)

El video va a lo ancho del contenedor, hasta 560px y centrado, sin
recortarlo: la zona de lectura se calcula sobre el tamaño del video.
Al aceptar un codigo el borde destella en verde.
--------------------------------------------------------------*/
.camara-lector {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 0 !important;
  border: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.camara-lector video {
  display: block;
  width: 100% !important;
}

@keyframes camara-leido {
  from { border-color: #2e7d52; }
  to   { border-color: transparent; }
}

.camara-lector.camara-leido {
  animation: camara-leido 0.7s ease-out;
}

/* Mientras la camara abre y llega el primer cuadro del video: rueda y aviso
   encima del recuadro negro. Van en pseudo-elementos porque html5-qrcode
   reescribe el contenido del contenedor. */
@keyframes camara-girar {
  to { transform: rotate(360deg); }
}

.camara-lector.camara-cargando {
  position: relative;
  min-height: 200px;
}

.camara-lector.camara-cargando::before,
.camara-lector.camara-cargando::after {
  position: absolute;
  left: 50%;
  z-index: 5;
}

.camara-lector.camara-cargando::before {
  content: "";
  top: calc(50% - 30px);
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: camara-girar 0.8s linear infinite;
}

.camara-lector.camara-cargando::after {
  content: "Abriendo c\00e1mara\2026";
  top: calc(50% + 16px);
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* En un grupo con boton de camara los botones no bajan de linea y el numero
   siempre deja ver lo escrito */
.input-group-camara {
  flex-wrap: nowrap;
}

.input-group-camara > .form-control {
  min-width: 8rem;
}

/*--------------------------------------------------------------
# Filtros en acordeon (como en fabrica-ropa)

Cuando los filtros no caben en una fila van dentro de un acordeon
cerrado, encima de la tabla:

    <div class="accordion acc-filtros mb-3" id="accFiltrosX">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse" data-bs-target="#panelFiltrosX">
            <i class="bi bi-funnel-fill me-2"></i>Filtros avanzados
            <span class="badge bg-rm-vino ms-2 d-none">0</span>
          </button>
        </h2>
        <div id="panelFiltrosX" class="accordion-collapse collapse">
          <div class="accordion-body"> ...filtros... </div>
        </div>
      </div>
    </div>

El numero del encabezado dice cuantos filtros hay puestos: con los filtros
escondidos, si no se avisa parece que a la tabla le faltan registros.
--------------------------------------------------------------*/
.acc-filtros .accordion-item {
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  overflow: hidden;
}

.acc-filtros .accordion-button {
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--rm-vino, #012970);
  background: #eef1f7;
}

.acc-filtros .accordion-button:not(.collapsed) {
  background: #e3e9f4;
  box-shadow: none;
}

.acc-filtros .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/*--------------------------------------------------------------
# Filtros por columna de DataTables

Van en una segunda fila del encabezado (tr.dt-filtros), debajo de los
titulos, y no en el pie de la tabla. Esa fila no ordena: DataTables solo
engancha el orden a la fila de los titulos.
--------------------------------------------------------------*/
/* La fila hereda las reglas de los titulos (borde arriba, esquinas redondas
   en la primera y la ultima celda, espacio a la derecha para la flecha de
   orden): aqui se deshacen para que se vea como parte del mismo encabezado. */
.dataTables_wrapper table.dataTable > thead > tr.dt-filtros > th {
  padding: 6px 8px;
  background: #f6f8fb;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  border-top: 0;
}

.dataTables_wrapper table.dataTable > thead > tr.dt-filtros > th:first-child,
.dataTables_wrapper table.dataTable > thead > tr.dt-filtros > th:last-child {
  border-radius: 0;
}

.dataTables_wrapper table.dataTable > thead > tr.dt-filtros > th::before,
.dataTables_wrapper table.dataTable > thead > tr.dt-filtros > th::after {
  display: none;
}

/* Campo compacto que ocupa el ancho de su columna y se encoge con ella */
.dataTables_wrapper table.dataTable > thead > tr.dt-filtros .form-control {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  font-size: 0.82rem;
  border-color: #dde3ee;
  border-radius: 6px;
  background: #fff;
}

.dataTables_wrapper table.dataTable > thead > tr.dt-filtros .form-control:focus {
  border-color: var(--rm-vino, #4154f1);
  box-shadow: none;
}

/*--------------------------------------------------------------
# Pie de la ficha de guia (guias.php)

Vale para los dos pies de la ficha: el de la guia (acciones y Cerrar) y
el de la edicion (Atras y Guardar cambios). Los botones ocupan juntos el
ancho de una sola fila, con la altura normal de un boton: cada uno parte de su ancho natural y crece para
repartir el espacio que sobra, asi el texto queda en una linea. Si no
caben, el texto se recorta con "..." en vez de agrandar el boton. En
celular pueden bajar de linea.

Los contenedores (.ficha-acciones-botones, .btn-toolbar y .btn-group) se
conservan porque el JS esconde los grupos vacios, pero con display:
contents no cuentan para el acomodo: cada boton queda como hijo directo de
la fila y se ve separado, no pegado a los de su grupo.
--------------------------------------------------------------*/
#modalFicha .modal-footer.ficha-acciones {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

#modalFicha .ficha-acciones-botones,
#modalFicha .ficha-acciones .btn-toolbar,
#modalFicha .ficha-acciones .btn-group {
  display: contents;
}

#modalFicha .ficha-acciones .btn {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  border-radius: 0.375rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sin acciones, el aviso ocupa el espacio y Cerrar sigue a la derecha */
#modalFicha .ficha-acciones #hintAccionesVacio {
  flex: 1 1 auto;
}

@media (max-width: 575.98px) {
  #modalFicha .modal-footer.ficha-acciones {
    flex-wrap: wrap;
  }
}

/*--------------------------------------------------------------
# Select2 con el aspecto de un form-select de Bootstrap

Select2 trae su propio estilo (mas bajo, otra flecha, otro borde y
resaltado): aqui se iguala al .form-select de Bootstrap 5 para que no se
note la diferencia junto a los demas campos. Cubre las clases de Select2
4.0 y 4.1.

Las reglas van con "body" delante: select2.min.css se carga con $extraCss,
despues de style.css, y con la misma especificidad ganaria el suyo.
--------------------------------------------------------------*/
body .select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 16px 12px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
  color: #212529;
}

body .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}

/* La flecha es la del fondo, como en .form-select */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

body .select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 0.25rem;
  color: #6c757d;
}

body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Lista desplegable: borde y sombra de un menu de Bootstrap */
body .select2-container--default .select2-dropdown {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

body .select2-container--default .select2-dropdown--below {
  margin-top: 4px;
}

body .select2-container--default .select2-dropdown--above {
  margin-top: -4px;
}

body .select2-container--default .select2-search--dropdown {
  padding: 0.5rem;
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  outline: 0;
}

body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body .select2-container--default .select2-results__option {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}

/* Opcion bajo el cursor (4.0 y 4.1) */
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--rm-vino, #0d6efd);
  color: #fff;
}

/* Opcion ya elegida */
body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option--selected {
  background-color: #e9ecef;
  color: #212529;
}

/*--------------------------------------------------------------
# Tarjetas de conteo que filtran una tabla (guias_verificacion.php)

La tarjeta es la de Elements::tarjetaKpi dentro de un boton: al hacer clic
filtra la tabla y queda marcada con el borde del color de la plataforma.
--------------------------------------------------------------*/
.kpi-filtro {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.kpi-filtro .card {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.kpi-filtro:hover .card {
  border-color: #c9d3e6 !important;
}

.kpi-filtro.active .card {
  border-color: var(--rm-vino, #490102) !important;
  box-shadow: 0 0 0 2px rgba(73, 1, 2, 0.12) !important;
}

.kpi-filtro:focus-visible {
  outline: 2px solid var(--rm-vino, #490102);
  outline-offset: 2px;
  border-radius: 8px;
}

/* El detalle del veredicto es texto largo: baja de linea aunque la tabla sea dt-nowrap */
#tablaVerificacion td.verif-detalle {
  white-space: normal;
  min-width: 280px;
}

/* Columnas de texto largo (observaciones) en tablas dt-nowrap: bajan de linea */
.dt-nowrap td.dt-texto-largo {
  white-space: normal;
  min-width: 260px;
}

/*--------------------------------------------------------------
# Selector de vistas segmentado (.nav-segmentado)

Para cambiar entre vistas hermanas dentro de una pestaña (por ejemplo las
de Financiero > Conciliacion) sin otra fila de pestañas ni botones
rellenos: una barra gris con las opciones y la elegida en blanco. Va en un
<ul class="nav nav-segmentado"> con los botones data-bs-toggle="pill".
--------------------------------------------------------------*/
.nav-segmentado {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4px;
  padding: 4px;
  background: #eef1f7;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
}

/* Todas las opciones del mismo ancho, como los botones que se reparten las 12 columnas */
.nav-segmentado .nav-item {
  flex: 1 1 0;
  min-width: 0;
}

.nav-segmentado .nav-link {
  width: 100%;
  text-align: center;
  border: 0;
  border-radius: 7px;
  padding: 0.45rem 1rem;
  background: transparent;
  color: #5b6577;
  font-weight: 500;
  height: 100%;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nav-segmentado .nav-link:hover {
  color: #4154f1;
  background: rgba(255, 255, 255, 0.6);
}

.nav-segmentado .nav-link.active {
  background: #fff;
  color: #4154f1;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

.nav-segmentado .nav-link:focus-visible {
  outline: 2px solid #4154f1;
  outline-offset: 1px;
}

/* En celular, dos opciones por fila */
@media (max-width: 767.98px) {
  .nav-segmentado .nav-item {
    flex: 1 1 45%;
  }
}