/* =====================================================================
   CERVEZAS DEL VALLE — tema "consola"
   ---------------------------------------------------------------------
   Capa de estilos propia. Se carga DESPUES de Bootstrap, AdminLTE y los
   plugins, y es lo ultimo que pisa. No se toca el marcado de las 26
   pantallas: con 410 input-group y 191 modales, reescribir HTML es la
   forma segura de romper algo que hoy anda.

   Para volver atras: sacar la linea que carga este archivo en
   vistas/plantilla.php. Nada mas.

   El <body> lleva la clase `skin-cdv`, que NO existe en _all-skins.css.
   Eso es a proposito: asi ninguna regla de skin de AdminLTE aplica y este
   archivo no tiene que pelear con !important por cada color.
   ===================================================================== */

:root{
  /* superficies -- el CONTENIDO va claro */
  --cdv-bg:      #F4F6F9;   /* fondo general */
  --cdv-bg-2:    #FFFFFF;   /* paneles */
  --cdv-bg-3:    #F7F9FC;   /* elementos elevados */
  --cdv-bg-4:    #E9EEF4;   /* hover */
  --cdv-line:    #E3E9F0;
  --cdv-line-2:  #CFD8E3;

  /* texto */
  --cdv-txt:     #16202B;
  --cdv-txt-2:   #48586B;
  --cdv-txt-3:   #78889A;

  /* acento: el mismo turquesa, pero oscurecido para que se lea sobre claro */
  --cdv-ac:      #0E8FA8;
  --cdv-ac-2:    #0B7286;
  --cdv-ac-dim:  rgba(14,143,168,.12);

  /* semanticos, en version legible sobre fondo claro */
  --cdv-ok:      #0F9D6E;
  --cdv-warn:    #C07808;
  --cdv-bad:     #D64545;
  --cdv-info:    #2563EB;
  --cdv-violet:  #7C3AED;

  --cdv-r:       10px;   /* radio */
  --cdv-r-sm:    7px;
  --cdv-sh:      0 1px 2px rgba(16,32,48,.06), 0 10px 26px -16px rgba(16,32,48,.22);

  --cdv-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cdv-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
}

/* =====================================================================
   PALETA OSCURA PARA EL "CHROME"
   La barra lateral, la cabecera y el recuadro de ingreso se quedan
   oscuros a proposito: dan contraste contra el contenido claro y
   ordenan la pantalla.

   No hace falta reescribir ninguna regla: se redefinen las variables
   dentro de esos contenedores y, como heredan, todo lo de adentro
   resuelve solo a los valores oscuros.
   ===================================================================== */
.skin-cdv .main-sidebar,
.skin-cdv .left-side,
.skin-cdv .main-header,
.login-box{
  --cdv-bg:      #0D1218;
  --cdv-bg-2:    #10161D;
  --cdv-bg-3:    #161E27;
  --cdv-bg-4:    #1C2733;
  --cdv-line:    #1F2A36;
  --cdv-line-2:  #2A3846;
  --cdv-txt:     #E6EDF3;
  --cdv-txt-2:   #9BA9B8;
  --cdv-txt-3:   #6B7A8A;
  --cdv-ac:      #22D3EE;
  --cdv-ac-2:    #0EA5B7;
  --cdv-ac-dim:  rgba(34,211,238,.14);
}

/* =====================================================================
   1. BASE
   ===================================================================== */
body.skin-cdv,
body.skin-cdv .wrapper,
body.skin-cdv .content-wrapper,
body.skin-cdv .right-side{
  background: var(--cdv-bg);
  color: var(--cdv-txt);
  font-family: var(--cdv-font);
  -webkit-font-smoothing: antialiased;
}
body.skin-cdv{ font-size: 14px; letter-spacing: .1px; }

.skin-cdv a{ color: var(--cdv-ac); }
.skin-cdv a:hover,.skin-cdv a:focus{ color: var(--cdv-ac-2); text-decoration: none; }

.skin-cdv .content-header{ padding: 22px 22px 6px; background: transparent; }
.skin-cdv .content-header > h1{
  font-size: 21px; font-weight: 650; color: var(--cdv-txt); letter-spacing: -.2px;
}
.skin-cdv .content-header > h1 > small{ color: var(--cdv-txt-3); font-size: 13px; }
.skin-cdv .content{ padding: 14px 22px 30px; }

.skin-cdv .breadcrumb{ background: transparent; }
.skin-cdv .breadcrumb > li > a{ color: var(--cdv-txt-3); }
.skin-cdv .breadcrumb > .active{ color: var(--cdv-txt-2); }

/* barras de desplazamiento acordes */
.skin-cdv *::-webkit-scrollbar{ width: 10px; height: 10px; }
.skin-cdv *::-webkit-scrollbar-track{ background: var(--cdv-bg); }
.skin-cdv *::-webkit-scrollbar-thumb{
  background: var(--cdv-line-2); border-radius: 8px; border: 2px solid var(--cdv-bg);
}
.skin-cdv *::-webkit-scrollbar-thumb:hover{ background: #3A4A5C; }

/* seleccion de texto */
.skin-cdv ::selection{ background: rgba(14,143,168,.18); color: #06323C; }

/* =====================================================================
   2. CABECERA
   ===================================================================== */
.skin-cdv .main-header .navbar,
.skin-cdv .main-header .logo{
  background: rgba(16,22,29,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cdv-line);
  box-shadow: none;
}
.skin-cdv .main-header .logo{ border-right: 1px solid var(--cdv-line); }
.skin-cdv .main-header .logo:hover{ background: rgba(16,22,29,.92); }
.skin-cdv .main-header .navbar .sidebar-toggle{ color: var(--cdv-txt-2); }
.skin-cdv .main-header .navbar .sidebar-toggle:hover{
  background: var(--cdv-bg-3); color: var(--cdv-ac);
}
.skin-cdv .main-header li.user-header{ background: var(--cdv-bg-3); }

.skin-cdv .navbar-nav > .user-menu > .dropdown-toggle{ color: var(--cdv-txt-2); }
.skin-cdv .navbar-nav > .user-menu > a:hover{ background: var(--cdv-bg-3); color: var(--cdv-txt); }
.skin-cdv .navbar-nav > .user-menu .user-image{
  border-radius: 50%; border: 1px solid var(--cdv-line-2);
}
.skin-cdv .dropdown-menu{
  background: var(--cdv-bg-3); border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r); box-shadow: var(--cdv-sh); padding: 6px;
}
.skin-cdv .dropdown-menu > li > a{ color: var(--cdv-txt-2); border-radius: var(--cdv-r-sm); }
.skin-cdv .dropdown-menu > li > a:hover{ background: var(--cdv-bg-4); color: var(--cdv-txt); }

/* =====================================================================
   3. BARRA LATERAL
   ===================================================================== */
.skin-cdv .main-sidebar,
.skin-cdv .left-side{
  background: #0D1218;
  border-right: 1px solid var(--cdv-line);
}
.skin-cdv .sidebar-menu > li > a{
  color: var(--cdv-txt-2);
  border-left: 2px solid transparent;
  padding: 11px 14px;
  margin: 1px 8px;
  border-radius: var(--cdv-r-sm);
  font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.skin-cdv .sidebar-menu > li > a > .fa,
.skin-cdv .sidebar-menu > li > a > .ion{
  width: 20px; color: var(--cdv-txt-3); transition: color .13s ease;
}
.skin-cdv .sidebar-menu > li:hover > a{
  background: var(--cdv-bg-3); color: var(--cdv-txt); border-left-color: transparent;
}
.skin-cdv .sidebar-menu > li:hover > a > .fa{ color: var(--cdv-ac); }
.skin-cdv .sidebar-menu > li.active > a{
  background: var(--cdv-ac-dim);
  color: #A5F3FC;
  border-left-color: var(--cdv-ac);
  border-radius: var(--cdv-r-sm);
}
.skin-cdv .sidebar-menu > li.active > a > .fa{ color: var(--cdv-ac); }
.skin-cdv .sidebar-menu > li.header{
  background: transparent; color: var(--cdv-txt-3);
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 16px 22px 7px;
}
.skin-cdv .treeview-menu > li > a{ color: var(--cdv-txt-3); }
.skin-cdv .treeview-menu > li > a:hover{ color: var(--cdv-txt); }
.skin-cdv .sidebar-form input[type="text"],
.skin-cdv .sidebar-form .btn{
  background: var(--cdv-bg-3); border-color: var(--cdv-line-2); color: var(--cdv-txt);
}

/* =====================================================================
   4. CAJAS  ->  tarjetas
   ===================================================================== */
.skin-cdv .box{
  background: var(--cdv-bg-2);
  border: 1px solid var(--cdv-line);
  border-top: 1px solid var(--cdv-line);      /* AdminLTE pinta una franja arriba */
  border-radius: var(--cdv-r);
  box-shadow: var(--cdv-sh);
  margin-bottom: 18px;
}
.skin-cdv .box.box-primary,.skin-cdv .box.box-info,.skin-cdv .box.box-success,
.skin-cdv .box.box-warning,.skin-cdv .box.box-danger,.skin-cdv .box.box-default{
  border-top-color: var(--cdv-line);
}
.skin-cdv .box-header{
  border-bottom: 1px solid var(--cdv-line);
  padding: 14px 18px;
  color: var(--cdv-txt);
}
.skin-cdv .box-header.with-border{ border-bottom: 1px solid var(--cdv-line); }
.skin-cdv .box-header > .box-title{
  font-size: 14px; font-weight: 620; letter-spacing: .2px;
}
.skin-cdv .box-header > .box-tools .btn{ background: transparent; color: var(--cdv-txt-3); }
.skin-cdv .box-body{ padding: 18px; }
.skin-cdv .box-footer{
  background: var(--cdv-bg-2); border-top: 1px solid var(--cdv-line);
  border-radius: 0 0 var(--cdv-r) var(--cdv-r);
}
/* la cabecera de color de AdminLTE (box-solid) se apaga */
.skin-cdv .box.box-solid > .box-header{
  background: var(--cdv-bg-3); color: var(--cdv-txt);
}
.skin-cdv .box.box-solid{ border: 1px solid var(--cdv-line); }

/* =====================================================================
   5. INDICADORES (small-box) -> tarjetas de metrica
   ===================================================================== */
.skin-cdv .small-box{
  background: var(--cdv-bg-2) !important;
  border: 1px solid var(--cdv-line);
  border-radius: var(--cdv-r);
  box-shadow: var(--cdv-sh);
  color: var(--cdv-txt) !important;
  overflow: hidden;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
.skin-cdv .small-box:hover{ transform: translateY(-2px); border-color: var(--cdv-line-2); }
/* franja de color a la izquierda, segun el color original de AdminLTE */
.skin-cdv .small-box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--cdv-ac);
}
.skin-cdv .small-box.bg-green::before{  background: var(--cdv-ok); }
.skin-cdv .small-box.bg-yellow::before{ background: var(--cdv-warn); }
.skin-cdv .small-box.bg-red::before{    background: var(--cdv-bad); }
.skin-cdv .small-box.bg-blue::before,
.skin-cdv .small-box.bg-aqua::before{   background: var(--cdv-info); }
.skin-cdv .small-box > .inner{ padding: 18px 18px 12px; }
.skin-cdv .small-box h3{
  font-size: 32px; font-weight: 680; color: var(--cdv-txt);
  letter-spacing: -.6px; margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.skin-cdv .small-box p{
  color: var(--cdv-txt-3); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 1.1px; font-weight: 600; margin: 0;
}
.skin-cdv .small-box .icon{
  color: rgba(22,32,43,.05); font-size: 66px; top: 8px; right: 12px;
}
.skin-cdv .small-box:hover .icon{ color: rgba(14,143,168,.12); }
.skin-cdv .small-box > .small-box-footer{
  background: transparent; border-top: 1px solid var(--cdv-line);
  color: var(--cdv-txt-3); font-size: 12px; padding: 9px;
}
.skin-cdv .small-box > .small-box-footer:hover{ background: var(--cdv-bg-3); color: var(--cdv-ac); }

/* =====================================================================
   6. BOTONES
   ===================================================================== */
.skin-cdv .btn{
  border-radius: var(--cdv-r-sm);
  font-weight: 560;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: filter .13s ease, background .13s ease, border-color .13s ease;
  box-shadow: none;
}
.skin-cdv .btn:focus,.skin-cdv .btn:active:focus{
  outline: none; box-shadow: 0 0 0 3px var(--cdv-ac-dim);
}
.skin-cdv .btn-default{
  background: var(--cdv-bg-3); border-color: var(--cdv-line-2); color: var(--cdv-txt-2);
}
.skin-cdv .btn-default:hover{ background: var(--cdv-bg-4); color: var(--cdv-txt); }

.skin-cdv .btn-primary{
  background: linear-gradient(180deg, var(--cdv-ac) 0%, var(--cdv-ac-2) 100%);
  border-color: var(--cdv-ac-2); color: #04222A; font-weight: 640;
}
.skin-cdv .btn-primary:hover,.skin-cdv .btn-primary:focus{ filter: brightness(1.08); color: #04222A; }

.skin-cdv .btn-success{ background: #E6F6EF; border-color: #A9DFC8; color: #0B6B4C; }
.skin-cdv .btn-success:hover{ background: #D5EFE3; color: #085239; }
.skin-cdv .btn-danger{  background: #FDECEC; border-color: #F2BABA; color: #9B2C2C; }
.skin-cdv .btn-danger:hover{  background: #FADEDE; color: #7C2222; }
.skin-cdv .btn-warning{ background: #FDF4E3; border-color: #EFD3A2; color: #8A5A08; }
.skin-cdv .btn-warning:hover{ background: #FAEACD; color: #6E4706; }
.skin-cdv .btn-info{    background: #E8F1FD; border-color: #B7D4F6; color: #1E4E8C; }
.skin-cdv .btn-info:hover{    background: #D8E7FB; color: #173D6E; }

/* =====================================================================
   7. FORMULARIOS
   ===================================================================== */
.skin-cdv .form-control{
  background: var(--cdv-bg-3);
  border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r-sm);
  color: var(--cdv-txt);
  box-shadow: none;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.skin-cdv .form-control:focus{
  border-color: var(--cdv-ac);
  box-shadow: 0 0 0 3px var(--cdv-ac-dim);
}
.skin-cdv .form-control[readonly],
.skin-cdv .form-control[disabled]{ background: #EDF1F6; color: var(--cdv-txt-3); }
.skin-cdv .form-control::placeholder{ color: var(--cdv-txt-3); }
.skin-cdv select.form-control option{ background: var(--cdv-bg-3); color: var(--cdv-txt); }

.skin-cdv .input-group-addon{
  background: var(--cdv-bg-2);
  border: 1px solid var(--cdv-line-2);
  color: var(--cdv-txt-3);
  border-radius: var(--cdv-r-sm);
  font-weight: 560;
}
.skin-cdv .input-group .form-control:first-child,
.skin-cdv .input-group-addon:first-child{
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.skin-cdv .input-group .form-control:last-child,
.skin-cdv .input-group-addon:last-child{
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.skin-cdv label{ color: var(--cdv-txt-2); font-weight: 560; }
.skin-cdv .help-block{ color: var(--cdv-txt-3); }
.skin-cdv hr{ border-color: var(--cdv-line); }

/* select2 (lo usa casi todo formulario) */
.skin-cdv .select2-container .select2-choice,
.skin-cdv .select2-container-multi .select2-choices,
.skin-cdv .select2-drop{
  background: var(--cdv-bg-3) !important;
  border-color: var(--cdv-line-2) !important;
  color: var(--cdv-txt) !important;
  border-radius: var(--cdv-r-sm) !important;
}
.skin-cdv .select2-drop{ box-shadow: var(--cdv-sh); }
.skin-cdv .select2-results{ background: var(--cdv-bg-3); color: var(--cdv-txt-2); }
.skin-cdv .select2-results .select2-highlighted{ background: var(--cdv-ac-dim); color: #06323C; }
.skin-cdv .select2-search input{
  background: var(--cdv-bg-2) !important; border-color: var(--cdv-line-2) !important;
  color: var(--cdv-txt) !important;
}
.skin-cdv .select2-container .select2-choice > .select2-chosen{ color: var(--cdv-txt); }

/* iCheck */
.skin-cdv .icheckbox_flat-blue, .skin-cdv .iradio_flat-blue{ filter: none; }

/* daterangepicker */
.skin-cdv .daterangepicker{
  background: var(--cdv-bg-3); border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r); box-shadow: var(--cdv-sh); color: var(--cdv-txt);
}
.skin-cdv .daterangepicker .calendar-table{ background: var(--cdv-bg-3); border: 0; }
.skin-cdv .daterangepicker td.available:hover{ background: var(--cdv-bg-4); }
.skin-cdv .daterangepicker td.active{ background: var(--cdv-ac); color: #FFFFFF; }
.skin-cdv .daterangepicker td.off{ background: transparent; color: var(--cdv-txt-3); }
.skin-cdv .daterangepicker .ranges li{ background: var(--cdv-bg-2); border-color: var(--cdv-line); color: var(--cdv-txt-2); }
.skin-cdv .daterangepicker .ranges li:hover,
.skin-cdv .daterangepicker .ranges li.active{ background: var(--cdv-ac-dim); color: #06323C; }

/* =====================================================================
   8. TABLAS  +  DataTables
   ===================================================================== */
.skin-cdv .table{ color: var(--cdv-txt-2); margin-bottom: 0; }
.skin-cdv .table > thead > tr > th{
  background: var(--cdv-bg-3);
  border-bottom: 1px solid var(--cdv-line-2);
  border-top: 0;
  color: var(--cdv-txt-3);
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  padding: 11px 12px;
  white-space: nowrap;
}
.skin-cdv .table > tbody > tr > td{
  border-top: 1px solid var(--cdv-line);
  padding: 10px 12px;
  vertical-align: middle;
}
.skin-cdv .table > tbody > tr{ transition: background .1s ease; }
.skin-cdv .table > tbody > tr:hover > td{ background: var(--cdv-bg-3); color: var(--cdv-txt); }
.skin-cdv .table-striped > tbody > tr:nth-of-type(odd){ background: transparent; }
.skin-cdv .table-bordered,
.skin-cdv .table-bordered > tbody > tr > td,
.skin-cdv .table-bordered > thead > tr > th{ border-color: var(--cdv-line); }

/* codigos y numeros, en monoespaciada tabular */
.skin-cdv .table td:first-child{
  font-family: var(--cdv-mono); font-size: 12px; color: var(--cdv-txt-3);
}

.skin-cdv .dataTables_wrapper{ color: var(--cdv-txt-3); }
.skin-cdv .dataTables_wrapper .dataTables_length select,
.skin-cdv .dataTables_wrapper .dataTables_filter input{
  background: var(--cdv-bg-3); border: 1px solid var(--cdv-line-2);
  color: var(--cdv-txt); border-radius: var(--cdv-r-sm); padding: 5px 9px;
}
.skin-cdv .dataTables_wrapper .dataTables_filter input:focus{
  border-color: var(--cdv-ac); box-shadow: 0 0 0 3px var(--cdv-ac-dim); outline: none;
}
.skin-cdv .dataTables_wrapper .dataTables_info,
.skin-cdv .dataTables_wrapper .dataTables_length,
.skin-cdv .dataTables_wrapper .dataTables_filter{ color: var(--cdv-txt-3); font-size: 12.5px; }
.skin-cdv .dataTables_wrapper .dataTables_paginate .paginate_button{
  background: var(--cdv-bg-3) !important;
  border: 1px solid var(--cdv-line-2) !important;
  color: var(--cdv-txt-2) !important;
  border-radius: var(--cdv-r-sm) !important;
  margin: 0 2px; padding: 5px 11px;
}
.skin-cdv .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--cdv-bg-4) !important; color: var(--cdv-txt) !important;
}
.skin-cdv .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--cdv-ac) !important; border-color: var(--cdv-ac) !important;
  color: #04222A !important; font-weight: 650;
}
.skin-cdv .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity: .38; background: transparent !important;
}
.skin-cdv table.dataTable thead .sorting,
.skin-cdv table.dataTable thead .sorting_asc,
.skin-cdv table.dataTable thead .sorting_desc{ opacity: .95; }
.skin-cdv table.dataTable.no-footer{ border-bottom: 1px solid var(--cdv-line); }

/* =====================================================================
   9. ESTADOS DEL TICKET  ->  pildoras
   Los estados se dibujan como <button class="btn btn-...">. Dentro de una
   celda de tabla se los convierte en etiqueta, sin tocar el HTML.
   ===================================================================== */
.skin-cdv td > .btn-xs,
.skin-cdv td > .btn.btn-xs{
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .3px;
  border-width: 1px;
  cursor: default;
  box-shadow: none;
}
.skin-cdv td > .btn-xs.btn-success{ background: rgba(15,157,110,.10); border-color: rgba(15,157,110,.32); color: #0B6B4C; }
.skin-cdv td > .btn-xs.btn-warning{ background: rgba(192,120,8,.10);  border-color: rgba(192,120,8,.32);  color: #8A5A08; }
.skin-cdv td > .btn-xs.btn-danger{  background: rgba(214,69,69,.10);  border-color: rgba(214,69,69,.32);  color: #9B2C2C; }
.skin-cdv td > .btn-xs.btn-info{    background: rgba(37,99,235,.09);  border-color: rgba(37,99,235,.28);  color: #1E4E8C; }
.skin-cdv td > .btn-xs.btn-primary{ background: var(--cdv-ac-dim);    border-color: rgba(14,143,168,.32); color: #0B6B7E; }
.skin-cdv td > .btn-xs.btn-default{ background: var(--cdv-bg-4);       border-color: var(--cdv-line-2);     color: var(--cdv-txt-2); }
/* los botones de accion siguen siendo botones */
.skin-cdv td > .btn-xs[class*="btn"][idticket],
.skin-cdv td > .btn-xs .fa{ cursor: pointer; }

.skin-cdv .label{ border-radius: 999px; padding: 3px 10px; font-weight: 620; }

/* =====================================================================
   10. MODALES
   ===================================================================== */
.skin-cdv .modal-backdrop.in{ opacity: .42; background: #0B1520; }
.skin-cdv .modal-content{
  background: var(--cdv-bg-2);
  border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r);
  box-shadow: 0 24px 70px -26px rgba(16,32,48,.38);
  color: var(--cdv-txt);
}
.skin-cdv .modal-header{
  border-bottom: 1px solid var(--cdv-line);
  padding: 16px 20px;
  background: var(--cdv-bg-3);
  border-radius: var(--cdv-r) var(--cdv-r) 0 0;
}
/* AdminLTE pinta la cabecera del modal segun el bg-* : se apaga */
.skin-cdv .modal-header[class*="bg-"]{ background: var(--cdv-bg-3) !important; color: var(--cdv-txt) !important; }
.skin-cdv .modal-title{ font-size: 15px; font-weight: 640; }
.skin-cdv .modal-header .close{ color: var(--cdv-txt-3); opacity: 1; text-shadow: none; }
.skin-cdv .modal-header .close:hover{ color: var(--cdv-bad); }
.skin-cdv .modal-body{ padding: 20px; }
.skin-cdv .modal-footer{
  border-top: 1px solid var(--cdv-line);
  background: var(--cdv-bg-2);
  border-radius: 0 0 var(--cdv-r) var(--cdv-r);
}

/* sweetalert2 */
.skin-cdv .swal2-popup{
  background: var(--cdv-bg-2) !important;
  border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r) !important;
  color: var(--cdv-txt) !important;
}
.skin-cdv .swal2-title, .skin-cdv .swal2-content, .skin-cdv .swal2-html-container{ color: var(--cdv-txt) !important; }

/* =====================================================================
   11. LOGIN
   ===================================================================== */
body.login-page{
  background: var(--cdv-bg) !important;
  font-family: var(--cdv-font);
}
#back{
  filter: saturate(.75) brightness(.55);
}
.login-box{ width: 400px; margin-top: 6vh; }
.login-box .login-logo{ margin-bottom: 8px; }
.login-box-body{
  background: rgba(16,22,29,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--cdv-line-2);
  border-radius: 14px;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.95);
  color: var(--cdv-txt);
  padding: 26px 26px 22px;
}
.login-box-msg{
  color: var(--cdv-txt-3);
  font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase;
  font-weight: 650; padding: 0 0 18px;
}
.login-box .form-control{
  background: rgba(11,15,20,.75);
  border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r-sm);
  color: var(--cdv-txt);
  height: 42px;
}
.login-box .form-control:focus{
  border-color: var(--cdv-ac); box-shadow: 0 0 0 3px var(--cdv-ac-dim);
}
.login-box .form-control::placeholder{ color: var(--cdv-txt-3); }
.login-box .form-control-feedback{ color: var(--cdv-txt-3); line-height: 42px; }
.login-box .btn-primary{
  background: linear-gradient(180deg, var(--cdv-ac) 0%, var(--cdv-ac-2) 100%);
  border-color: var(--cdv-ac-2);
  color: #04222A; font-weight: 660; height: 42px; border-radius: var(--cdv-r-sm);
}
.login-box .row > .col-xs-4{ width: 100%; }

/* =====================================================================
   12. GRAFICOS
   ===================================================================== */
.skin-cdv .morris-hover{
  background: var(--cdv-bg-3) !important;
  border: 1px solid var(--cdv-line-2) !important;
  border-radius: var(--cdv-r-sm) !important;
  color: var(--cdv-txt) !important;
  box-shadow: var(--cdv-sh);
  padding: 9px 12px !important;
}
.skin-cdv .morris-hover .morris-hover-row-label{ color: var(--cdv-txt-3) !important; font-weight: 600; }
/* ejes y grilla de Morris (dibuja SVG con texto) */
.skin-cdv svg text{ fill: var(--cdv-txt-3); font-family: var(--cdv-font); font-size: 11px; }
.skin-cdv svg path[stroke="#eeeeee"],
.skin-cdv svg path[stroke="#aaaaaa"]{ stroke: var(--cdv-line) !important; }

/* =====================================================================
   13. VARIOS
   ===================================================================== */
.skin-cdv .callout{ background: var(--cdv-bg-3) !important; border-radius: var(--cdv-r); border-left-width: 3px; }
.skin-cdv .alert{ border-radius: var(--cdv-r-sm); border: 1px solid var(--cdv-line-2); background: var(--cdv-bg-3); color: var(--cdv-txt-2); }
.skin-cdv .pagination > li > a{ background: var(--cdv-bg-3); border-color: var(--cdv-line-2); color: var(--cdv-txt-2); }
.skin-cdv .pagination > .active > a{ background: var(--cdv-ac); border-color: var(--cdv-ac); color: #04222A; }
.skin-cdv .img-thumbnail{ background: var(--cdv-bg-3); border-color: var(--cdv-line-2); border-radius: 50%; }
.skin-cdv .main-footer{
  background: var(--cdv-bg-2); border-top: 1px solid var(--cdv-line); color: var(--cdv-txt-3);
}
.skin-cdv .dropzone{ background: var(--cdv-bg-3); border: 2px dashed var(--cdv-line-2); border-radius: var(--cdv-r); }
.skin-cdv .dropzone .dz-message{ color: var(--cdv-txt-3); }
.skin-cdv .nav-tabs{ border-bottom-color: var(--cdv-line); }
.skin-cdv .nav-tabs > li > a{ color: var(--cdv-txt-3); border: 0; }
.skin-cdv .nav-tabs > li.active > a{
  background: transparent; color: var(--cdv-ac);
  border: 0; border-bottom: 2px solid var(--cdv-ac);
}
.skin-cdv .text-muted{ color: var(--cdv-txt-3) !important; }
.skin-cdv .well{ background: var(--cdv-bg-3); border-color: var(--cdv-line-2); box-shadow: none; }
.skin-cdv .close{ color: var(--cdv-txt-3); text-shadow: none; opacity: .8; }

/* impresion: se vuelve a claro para no gastar tinta */
@media print{
  body.skin-cdv, .skin-cdv .content-wrapper, .skin-cdv .box{ background: #fff !important; color: #000 !important; }
  .skin-cdv .main-sidebar, .skin-cdv .main-header{ display: none !important; }
}

/* =====================================================================
   14. MAPA DEL PDV (detalle del ticket)
   El iframe de Google viene en claro. El filtro lo pasa a oscuro para que
   no queme la vista dentro del tema: es un truco de CSS, no un mapa
   oscuro de verdad, asi que se deja suave para que siga siendo legible.
   ===================================================================== */
.skin-cdv .cdv-mapa{
  border: 1px solid var(--cdv-line-2);
  border-radius: var(--cdv-r);
  overflow: hidden;
  background: var(--cdv-bg-3);
  line-height: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.skin-cdv .cdv-mapa iframe{
  display: block;
}
.skin-cdv .cdv-mapa-pie{
  color: var(--cdv-txt-3);
  font-size: 12px;
  margin: 8px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.skin-cdv .cdv-mapa-pie .cdv-coord{
  font-family: var(--cdv-mono);
  background: var(--cdv-bg-3);
  border: 1px solid var(--cdv-line);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--cdv-txt-2);
}
.skin-cdv .cdv-mapa-pie a{ margin-left: auto; }