/* assets/css/theme.css — Tema PRO (visual, sin cambios funcionales)
   - Paleta limpia y profesional
   - Tablas/controles consistentes (Bitácora/Empleados/Sucursales)
   - Accesibilidad: focus visible, tamaños táctiles
*/

/* ===== Tokens ===== */
:root{
  --brand-50:#EFF6FF; --brand-100:#DBEAFE; --brand-200:#BFDBFE;
  --brand-500:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8;
  --surface:#F8FAFC; --text:#0F172A; --muted:#64748B;
  --border:#E2E8F0; --radius:12px; --shadow:0 6px 18px rgba(2,8,23,.08);
}

/* ===== Base ===== */
html, body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  background:var(--surface); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
a{color:var(--brand-600)}
a:hover{color:var(--brand-700)}

/* ===== Navbar ===== */
.navbar{background:#fff; box-shadow:0 2px 10px rgba(2,8,23,.06); border-bottom:1px solid var(--border)}
.navbar .nav-link{color:#334155!important}
.navbar .nav-link.active,.navbar .nav-link:hover{color:var(--brand-600)!important}
.navbar-brand-dot{width:12px;height:12px;border-radius:50%;background:var(--brand-600);display:inline-block;margin-right:.5rem}

/* ===== Cards / Layout ===== */
.container-narrow{max-width:1100px}
.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
.card-header{border:0;background:var(--brand-50)}
.card-title{margin:0}
.section-title{font-weight:600;margin-bottom:.75rem}
.app-footer{color:#6c757d}

/* ===== Buttons ===== */
.btn{border-radius:var(--radius); padding:.5rem .9rem}
.btn-primary{background:var(--brand-600);border-color:var(--brand-600)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-outline-primary{color:var(--brand-600);border-color:var(--brand-200)}
.btn-outline-primary:hover{color:#fff;background:var(--brand-600);border-color:var(--brand-600)}
.btn:focus{outline:3px solid rgba(37,99,235,.25); outline-offset:0}

/* ===== Forms ===== */
.form-control,.form-select{border-radius:var(--radius); border:1px solid var(--border)}
.form-control:focus,.form-select:focus{border-color:var(--brand-500);box-shadow:0 0 0 .25rem rgba(37,99,235,.15)}

/* ===== Tables (base PRO) ===== */
.table{border-radius:var(--radius);overflow:hidden;background:#fff;color:#0F172A}
.table thead{background:var(--brand-100)}
.table td,.table th{vertical-align:middle;border-color:var(--border)}
.table-striped tbody tr:nth-of-type(odd){background-color:var(--brand-50)}
.table-hover tbody tr:hover>*{background:var(--brand-50)}
.table-bordered{border-color:var(--border)}
.table-bordered>:not(caption)>*{border-color:var(--border)}

/* Cabecera DataTables pulida: espacio para íconos y sin superposición */
table.dataTable thead > tr > th{
  vertical-align: middle;
  white-space: nowrap;
  padding-right: 2rem !important;
  background:#F1F5F9; /* slate-100 */
  border-color: var(--border);
}
table.dataTable thead th:first-child{border-top-left-radius:12px}
table.dataTable thead th:last-child{border-top-right-radius:12px}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after{
  right:.75rem; top:50%; transform:translateY(-50%)
}

/* DataTables: sin búsqueda global; length/info/paginación visibles y prolijos */
.dataTables_wrapper .dataTables_filter{display:none!important}

/* "Mostrar 10/25/50/100" en una línea y legible */
.dataTables_wrapper .dataTables_length{
  display:flex; align-items:center; gap:.5rem; white-space:nowrap; margin-bottom:.5rem
}
.dataTables_wrapper .dataTables_length label{
  display:flex; align-items:center; gap:.5rem; margin:0; color:#475569; font-weight:500
}
.dataTables_wrapper .dataTables_length select{
  min-width: 7.25rem; height: 42px; font-size: 1rem; line-height:1.25;
  padding:.375rem .875rem; border-radius:10px; border:1px solid var(--border);
  background:#fff; text-align:center; text-align-last:center; -moz-text-align-last:center
}
@media (max-width:576px){
  .dataTables_wrapper .dataTables_length{flex-wrap:wrap; gap:.25rem}
  .dataTables_wrapper .dataTables_length select{min-width:6.25rem}
}
.dataTables_wrapper .dataTables_info{color:var(--muted)}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--border); border-radius:8px; padding:.25rem .5rem; margin:0 .125rem; background:#fff
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--brand-100); border-color:#cde5ff; color:#0F172A!important
}

/* ===== Badges / Estados ===== */
.badge-status{border-radius:999px; padding:.35rem .6rem; font-weight:600; font-size:.75rem}
.badge-status.success{background:#DCFCE7; color:#166534}
.badge-status.warn{background:#FEF9C3; color:#92400E}
.badge-status.danger{background:#FEE2E2; color:#991B1B}
.badge-status.info{background:#E0E7FF; color:#3730A3}

/* ===== Accesibilidad extra ===== */
:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:0}
.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible{outline:none}

/* ===== Footer al fondo ===== */
html, body{height:100%; margin:0}
body{display:flex; flex-direction:column; min-height:100vh}
main{flex:1}
footer{margin-top:auto}

#detection-container.success video {
  border: 4px solid #28a745; /* verde */
  border-radius: 8px;
}
#detection-container.error video {
  border: 4px solid #dc3545; /* rojo */
  border-radius: 8px;
}