/* =========================================================
   Estilos Clínica – Ordenado y legible
   ---------------------------------------------------------
   - Base / Reset
   - Layout & Contenedores
   - Navbar & Branding
   - Botones & Acciones
   - Formularios
   - Tablas (Inventario/Reportes)
   - Utilidades / Responsivo / Impresión
   ======================================================= */

/* ========== Variables personalizables ========== */
:root {
  --thumb-width: 80px;   /* Cambia aquí el ancho de las imágenes de la tabla */
  --thumb-height: 80px;  /* Cambia aquí el alto de las imágenes de la tabla */
  --logo-height: 60px;    /* Cambia aquí el alto del logo */
  /* --bg-image-url se define en lib/head.php como URL absoluta */
  /* dejar vacío aquí para evitar sintaxis inválida */
}

/* ========== Base / Reset ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  /* El fondo se aplica desde lib/head.php mediante la variable --bg-image-url */
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  color: #212529;
  line-height: 1.5;
}
/* Capa de color sutil sobre la imagen de fondo para mejorar contraste.
   Ajustada menos opaca para que el fondo sea más visible (se veía muy oscuro). */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(0, 51, 102, 0.36), rgba(0, 51, 102, 0.36));
  pointer-events: none;
  z-index: 0;
}

/* ========== Layout & Contenedores ========== */
main{
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Override Bootstrap .container for custom styling if needed */
.custom-container{
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  overflow-x: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
}
.custom-container:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn, .btn-primary, .btn-secondary, .btn-danger {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background-color: #0056b3;
  border-color: #004494;
  color: #fff;
}

.btn-primary:hover {
  background-color: #003d80;
  border-color: #002d5c;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #5a6268;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #545b62;
  border-color: #4e555b;
  color: #fff;
}

.btn-danger {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;
}

.btn-danger:hover {
  background-color: #a71d2a;
  border-color: #991b24;
  color: #fff;
}

.nueva-venta {
  background: rgba(255, 255, 255, 0.4);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
}
.nueva-venta:hover {
  background: rgba(255, 255, 255, 0.6);
}

.nueva-venta .card {
  max-width: 980px;
  margin: auto;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
}
.nueva-venta .card:hover {
  background: rgba(255, 255, 255, 0.6);
}

.btn {
  font-weight: 600;
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #003366;
}

p, label, input, select, textarea {
  font-weight: 400;
  color: #212529;
}

footer{ 
  padding: 1rem; 
  text-align: center; 
  color: #6c757d; 
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ========== Navbar & Branding ========== */
/* Using Bootstrap navbar, custom overrides if needed */
.navbar-brand .logo {
  height: var(--logo-height);
  width: auto;
  object-fit: contain;
}

/* NAVBAR: semitransparente + blur para que se vea bien sobre el fondo */
.navbar.navbar-dark {
  background: rgba(16, 24, 40, 0.55); /* color oscuro semitransparente */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.navbar .navbar-nav .nav-link { color: rgba(255,255,255,0.9); }
.navbar .navbar-brand .logo { max-height: 56px; }

/* Estilo para las tarjetas principales en el panel de control */
.home-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
.home-panels .panel-card {
  padding: 1.25rem;
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px rgba(9,30,66,0.12);
  background: rgba(255,255,255,0.95);
  transition: transform 160ms ease, box-shadow 160ms ease;
  display: flex; flex-direction: column; justify-content: space-between;
}
.home-panels .panel-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(9,30,66,0.16); }
.home-panels .panel-card .card-actions { margin-top: 1rem; }

@media (max-width: 1024px) { .home-panels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .home-panels { grid-template-columns: 1fr; } }

/* ========== Botones & Acciones ========== */
/* Custom button styles if needed, Bootstrap handles most */
.actions{ display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ========== Formularios ========== */
/* Bootstrap handles forms, custom overrides */
.form-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  align-items: center;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.actions.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
.alert-custom {
  padding: 0.75rem 1rem;
  border: 1px solid #ffc107;
  background: rgba(255, 243, 205, 0.85);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

/* ========== Tablas ========== */
/* Bootstrap handles tables, custom styles */
img.thumb{
  width: var(--thumb-width);
  height: var(--thumb-height);
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  display: block;
}
td.desc{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  max-height: 3.2em;
}

/* ========== Footer ========== */
footer{ 
  padding: 1rem; 
  text-align: center; 
  color: white; 
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ========== Impresión ========== */
.print-only{ display: none; }
@media print{
  .navbar, .no-print{ display: none; }
  .print-only{ display: block; }
  body{ background: #fff; }
}

/* ========== Responsivo ========== */
@media (max-width: 1024px){
  main{ padding: 1rem; }
  .navbar-brand .logo{ height: calc(var(--logo-height) * 0.8); }
  img.thumb{ width: calc(var(--thumb-width) * 1.2); height: calc(var(--thumb-height) * 1.0); }
}
@media (max-width: 768px){
  main{ padding: 0.5rem; }
  .navbar-brand .logo{ height: calc(var(--logo-height) * 0.6); }
  img.thumb{ width: calc(var(--thumb-width) * 0.8); height: calc(var(--thumb-height) * 0.8); }
  td.desc{ -webkit-line-clamp: 1; line-clamp: 1; max-height: 1.6em; }
}


/* Variantes de botones */
.btn.secondary{
  background:#f0f3ff;
  color:#1677ff;
  border-color:#c9d6ff;
}
.btn.danger{
  background:#ffeaea;
  color:#b10000;
  border-color:#ffb3b3;
}

/* ========== Vista Nueva Venta ========== */
.nueva-venta {
  background: rgba(255, 255, 255, 0.85);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.nueva-venta .card {
  max-width: 980px;
  margin: auto;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.nueva-venta .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.nueva-venta .row-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.nueva-venta .toolbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.625rem 0;
}
.nueva-venta .items .container {
  padding: 0.75rem;
  border: 1px dashed #dee2e6;
  border-radius: 0.5rem;
  margin: 0.625rem 0;
}
.nueva-venta .form-grid {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 1fr 1fr 0.7fr;
  gap: 0.625rem;
  align-items: end;
}
.nueva-venta .right {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.nueva-venta .total-box {
  font-size: 1.125rem;
  font-weight: 700;
}
.nueva-venta .muted { color: #6c757d; }

@media (max-width: 900px) {
  .nueva-venta .form-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .nueva-venta .form-grid .actions { grid-column: 1 / -1; }
}



/* =========================================================
   BOOTSTRAP-BLENDED BACKGROUND — minimal override
   Objetivo: que el fondo combine con la paleta Bootstrap
   Mantiene la imagen /img/fondo.png y usa --bs-primary-rgb
   ========================================================= */

/* Fallback por si no existiera la var de Bootstrap */
:root {
  --bs-primary-rgb: 13, 110, 253;   /* azul Bootstrap 5 */
  --bs-dark-rgb: 33, 37, 41;
}

/* Fondo con imagen + degradado usando el primary de Bootstrap */
body {
  /* usar la variable --bg-image-url definida en head.php */
  background: var(--bg-image-url) no-repeat center center fixed;
  background-size: cover;
}

/* Capa de color ajustada al primary de Bootstrap (mezcla suave) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Gradiente superior e inferior con el mismo tono primary */
  background:
    radial-gradient(1200px 600px at 15% -10%,
      rgba(var(--bs-primary-rgb), .18),
      rgba(var(--bs-primary-rgb), 0) 60%),
    radial-gradient(1000px 500px at 110% 0%,
      rgba(var(--bs-primary-rgb), .14),
      rgba(var(--bs-primary-rgb), 0) 55%),
    linear-gradient(180deg,
      rgba(var(--bs-primary-rgb), .55) 0%,
      rgba(var(--bs-primary-rgb), .35) 40%,
      rgba(var(--bs-dark-rgb), .25) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Afinar contenedores para que “asienten” mejor sobre el fondo */
.custom-container,
.nueva-venta,
.nueva-venta .card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
  .custom-container,
  .nueva-venta,
  .nueva-venta .card {
    background: rgba(33, 37, 41, .78);
    border-color: rgba(255,255,255,.15);
  }
  body::before {
    background:
      radial-gradient(1200px 600px at 15% -10%,
        rgba(var(--bs-primary-rgb), .22),
        rgba(var(--bs-primary-rgb), 0) 60%),
      radial-gradient(1000px 500px at 110% 0%,
        rgba(var(--bs-primary-rgb), .18),
        rgba(var(--bs-primary-rgb), 0) 55%),
      linear-gradient(180deg,
        rgba(var(--bs-primary-rgb), .52) 0%,
        rgba(var(--bs-primary-rgb), .32) 40%,
        rgba(var(--bs-dark-rgb), .45) 100%);
  }
}




/* =========================================================
   CLEAN BOOTSTRAP GRADIENT + STRIP REMOVAL
   Objetivo: Fondo que combine con Bootstrap y eliminar franja blanca
   ========================================================= */

/* 1) Anular capa previa y usar un solo gradiente limpio */
body::before { background: none !important; }

/* Gradiente limpio sobre la imagen, usando el primary de Bootstrap */
:root{
  --bs-primary-rgb: 13,110,253;
  --bs-dark-rgb: 33,37,41;
}
body{
  background:
    linear-gradient(160deg,
      rgba(var(--bs-primary-rgb),0.85) 0%,
      rgba(var(--bs-primary-rgb),0.65) 40%,
      rgba(255,255,255,0.08) 100%),
    var(--bg-image-url) no-repeat center center fixed !important;
  background-size: cover !important;
}

/* 2) Contenedores más uniformes sobre el fondo */
.custom-container,
.panel-card,
.nueva-venta,
.nueva-venta .card{
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 3) Eliminar franja/blanco/separador de ancho completo */
hr, .hr, .divider, .separator, .separador, .strip, .band, .franja, .full-width-strip{
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Casos frecuentes de banda clara a nivel de body */
body > .bg-light, body > .bg-white, body > .container-fluid.bg-light {
  background: transparent !important;
  border: 0 !important;
}

/* 4) Dark mode */
@media (prefers-color-scheme: dark){
  body{
    background:
      linear-gradient(160deg,
        rgba(var(--bs-dark-rgb),0.95) 0%,
        rgba(var(--bs-dark-rgb),0.85) 50%,
        rgba(var(--bs-primary-rgb),0.25) 100%),
      var(--bg-image-url) no-repeat center center fixed !important;
    background-size: cover !important;
  }
  .custom-container,
  .panel-card,
  .nueva-venta,
  .nueva-venta .card{
    background: rgba(33,37,41,0.9);
    border-color: rgba(255,255,255,0.1);
  }
}




/* =========================================================
   RESPETA FONDO ORIGINAL (fondo.png) + Combina con Bootstrap
   - No se reemplaza ni lava la imagen.
   - Se eliminan overlays previos (body::before).
   - Se mejora legibilidad de cajas sin opacar el fondo.
   ========================================================= */

/* 0) Variables Bootstrap (fallback por si no existen) */
:root{
  --bs-primary-rgb: 13,110,253;
  --bs-dark-rgb: 33,37,41;
}

/* 1) Fondo: solo imagen original */
body{
  background: var(--bg-image-url) no-repeat center center fixed !important;
  background-size: cover !important;
}

/* 2) Quitar cualquier capa de color previa */
body::before{
  background: transparent !important;
}

/* 3) Cajas sobre el fondo: legibles pero livianas */
.custom-container,
.panel-card,
.nueva-venta,
.nueva-venta .card{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* 4) Bordes de tablas y encabezados suavizados para que "combinen" */
.table > :not(caption) > * > *{
  border-color: rgba(0,0,0,0.06) !important;
}
h1,h2,h3,h4,h5,h6{
  color: #0d3b8e; /* azul oscuro compatible con Bootstrap y tu fondo */
}

/* 5) Eliminar posibles franjas/bandas claras */
hr, .hr, .divider, .separator, .separador, .strip, .band, .franja, .full-width-strip{
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body > .bg-light, body > .bg-white, body > .container-fluid.bg-light{
  background: transparent !important;
}

/* 6) Dark mode (sin tocar fondo) */
@media (prefers-color-scheme: dark){
  .custom-container,
  .panel-card,
  .nueva-venta,
  .nueva-venta .card{
    background: rgba(33,37,41,0.88) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
  }
  h1,h2,h3,h4,h5,h6{ color: #cfe1ff; }
}




/* =========================================================
   NUEVA VENTA — Caja clara y coherente con Bootstrap
   ========================================================= */
.nueva-venta,
.nueva-venta .card {
  background: rgba(255,255,255,0.96) !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
  color: #212529 !important;
}

/* Encabezados del formulario */
.nueva-venta h1,
.nueva-venta h2,
.nueva-venta h3 {
  color: #0d6efd !important;
  font-weight: 700;
}

/* Inputs y selects */
.nueva-venta input,
.nueva-venta select,
.nueva-venta textarea {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem !important;
  color: #212529 !important;
}

/* Botonera secundaria */
.nueva-venta .btn.secondary {
  background:#f0f3ff !important;
  color:#1677ff !important;
  border-color:#c9d6ff !important;
}

/* Caja del total destacada */
.venta-total-box {
  background: linear-gradient(135deg, #e7f1ff, #f8fbff) !important;
  color: #0d3b8e !important;
  font-weight: 700 !important;
  padding: .6rem 1rem !important;
  border-radius: .75rem !important;
  border: 1px solid rgba(13,110,253,0.15) !important;
  box-shadow: 0 4px 10px rgba(13,110,253,0.1) !important;
}




/* ======= NUEVA VENTA: tarjeta única sin borde externo ======= */
.nueva-venta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ÚNICA tarjeta visible */
.nueva-venta > .card {
  background: rgba(255,255,255,0.96) !important;
  color: #212529 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
  margin: 0 auto !important;
  padding: 1.5rem !important;
}

/* Encabezados */
.nueva-venta > .card h1,
.nueva-venta > .card h2,
.nueva-venta > .card h3 {
  color: #0d6efd !important;
  font-weight: 700;
}

/* Inputs y selects */
.nueva-venta > .card input,
.nueva-venta > .card select,
.nueva-venta > .card textarea {
  background: #fff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem !important;
  color: #212529 !important;
}

/* Caja del total */
.venta-total-box {
  background: linear-gradient(135deg, #e7f1ff, #f8fbff) !important;
  color: #0d3b8e !important;
  font-weight: 700 !important;
  padding: .6rem 1rem !important;
  border-radius: .75rem !important;
  border: 1px solid rgba(13,110,253,0.15) !important;
  box-shadow: 0 4px 10px rgba(13,110,253,0.1) !important;
}




/* =========================================================
   EDITAR FORMULARIOS — Legibilidad unificada
   Aplica a editar producto / servicio
   ========================================================= */
.editar-form .card,
.editar-form .form-container {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important;
  padding: 1.5rem !important;
}

/* Campos */
.editar-form input,
.editar-form select,
.editar-form textarea {
  background: #ffffff !important;
  border: 1px solid #ced4da !important;
  border-radius: .5rem !important;
  color: #212529 !important;
  font-size: 0.95rem !important;
}

/* Labels */
.editar-form label {
  font-weight: 600 !important;
  color: #212529 !important;
}

/* Header */
.editar-form h1,
.editar-form h2,
.editar-form h3 {
  color: #0d6efd !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

/* Botonera coherente */
.editar-form .btn-secondary {
  background: #f1f4ff !important;
  color: #0d6efd !important;
  border-color: #cdd8ff !important;
}

/* Panel background for edit pages */
.panel-background {
  background: linear-gradient(135deg, #e7f1ff, #f8fbff) !important;
}




/* =========================================================
   EDITAR: encabezados legibles (azul Bootstrap)
   ========================================================= */
.editar-form h1,
.editar-form h2,
.editar-form h3,
h1.page-title,
h2.page-title,
h3.page-title {
  color: #0d6efd !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

/* Custom style for operator names in select dropdown on Nueva venta page */
.nueva-venta .card select[name="operador"] option {
  color: #0d6efd !important;
}

/* Custom style for Operadores page heading */
.operadores-title {
  color: #0d6efd !important;
  font-weight: 700;
}

/* Custom style for active toggle switches */
.form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* === OVERRIDE DURO 2025-10-14 — fuerza a que no haya overflow === */
.nueva-venta .items > .item-box{ 
  padding: .75rem; border: 1px dashed #dee2e6; border-radius: .5rem; margin: .625rem 0;
  box-sizing: border-box; overflow: hidden; min-width: 0;
}
.nueva-venta .items > .item-box > .form-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 6rem 7rem 7rem 5.5rem !important;
  gap: .75rem !important;
  align-items: end !important;
  min-width: 0 !important;
}
.nueva-venta .items > .item-box > .form-grid > *{ min-width: 0 !important; }
.nueva-venta .items > .item-box select,
.nueva-venta .items > .item-box input{ width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.nueva-venta .items > .item-box .sub{ text-align: right !important; }
.nueva-venta .items > .item-box .actions{ justify-self: end !important; }
.nueva-venta .items > .item-box .actions .btn{
  padding: .35rem .55rem !important; font-size: .875rem !important; line-height: 1.1 !important; white-space: nowrap !important;
}
@media (max-width: 1200px){
  .nueva-venta .items > .item-box > .form-grid{
    grid-template-columns: minmax(0,1fr) 5.5rem 6.5rem 6.5rem 5rem !important;
  }
}
@media (max-width: 992px){
  .nueva-venta .items > .item-box > .form-grid{ grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 576px){
  .nueva-venta .items > .item-box > .form-grid{ grid-template-columns: 1fr !important; }
}