:root{
  --v-bg:#0b0f19;          /* page background */
  --v-surface:#0f141e;     /* surface */
  --v-card:#111827;        /* cards/navbar */
  --v-border:#344155;      /* borders (lighter for visibility) */
  --v-primary:#ff7a00;     /* accent orange */
  --v-primary-600:#ff8c1a; /* hover/active */
  --v-text:#f3f4f6;        /* main text (brighter) */
  --v-muted:#cbd5e1;       /* muted text (brighter) */
}

html,body{ height:100%; }
body { background-color: var(--v-bg); color: var(--v-text); }

/* Headings & general text */
h1,h2,h3,h4,h5,h6{ color:#f8fafc; }

/* Navbar */
.navbar{
  background: linear-gradient(90deg, var(--v-card), rgba(255,122,0,0.08));
  border-bottom: 1px solid var(--v-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-text{
  color: var(--v-text) !important;
}

/* Cards */
.card{
  background-color: var(--v-card);
  border-color: var(--v-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Tables */
.table{ color: var(--v-text); }
.table thead th{
  color: var(--v-text);
  border-bottom: 1px solid var(--v-border);
}
.table tbody tr:nth-of-type(odd){
  background-color: #0d1322; /* subtle stripe for readability */
}

/* Buttons (base) */
.btn-primary{
  background-color: var(--v-primary);
  border-color: var(--v-primary);
  color: #0b0f19; /* strong contrast on orange */
}
.btn-primary:hover,.btn-primary:focus{
  background-color: var(--v-primary-600);
  border-color: var(--v-primary-600);
}
.btn-outline-primary{
  color: var(--v-primary);
  border-color: var(--v-primary);
  border-width: 2px;
}
.btn-outline-primary:hover{ background: var(--v-primary); color:#0b0f19; }

/* NUEVO: colores para Edit (amber) y Delete (red) */
.btn-warning{
  background-color:#f59e0b !important;
  border-color:#f59e0b !important;
  color:#0b0f19 !important;
}
.btn-warning:hover,.btn-warning:focus{
  background-color:#fbbf24 !important;
  border-color:#fbbf24 !important;
  color:#0b0f19 !important;
}
.btn-danger{
  background-color:#ef4444 !important;
  border-color:#ef4444 !important;
  color:#ffffff !important;
}
.btn-danger:hover,.btn-danger:focus{
  background-color:#f87171 !important;
  border-color:#f87171 !important;
  color:#ffffff !important;
}

/* Forms */
.form-label{ color: var(--v-text); }
.form-text{ color: var(--v-muted); }

.form-control, .form-select{
  background: #0b1017;
  border: 1px solid var(--v-border);
  color: var(--v-text) !important;
}
.form-control:focus, .form-select:focus{
  border-color: var(--v-primary);
  box-shadow: 0 0 0 .2rem rgba(255,122,0,.18);
}

/* Placeholders (make them readable) */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.8);
  opacity: 1;
}
::-webkit-input-placeholder{ color: rgba(255,255,255,.8); }
:-ms-input-placeholder{ color: rgba(255,255,255,.8); }
::-ms-input-placeholder{ color: rgba(255,255,255,.8); }

/* DataTables controls */
.dataTables_filter label,
.dataTables_length label{ color: var(--v-text); }

.dataTables_filter input, .dataTables_length select{
  background: #0b1017;
  border: 1px solid var(--v-border);
  color: var(--v-text);
}
.dataTables_paginate .page-link{
  background: #0b1017;
  border-color: var(--v-border);
  color: var(--v-text);
}
.dataTables_paginate .page-item.active .page-link{
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: #0b0f19;
}

/* Links */
a { color: var(--v-primary); }
a:hover { color: var(--v-primary-600); }

/* High-contrast titles on dark cards */
.card-title,
.modal-title{
  color: #ffffff !important;     /* crisp white */
  font-weight: 700;              /* bolder */
  letter-spacing: .2px;          /* slight spacing */
}

/* Force dark inputs while typing and on autofill */
.form-control,
.form-select{
  background: #0b1017 !important;
  color: #ffffff !important;
  caret-color: #ffffff;
  font-weight: 500; /* slightly bolder for readability */
}
.form-control:focus,
.form-select:focus{
  background: #0b1017 !important;
  color: #ffffff !important;
}

/* Keep dark background when Bootstrap marks valid/invalid */
.form-control.is-valid,
.form-control.is-invalid{
  background: #0b1017 !important;
  color: #ffffff !important;
}

/* Override Chrome/Safari autofill (yellow/white bg) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #0b1017 inset !important;
          box-shadow: 0 0 0px 1000px #0b1017 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ==== DataTables dark overrides (force readability) ==== */
.table,
.table thead,
.table tbody,
.table tfoot,
.table tr,
.table td,
.table th{
  background-color: #0f141e !important;  /* body cells */
  color: #f3f4f6 !important;              /* text */
  border-color: #2a3446 !important;       /* borders */
}

/* Header contrast */
.table thead th{
  background-color: #1b2333 !important;
  color: #ffffff !important;
  font-weight: 700;
}

/* Zebra striping & hover */
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color: #121a28 !important;
}
.table-hover>tbody>tr:hover>*{
  background-color: #182235 !important;
}

/* "No data available" row */
.dataTables_empty{
  color: #cbd5e1 !important;
  background-color: #0f141e !important;
}

/* DataTables search/length labels */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label{
  color: #f3f4f6 !important;
}

/* DataTables inputs in toolbar */
.dataTables_filter input,
.dataTables_length select{
  background: #0b1017 !important;
  border: 1px solid #344155 !important;
  color: #ffffff !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background: #0b1017 !important;
  border: 1px solid #2a3446 !important;
  color: #f3f4f6 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--v-primary) !important;
  border-color: var(--v-primary) !important;
  color: #0b0f19 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: #182235 !important;
  border-color: #3a4660 !important;
  color: #ffffff !important;
}

/* Keep header icons (sort arrows) visible */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{
  background-image: none !important; /* remove light sprite */
  position: relative;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after{
  content: '▾';
  opacity: .6;
  margin-left: .35rem;
  font-size: .8rem;
}
table.dataTable thead th.sorting_asc:after{
  content: '▴';
  opacity: .9;
}
table.dataTable thead th.sorting_desc:after{
  content: '▾';
  opacity: .9;
}
/* DataTables "info" text (e.g., "Showing X to Y of Z entries") */
.dataTables_wrapper .dataTables_info{
  color: #f3f4f6 !important;   /* bright text */
}

/* (refuerzo opcional) colores de toolbars y paginación */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_paginate{
  color: #f3f4f6 !important;
}

/* ==== Dark modal for Virtalus CRM ==== */
.modal-content{
  background-color: var(--v-card) !important;
  color: var(--v-text) !important;
  border: 1px solid var(--v-border) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.modal-header,
.modal-footer{
  background-color: var(--v-surface) !important;
  border-color: var(--v-border) !important;
}
.modal-title{
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Close button visible on dark */
.btn-close{
  filter: invert(1) grayscale(100%);
  opacity: .9;
}
.btn-close:hover{ opacity: 1; }

/* Forms inside the modal */
.modal .form-label{ color: var(--v-text) !important; }
.modal .form-text{ color: var(--v-muted) !important; }

.modal .form-control,
.modal .form-select{
  background: #0b1017 !important;
  border: 1px solid var(--v-border) !important;
  color: #ffffff !important;
  caret-color: #ffffff;
  font-weight: 500;
}
.modal .form-control:focus,
.modal .form-select:focus{
  border-color: var(--v-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(255,122,0,.18) !important;
}

/* Placeholder & select dropdown readability */
.modal .form-control::placeholder{ color: rgba(255,255,255,.8); opacity:1; }
.modal select option{ background:#0b1017; color:#ffffff; }

/* Backdrop a bit darker for focus */
.modal-backdrop.show{ opacity: .75; }

/* --- Detalle oscuro coherente con Virtalus --- */
.details-row > td {
  padding: 0 !important;
  border: 0;
  background: transparent;
}

.details-card {
  background: #111827;               /* gris muy oscuro */
  color: #e5e7eb;                    /* texto claro */
  border: 1px solid #1f2937;
  border-radius: 12px;
  margin: 10px;
  padding: 18px;
}

/* NUEVO: tarjeta de notas más marcada */
.note-card{ background:#0b1220; border:1px solid #1f2937; border-radius:10px; padding:12px; }
.note-card__header{ padding-bottom:8px; margin-bottom:10px; border-bottom:1px dashed #374151; font-weight:700; color:#fff; letter-spacing:.2px; }
.note-text{ color:#e5e7eb; white-space:normal; }

/* Grid en detalles (si lo usas) */
.details-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1200px) {
  .details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.metric {
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 10px;
  padding: 12px;
  min-height: 70px;
}
.metric-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
  margin-bottom: 6px;
}
.metric-value {
  font-weight: 600;
  font-size: 1rem;
}

/* Línea de auditoría */
.audit-line {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed #374151;
  font-size: .92rem;
  color: #cbd5e1;
}

/* Si en algún momento DataTables generara "child" por responsive, forzamos tema oscuro */
table.dataTable tbody tr.child {
  background-color: #0f172a !important;
  color: #e5e7eb !important;
}
table.dataTable tbody tr.child ul.dtr-details > li {
  border-bottom: 1px solid #1f2937 !important;
}

/* === NUEVO: Expander (▸/▾) coherente con el tema === */
.expander-btn{
  padding:.15rem .5rem;
  border-radius:.6rem;
  line-height:1;
  background:transparent !important;
  color: var(--v-primary);
  border-color: var(--v-primary);
}
.expander-btn:hover{
  background: var(--v-primary);
  color: #0b0f19;
}

/* === NUEVO: Botón de calendario consistente (usado en create/edit) === */
.calendar-open{
  border-color: var(--v-primary) !important;
  color: var(--v-primary) !important;
  background: transparent !important;
}
.calendar-open:hover{
  background: var(--v-primary) !important;
  color: #0b0f19 !important;
}

/* === NUEVO: Flatpickr oscuro con paleta Virtalus === */
.flatpickr-calendar{
  background:#0f141e !important;
  color:var(--v-text) !important;
  border:1px solid var(--v-border) !important;
  border-radius:12px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.45) !important;
}
.flatpickr-months, .flatpickr-weekdays, .flatpickr-day{
  color:var(--v-text) !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{
  background:var(--v-primary) !important;
  border-color:var(--v-primary) !important;
  color:#0b0f19 !important;
}
.flatpickr-day:hover{ background:#182235 !important; }

/* === (opcional) estrechar filas de tabla ligeramente === */
.table td, .table th{ vertical-align: middle; }

/* Botón Back (contorno gris + hover lleno) */
.btn-back{
  border:2px solid #6b7280;          /* slate-500 */
  color:#cbd5e1;                      /* muted */
  background: transparent;
  border-radius: 12px;
  padding: .45rem .9rem;
  font-weight:600;
}
.btn-back:hover,
.btn-back:focus{
  background:#6b7280;
  color:#0b0f19;                      /* contraste oscuro */
  box-shadow: 0 0 0 .2rem rgba(107,114,128,.25);
  text-decoration:none;
}

/* === Date input: hacer visible el icono del calendario en tema oscuro === */
input[type="date"]{
  padding-right: 2.2rem; /* espacio para el icono */
}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
  opacity: .95;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
}