/* ==============================
   VARIABLES DE MARCA
   ============================== */
:root {
  --azul-principal: #0d47a1;
  --azul-acento: #00B5E2;      /* Acento */
  --azul-secundario: #0056b3;  /* Tonalidad secundaria */
  --gris-texto: #6c757d;
  --gris-suave: #F5F7FA;
}

/* ==============================
   BASE GENERAL
   ============================== */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: var(--gris-suave);
  color: #333;
  margin: 0;
  padding: 0;
}

.container.marco-deco,
#marco {
  max-width: 95%;
  margin: 40px auto 20px auto;
  padding: 20px 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* ==============================
   TITULOS
   ============================== */

.titulo-deco {
  color: var(--azul-principal);
  border-bottom: 2px solid var(--azul-principal);
  padding-bottom: 10px;
  text-align: left;
  margin-bottom: 24px;
}

.subtitulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0d47a1;
  margin-bottom: 20px;
  text-align: center;
}

/* ==============================
   BOTONES
   ============================== */

.btn-deco,
.btn-marca,
.btn-deco:hover,
.btn-marca:hover {
  background-color: var(--azul-acento);
}

.btn-first {
  border-radius: 4px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.5px;
  background: #5dade2;
  color: #fff; 
  border: none;
  box-shadow: none;
  text-transform: uppercase;
  margin-right: 10px;
  text-decoration: none;
  text-align: center;
  z-index: 99;
}

.btn-first:hover {
  background: #4aa3d6;
}

#busq {
  width: 100%;
  position: fixed;
  z-index: 10;
  text-align: left;
  font-weight: bold;
  padding-left: 20%;
}

.borderBoton {
  border: 2px solid #dc3545;
}

/* ==============================
   SELECTS / CAJAS
   ============================== */

select.cajas-2,
.cajas-21,
.form-select.form-select-sm.text-marca {
  width: 100%;
  max-width: 220px;
  font-size: 13px;
  font-weight: bold;
  color: var(--azul-principal);
  padding: 8px 36px 8px 12px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Icono caret (flecha) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23005B82' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592c.86 0 1.319 1.013.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

select.cajas-2:focus,
.cajas-21:focus,
.form-select.form-select-sm.text-marca:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 5px rgba(0, 91, 130, 0.3);
  outline: none;
}

.cajas-21 option,
.form-select.form-select-sm.text-marca option {
  font-size: 13px;
  padding: 6px 10px;
}

/* ==============================
   TABLAS Y CELDAS
   ============================== */

table th, .dataTable th {
    background: #cfe2ff !important;
    border-color: #a6b5cc;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left !important;
    letter-spacing: 1px;
}

.tabla-informe {
  margin-bottom: 17px;
}

.tabla-informe tr {
  display: table-row;
}

.tabla-informe td {
  display: table-cell;
  vertical-align: top;
}

.table-responsive::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #fff;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #5dade2;
  border-radius: 6px;
}

/*
td {
  color: rgb(0,94,153);
  font-weight: bold;
  text-align: center;
  width: 15%;
  vertical-align: top;
}

td[width="54"] div {
  text-align: left;
}

td[width="134"] div,
td[width="94"] div {
  text-align: right;
}

td.identificacion {
  border-top: 1px solid #ccc;
  padding: 5px 0;
  font-size: 9px;
}

.td-total {
  border-top: 1px solid #000;
  padding-top: 5px;
  text-align: right;
  vertical-align: top;
}

.td-bottom {
  vertical-align: bottom;
}
*/
/* ==============================
   INPUTS
   ============================== */

.input-total {
  font-weight: bold;
}

.input-xs { font-size: 9px; }
.input-sm { font-size: 10px; }
.input-editable { text-align: right; color: #4d4d4d; }
.text-gray { color: #4d4d4d; }

/* ==============================
   UTILS
   ============================== */

.text-small-left { font-size: 9px; float: left; }
.float-right { float: right; }
.text-right { text-align: right; }
.cell-light { border: 1px solid #e0e0e0; padding: 8px; background-color: #f8f9fa; }
.cell-white { border: 1px solid #fff; }
.th-title { font-weight: bold; text-align: center; }

/* ==============================
   CONTENEDORES ESPECIALES
   ============================== */

.opciones-facturar {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.box-facturar {
  flex: 1;
  padding: 15px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

.box-facturar h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #495057;
  font-size: 14px;
}

.box-facturar label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  font-size: 13px;
}

.box-warning {
  flex: 1;
  padding: 15px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 6px;
  display: flex;
  align-items: center;
  color: #856404;
  font-size: 13px;
}

.box-warning i {
  margin-right: 8px;
  font-size: 14px;
}

/* ==============================
   MENSAJES
   ============================== */

.mensaje-continuar {
  color: #990000;
  margin-top: 15px;
  font-size: 14px;
  font-style: italic;
}

/* ==== libreria jquery autocomplete ==== */

 .ac_results {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: white;
  overflow: hidden;
  z-index: 99;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  padding: 0px;
}

.ac_results ul {
  width: 100%;
  list-style-position: outside;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ac_results li {
  cursor: pointer;
  display: block;
  font: menu;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  margin: 0px;
  padding: 0.5rem 1rem;
}

.ac_results li:hover {
  background: var(--azul-secundario);
  color: #fff;
}

.ac_results li.ac_over {
  background: var(--azul-secundario);
  color: #fff;
}

/* ==== textos ==== */

.text-xs {
  font-size: 12px;
}

/* ==== dimensiones ==== */

.w-29 {
  width: 29% !important;
}

.w-13 {
  width: 13% !important;
}

/* ==== margenes ==== */

.mx-8 {
  margin-left: 80px;
  margin-right: 80px;
}

.my-9 {
  margin: 89px 0px;
}

.m-12 {
  margin: 23px;
}

.mt-n2 {
  margin-top: -7px;
}

/* ==== ubicaciones ==== */

.top-28 {
  top: 28%;
}

.movimiento-fila:hover {
    background-color: #f8f9fa;
}
.cuenta-input, .tercero-input {
    min-width: 120px;
}
.valor-input, .base-input, .iva-input {
    min-width: 100px;
}
.detalle-input {
    min-width: 150px;
}

/* ==============================
  FOOTER
  ============================== */

.footer {
  background: #f4f4f9;
  padding: 25px 15px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  text-align: center;
  border-top: 2px solid #ccc;
}

.footer p {
  margin: 5px 0;
  font-size: 15px;
  color: #555;
}

.footer a {
  color: #005e99;
  text-decoration: none;
  font-weight: bold;
}

.footer a:hover {
  text-decoration: underline;
}

/*=============================================
ESCRITORIO GRANDE (LG)
=============================================*/

@media (min-width: 1200px) {



}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD)
=============================================*/

@media (max-width: 1199px) and (min-width: 992px) {



}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM)
=============================================*/

@media (max-width: 991px) and (min-width: 769px) {



}

/*=============================================
MOVIL
=============================================*/

@media (max-width: 768px) {

  .titulo-deco {
    text-align: center;
  }

  .tabla-movimientos {
    width: 470%;
  }

  .tabla-informe td {
    display: block;
    width: 100% !important;
    margin-bottom: 17px;
  }

  .tabla-informe img{
    width: 100%;
  }

  .top-28 {
    top: 0px;
  }

  .w-29 {
    width: 38% !important;
    margin: 12px 0px;
  }

  .w-25 {
    width: 100% !important;
  }

  .w-13 {
    width: 17% !important;
    margin: 12px 0px;
  }

  .mx-8 {
    margin: auto;
    margin-top: 17px;
    margin-bottom: 17px;
  }

}