/* assets/style.css */

/* General (modo oscuro) */
body,
#login-screen,
#admin-screen,
#vendor-screen {
background-color: #000 !important;
color: #fff !important;
}

/* Contenedores transparentes */
.container {
background-color: transparent !important;
}

/* Ocultar/mostrar secciones */
.hidden {
display: none !important;
}
.section {
margin-top: 1rem;
}

/* Form controls en modo oscuro */
.form-control {
background: #222 !important;
color: #fff !important;
border: 1px solid #444 !important;
}
.form-control::placeholder {
color: #bbb !important;
}

/* Labels */
.form-label {
color: #ddd !important;
font-weight: bold;
}

/* Tablas en modo oscuro */
.table-dark {
background-color: #111 !important;
}
.table-dark th,
.table-dark td {
color: #fff !important;
border-color: #333 !important;
}

/* Botones generales /
.btn {
text-transform: uppercase;
color: #fff !important;
}
/ Texto negro en botones Editar */
.btn-warning {
color: #000 !important;
}

/* Menú Compartido (Admin y Vendor) */
#admin-screen #main-menu,
#vendor-screen #main-menu {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0;
gap: 0.75rem;
}
#admin-screen #main-menu .btn:not(.btn-danger),
#admin-screen #main-menu a.btn:not(.btn-danger),
#vendor-screen #main-menu .btn:not(.btn-danger),
#vendor-screen #main-menu a.btn:not(.btn-danger) {
background-color: #fff !important;
color: #000 !important;
border: 1px solid #fff;
width: 100%;
max-width: 200px;
padding: 0.75rem !important;
font-size: 1.1rem !important;
border-radius: 0.5rem !important;
}
#admin-screen #main-menu a.btn.btn-danger,
#vendor-screen #main-menu a.btn.btn-danger {
background-color: #e63946 !important;
color: #fff !important;
border: 1px solid #fff;
width: 100%;
max-width: 200px;
padding: 0.75rem !important;
font-size: 1.1rem !important;
border-radius: 0.5rem !important;
}
#admin-screen #main-menu .btn:hover,
#admin-screen #main-menu a.btn:hover,
#vendor-screen #main-menu .btn:hover,
#vendor-screen #main-menu a.btn:hover {
background-color: #ddd !important;
}
#admin-screen #main-menu a.btn.btn-danger:hover,
#vendor-screen #main-menu a.btn.btn-danger:hover {
background-color: #c5303e !important;
}

/* Separador entre filas */
.separator {
border: 0;
height: 1px;
background: #444;
margin: 0.5rem 0;
}
.separator-row td {
padding: 0;
}

/* Lista Crear Canasta: filas alternadas */
#product-list-create .list-group-item {
background-color: #111 !important;
color: #fff !important;
border: none !important;
}
#product-list-create .list-group-item:nth-child(even) {
background-color: #222 !important;
}
#product-list-create .list-group-item + .list-group-item {
margin-top: 0.25rem;
padding: 0.75rem 1rem;
}

/* Precios clicables */
.price-cell {
color: #fff !important;
font-weight: bold !important;
text-decoration: none !important;
cursor: pointer !important;
}

/* Nombres clicables */
.canasta-name {
color: #fff !important;
font-weight: bold !important;
cursor: pointer !important;
text-decoration: underline !important;
}

/* Sobrescribir text-primary */
.text-primary {
color: #fff !important;
}

/* Modal encima de todo */
.modal {
z-index: 2000 !important;
}

/* Pre dentro del modal de composición */
#compositionBody {
background: transparent !important;
color: #fff !important;
padding: 1rem;
}
/* Lista de selección oscura */
.list-group-item-dark {
  background-color: #111 !important;
  color: #fff !important;
  border-color: #333 !important;
}
.list-group-item-dark .btn-light {
  background-color: #fff !important;
  color: #000 !important;
}
/* Cotizador: recuadro de resumen */
#cot-summary-box {
  background: #111;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  color: #fff;
}
/* Cotizador: resumen flotante compacto */
#cot-summary-box {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 180px;                  /* más pequeño */
  background: rgba(17,17,17,0.95);
  border: 1px solid #fff;        /* borde blanco */
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
  padding: 0.75rem;
  color: #fff;
  font-size: 0.85rem;
  z-index: 1050;                 /* encima de todo */
}

/* Ajustes de texto */
#cot-summary-box strong {
  display: inline-block;
  width: 60px;
}