/* --------- FUENTE BASE --------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* --------- ESTILO GLOBAL --------- */
body {
  font-family: 'Poppins', sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 0;
}

/* --------- REGISTRO (LOGIN) --------- */
body.registro-bg {
  background: #f7f7f7;
  min-height: 100vh;
}
.registro-center {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.registro-container {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 28px #0002;
  padding: 48px 38px 34px 38px;
  max-width: 680px;
  width: 100%;
}
.registro-logo { text-align: center; margin-bottom: 10px; }
.registro-logo img { max-width: 140px; margin-bottom: 7px; }
.registro-title {
  font-size: 1.7em; color: #0d4957; font-weight: 600; text-align: center;
  margin-bottom: 22px; letter-spacing: 0.01em;
}
.registro-form .row { display: flex; gap: 20px; margin-bottom: 0; }
.registro-form .row > div { flex: 1; display: flex; flex-direction: column; margin-bottom: 13px; }
.registro-form label { font-weight: 500; margin-bottom: 2px; color: #154959; }
.registro-form .req { color: #ff9800; margin-left: 2px; }
.registro-form input,
.registro-form select {
  font-family: inherit; font-size: 1em; padding: 11px 12px;
  border: 1.7px solid #b7c9ce; border-radius: 7px; background: #f8fafb;
  margin-bottom: 3px; transition: border-color .17s;
}
.registro-form input:focus,
.registro-form select:focus { border-color: #ff9800; outline: none; }
.registro-separator {
  color: #ff9800; font-weight: 600; text-align: left;
  margin: 22px 0 10px 2px; font-size: 1.14em;
}

/* Checkbox de términos y condiciones */
.terms-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.terms-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #ff9800; margin-right: 4px; cursor: pointer;
}
.terms-row label {
  font-size: 0.99em; font-weight: 400; margin: 0; color: #222; cursor: pointer; user-select: none;
}

/* Pie del formulario */
.registro-bottom {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; margin-top: 14px;
}
.registro-bottom button {
  background: #ff9800; color: #fff; font-size: 1.13em; padding: 11px 34px;
  border: none; border-radius: 7px; font-weight: bold; cursor: pointer;
  transition: background .16s; letter-spacing: 0.01em; margin: 0; box-shadow: 0 1px 5px #1f959311;
}
.registro-bottom button:hover { background: #f99b1c; }
.registro-bottom button:disabled { background: #eee; color: #aaa; cursor: not-allowed; }

.input-error { border-color: #e74c3c !important; background: #fff7f7 !important; }
.input-ok { border-color: #19c37d !important; }
.registro-error { color: #e74c3c; font-size: 0.96em; margin: 3px 0 8px 0; padding-left: 3px; font-weight: 500; display: none; }

/* Responsive registro */
@media (max-width: 800px) { .registro-container { padding: 24px 7vw 18px 7vw; } }
@media (max-width: 600px) {
  .registro-container { padding: 16px 2vw 12px 2vw; }
  .registro-form .row { flex-direction: column; gap: 3px; }
  .registro-bottom { flex-direction: column; gap: 6px; justify-content: center; }
}

/* --------- SIDEBAR --------- */
.sidebar {
  width: 210px; min-height: 100vh; position: fixed; top: 0; left: 0;
  background: #fff; border-right: 1.5px solid #ededed; z-index: 20; padding-top: 38px; box-shadow: 0 6px 24px #0001;
}
.sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-link {
  color: #333; text-decoration: none; padding: 11px 18px; border-radius: 6px; display: block;
  font-weight: 600; margin-bottom: 7px; font-size: 1.05em; transition: background .14s;
}
.sidebar-link.active, .sidebar-link:hover { background: #e9f6f9; color: #167187; }

/* --------- PANEL MAIN --------- */
.panel-main {
  margin-left: 230px; padding: 28px 16px 40px 16px;
  width: calc(100vw - 230px); max-width: unset; box-sizing: border-box;
  min-height: 100vh; background: #f4f4f4;
}
@media (max-width: 800px) {
  .sidebar { position: static; width: 100vw; border-right: none; min-height: unset; }
  .panel-main { margin-left: 0; padding: 14px 3vw 30px 3vw; width: 100vw; }
}
.panel-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px;
}
.btn-cerrar-sesion {
  background: #f44336; color: #fff; border: none; padding: 10px 32px;
  font-size: 15px; border-radius: 8px; cursor: pointer; font-weight: 600;
  margin-left: 14px; width: auto; transition: background .3s;
}
.btn-cerrar-sesion:hover { background: #d32f2f; }

/* --------- TABLAS --------- */
.table-section {
  background: #fff; border-radius: 13px; box-shadow: 0 2px 12px #b4e3e443;
  border: 1.2px solid #e0eaea; margin-top: 24px; padding: 10px 8px 14px 8px;
  margin-bottom: 32px; overflow-x: auto; width: 100%; box-sizing: border-box;
}
.tabla {
  width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0;
  font-size: 0.98em; margin-bottom: 0; background: #fff; table-layout: auto;
}
.tabla th, .tabla td {
  border: none; padding: 13px 10px; text-align: center; vertical-align: middle;
  font-size: 0.80em; transition: background .15s; min-width: 90px;
}
.tabla th {
  background: #b3bec2; color: #144753; font-weight: 600; letter-spacing: 0.01em;
  border-bottom: 3px solid #f4f4f4; position: sticky; top: 0; z-index: 2; text-align: center;
}
.tabla tr:nth-child(even) { background: #f7fbfb; }
.tabla tr:nth-child(odd) { background: #fff; }
.tabla td { border-bottom: 1.5px solid #e2eced; color: #144753; }
.tabla button, .btn-tabla {
  background: #167187; color: #fff; border: none; border-radius: 6px;
  padding: 8px 18px; font-size: 1em; font-weight: 600; cursor: pointer;
  margin: 1px 3px; transition: background .2s, color .17s, border .17s;
  box-shadow: 0 2px 7px #1f959311; min-width: 90px;
}
.tabla button:hover, .btn-tabla:hover { background: #17485e; color: #fff; }
.btn-tabla.btn-minimal, .tabla .btn-minimal {
  background: #fff; color: #167187; border: 1.2px solid #e0e0e0;
  padding: 7px 0; min-width: 100px; font-size: 0.97em; font-weight: 600; box-shadow: none;
}
.btn-tabla.btn-minimal:hover, .tabla .btn-minimal:hover { background: #e9f6f9; color: #0e5d77; border-color: #b6e5ee; }
.btn-tabla.btn-eliminar, .tabla .btn-eliminar { background: #e84848; color: #fff; border-color: #ffe3e3; }
.btn-tabla.btn-eliminar:hover, .tabla .btn-eliminar:hover { background: #fceaea; color: #c20000; border-color: #facaca; }
.tabla select {
  padding: 7px 10px; font-size: 0.97em; min-width: 115px; border-radius: 5px;
  border: 1.2px solid #b7c9ce; background: #f8fafb; color: #17485e;
}
.tabla ul { list-style: disc; margin: 0 0 0 18px; padding: 0; text-align: left; color: #222; font-size: 0.99em; }

/* Responsive tablas */
@media (max-width: 1200px) { .tabla { min-width: 600px; font-size: 0.95em; } .table-section { padding: 7px 1vw 9px 1vw; } }
@media (max-width: 900px) {
  .tabla { min-width: 480px; font-size: 0.91em; }
  .tabla th, .tabla td { font-size: 0.89em; padding: 10px 6px; }
}
@media (max-width: 650px) {
  .table-section, .tabla { min-width: unset; width: 100vw !important; max-width: 100vw !important; overflow-x: auto !important; }
  .tabla th, .tabla td { font-size: 0.87em; padding: 8px 5px; word-break: break-word; }
}
@media (max-width: 480px) {
  .tabla, .table-section { min-width: 340px !important; font-size: 0.82em; padding: 2px 0 6px 0; border-radius: 0; }
}

/* No datos */
.no-datos { text-align: center; color: #888; font-style: italic; padding: 24px 0 18px 0; }
#detalleVacio { text-align: center; color: #999; padding: 10px 0; font-size: 15px; }

/* Popup Historial */
#historialPopup { display: none; align-items: center; justify-content: center; z-index: 1002; }
#historialPopup > div {
  background: #fff; border-radius: 18px; min-width: 330px; max-width: 90vw; max-height: 88vh;
  padding: 32px 28px 20px 28px; box-shadow: 0 10px 40px #0012; position: relative;
}
#historialPopup button {
  font-size: 1.4em !important; font-weight: bold !important; color: #e84848 !important;
  background: none !important; border: none !important; right: 12px; top: 7px;
}

/* Filtros */
#filtroUsuario { margin: 12px 0 18px 0; width: 100%; max-width: 340px; display: block; }

/* Botones tabla (comodín) */
.btn-tabla {
  background: #167187; color: #fff; border: none; border-radius: 6px; padding: 8px 18px;
  font-size: 1em; font-weight: 600; cursor: pointer; margin: 2px 0; transition: background .2s; box-shadow: 0 2px 7px #1f959311;
  display: inline-block; min-width: 105px;
}
.btn-tabla:hover { background: #17485e; }
.btn-eliminar { background: #e84848; }
.btn-eliminar:hover { background: #b71c1c; }
.btn-tabla.btn-minimal {
  background: #fff; color: #167187; border: 1.3px solid #e0e0e0; border-radius: 6px; padding: 7px 0;
  min-width: 95px; font-size: 0.98em; font-weight: 600; cursor: pointer; margin: 2px 6px 2px 0;
  box-shadow: none; transition: all .17s; outline: none; letter-spacing: 0.01em;
}
.btn-tabla.btn-minimal:hover { background: #e9f6f9; color: #0e5d77; border-color: #b6e5ee; }
.btn-tabla.btn-eliminar { color: #e84848; border-color: #ffe3e3; }
.btn-tabla.btn-eliminar:hover { background: #fceaea; color: #c20000; border-color: #facaca; }

/* ===== MAIN LOGIN ===== */
body.login-bg {
  background: #f4f4f4; min-height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center;
}
.login-container {
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px #0002;
  max-width: 380px; width: 100%; padding: 38px 36px 32px 36px; text-align: center; margin: 0 auto;
}
.login-logo { margin-bottom: 24px; }
.login-logo img { max-width: 140px; margin-bottom: 10px; }
.login-title { font-size: 1.36em; color: #0d4957; font-weight: bold; margin-bottom: 26px; letter-spacing: .02em; }
.login-form input {
  width: 100%; padding: 12px 12px; margin-bottom: 19px; border-radius: 6px; border: 1.5px solid #c1d2d8;
  background: #f8fafb; font-size: 1em; transition: border-color .18s;
}
.login-form input:focus { border-color: #23b3b7; outline: none; }
.login-form button {
  width: 100%; background: #ff9800; color: #fff; font-size: 1.12em; padding: 12px 0;
  border: none; border-radius: 7px; font-weight: bold; cursor: pointer; transition: background .15s; margin-bottom: 15px;
}
.login-form button:hover { background: #f99b1c; }
.login-form .login-error { color: #e74c3c; font-size: 1em; margin-bottom: 15px; display: none; }
.login-link { margin-top: 5px; font-size: .99em; color: #444; }
.login-link a { color: #ff9800; text-decoration: none; font-weight: 600; }
.login-link a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .login-container { padding: 18px 6vw 12px 6vw; max-width: 98vw; }
  .login-title { font-size: 1.04em; }
}

/* --------- LOGIN ADMIN --------- */
body.admin-login-bg {
  background: #f7f7f7; font-family: 'Poppins', sans-serif; min-height: 100vh;
  display: flex; justify-content: center; align-items: center; margin: 0;
}
.admin-login-container {
  background: #fff; border-radius: 16px; box-shadow: 0 4px 24px #0002; padding: 40px 30px;
  max-width: 350px; width: 100%; text-align: center;
}
.admin-login-title { color: #0d4957; margin-bottom: 32px; font-size: 1.6em; }
.admin-login-input {
  width: 100%; padding: 12px; margin-bottom: 18px; border-radius: 7px; border: 1.5px solid #b7c9ce;
  font-size: 1em; background: #f8fafb; transition: border-color .15s;
}
.admin-login-input:focus { border-color: #ff9800; outline: none; }
.admin-login-btn {
  width: 100%; background: #167187; color: #fff; border: none; border-radius: 7px;
  padding: 13px 0; font-size: 1.15em; font-weight: 600; cursor: pointer; transition: background .17s;
  margin-top: 5px; box-shadow: 0 2px 7px #1f959311;
}
.admin-login-btn:hover { background: #0d4957; }
.error-admin { color: #e84848; font-size: 0.98em; margin-bottom: 14px; display: none; }
@media (max-width: 500px) {
  .admin-login-container { padding: 20px 6vw; max-width: 98vw; }
  .admin-login-title { font-size: 1.08em; }
}

.input-error-msg { color: #e84848; font-size: 0.95em; margin-top: 2px; display: block; min-height: 1em; }

/* --- MODAL/POPUP EDICIÓN DE PRE ALERTA (ADMIN) --- */
#popupEditarPrealerta {
  display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; background: rgba(0,0,0,0.23); z-index: 99999;
}
#formEditarPrealerta {
  background: #fff; border-radius: 16px; box-shadow: 0 8px 48px #0003;
  min-width: 340px; max-width: 470px; width: 100%;
  padding: 28px 26px 22px 26px; font-family: inherit; position: relative; margin: 0 12px;
  animation: popupFadeIn .25s;
}
#formEditarPrealerta > .popup-title,
#formEditarPrealerta > .modal-title { font-size: 1.5em; font-weight: 700; margin-bottom: 20px; color: #184e67; }
#formEditarPrealerta label { font-weight: 600; margin-bottom: 2px; }
#formEditarPrealerta input,
#formEditarPrealerta select {
  padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 1em; margin-bottom: 0; background: #fafbfc;
}
#formEditarPrealerta th, #formEditarPrealerta td { font-size: 0.98em; }
#formEditarPrealerta th { background: #f3f6fa; font-weight: 700; padding: 7px 0; border-bottom: 1px solid #e1e7ec; }
#formEditarPrealerta td { background: #fff; padding: 6px 2px; border-bottom: 1px solid #f2f2f2; }
#formEditarPrealerta table { width: 100%; border-collapse: collapse; margin: 7px 0 5px; }
#formEditarPrealerta input[type="number"] { text-align: right; }
#cerrarEditarBtn {
  position: absolute; top: 15px; right: 18px; background: none; border: none; font-size: 2em; color: #333;
  cursor: pointer; line-height: 1; transition: color .15s;
}
#cerrarEditarBtn:hover { color: #e84848; }
#formEditarPrealerta button[type="submit"] {
  background: #16a34a; color: #fff; padding: 11px 26px; border: none; border-radius: 7px; font-size: 1.15em;
  font-weight: 600; letter-spacing: .02em; box-shadow: 0 2px 8px #0002; cursor: pointer; transition: background .18s;
}
#formEditarPrealerta button[type="submit"]:hover { background: #118032; }
@media (max-width: 560px) {
  #formEditarPrealerta { min-width: 0; padding: 15px 5vw; }
  #formEditarPrealerta table { font-size: .97em; }
}

/* ÚNICA definición de keyframes */
@keyframes popupFadeIn { from { opacity: 0; transform: scale(.97);} to { opacity: 1; transform: scale(1);} }

/* Tarjetas dashboard */
.dashboard-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; margin-bottom: 28px;
}
.dashboard-card {
  background: #fff; border-radius: 14px; box-shadow: 0 2px 12px #b4e3e443;
  padding: 26px 22px 18px 26px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; border: 1.1px solid #e0eaea;
}
.dashboard-card .dashboard-title { font-size: 1.10em; color: #167187; font-weight: 600; margin-bottom: 9px; letter-spacing: 0.01em; }
.dashboard-card .dashboard-value { font-size: 2.18em; font-weight: bold; color: #154959; margin-bottom: 2px; line-height: 1.15; }
.dashboard-card .dashboard-desc { font-size: 1em; color: #58666b; margin-bottom: 7px; }
.dashboard-card .dashboard-diff { font-size: 1.05em; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.dashboard-card .dashboard-diff.positivo { color: #19c37d; }
.dashboard-card .dashboard-diff.negativo { color: #e84848; }

/* Contenedor gráficas */
.dashboard-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 10px; }
@media (max-width: 1100px) { .dashboard-charts { grid-template-columns: 1fr; } }
.chart-card {
  background: #fff; border-radius: 13px; box-shadow: 0 2px 12px #b4e3e443;
  border: 1.2px solid #e0eaea; padding: 20px 16px 10px 22px; min-height: 285px; overflow-x: auto;
}
.chart-title { font-size: 1.05em; font-weight: 600; color: #167187; margin-bottom: 8px; }
.fleet-status-list { list-style: none; padding: 0; margin: 0; }
.fleet-status-list li { display: flex; align-items: center; margin-bottom: 8px; font-size: 1em; font-weight: 500; color: #17485e; gap: 9px; }
.fleet-bar-bg {
  width: 100%; height: 13px; background: #e8edf5; border-radius: 7px; margin: 0 10px; overflow: hidden; position: relative; flex: 1;
}
.fleet-bar-fill { height: 100%; border-radius: 7px; transition: width .4s; }
.fleet-bar-fill.active { background: #19c37d; }
.fleet-bar-fill.maintenance { background: #ff9800; }
.fleet-bar-fill.available { background: #167187; }
.fleet-status-list .fleet-label { min-width: 86px; }
.fleet-status-list .fleet-value { min-width: 22px; text-align: right; }

/* Modal genérico */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.21); display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.modal-content { animation: popupFadeIn .22s; }

/* ===== Reset Password Modal (login) ===== */
#resetModal.modal-overlay { background: rgba(0,0,0,.45); backdrop-filter: blur(1.5px); z-index: 9999; }
#resetModal .modal-content {
  background: #fff; color: #133444; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.18);
  padding: 18px; width: clamp(340px, 88vw, 480px); box-sizing: border-box; display: block; overflow: hidden;
}
#resetModal .login-title { margin: 0 0 8px 0; }
#resetModal .admin-login-input {
  width: 100%; max-width: 100%; box-sizing: border-box; display: block; padding: 12px 12px;
  margin-top: 8px; border: 1.4px solid #c1d2d8; border-radius: 10px; background: #f8fafb; font-size: 1em;
  -webkit-appearance: none; appearance: none;
}
#resetModal .btn-tabla { min-width: 120px; }
#resetModal .btn-minimal { min-width: 110px; }
#resetMsg { margin-top: 8px; display: none; }
#resetModal[style*="display: none"] { pointer-events: none; }
@media (max-width: 420px) { #resetModal .modal-content { width: 92vw; } }

/* ========= Modal Beneficio / Método de pago ========= */
#modal-beneficio {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; background: rgba(9, 30, 66, 0.18); backdrop-filter: blur(2px);
  animation: mb-fade .16s ease-out;
}
#modal-beneficio .formulario-prealerta {
  width: min(680px, 92vw); border-radius: 14px; padding: 20px 18px 16px 18px;
  border: 1.4px solid #e4eaea; background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(4px) scale(0.98); animation: mb-pop .16s ease-out forwards;
}
#modal-beneficio h2 { margin: 0 0 8px 0; font-size: 1.24em; font-weight: 700; color: #0d4957; }
#modal-beneficio #mb-context { color: #4c7b8a; font-size: 0.94em; margin-bottom: 8px; }
#modal-beneficio #mb-close {
  position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #436671;
  font-size: 1.22em; line-height: 1; cursor: pointer; border-radius: 6px; padding: 4px 8px; transition: background .15s, color .15s, transform .08s;
}
#modal-beneficio #mb-close:hover { background: #e9f6f9; color: #0e5d77; }
#modal-beneficio #mb-close:active { transform: scale(0.96); }
#modal-beneficio input[type="number"],
#modal-beneficio input[type="text"],
#modal-beneficio select {
  border: 1.5px solid #b9ced6; border-radius: 8px; padding: 10px 12px; font-size: 1.02em;
  transition: border-color .15s, box-shadow .15s; background: #fff;
}
#modal-beneficio input:focus, #modal-beneficio select:focus {
  outline: none; border-color: #15b2b3; box-shadow: 0 0 0 3px rgba(21,178,179,.18);
}
#modal-beneficio label { display: block; font-weight: 600; font-size: 1.02em; color: #144753; margin-bottom: 4px; }
#modal-beneficio .row:last-of-type { margin-top: 10px; }
#modal-beneficio .btn-panel, #modal-beneficio .btn-cancelar-panel {
  min-width: 140px; padding: 10px 18px; border-radius: 9px; box-shadow: 0 3px 10px rgba(31,149,147,.09);
}
#modal-beneficio .btn-panel:active, #modal-beneficio .btn-cancelar-panel:active { transform: translateY(1px); }
@keyframes mb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mb-pop { to { transform: translateY(0) scale(1); } }
@media (max-width: 480px) {
  #modal-beneficio .formulario-prealerta { padding: 16px 12px 12px; border-radius: 10px; }
  #modal-beneficio .btn-panel, #modal-beneficio .btn-cancelar-panel { min-width: unset; width: 100%; }
}

/* ===== Tabla crudo: look & feel ===== */
.table--compact { font-size: 0.94rem; border-collapse: separate; border-spacing: 0; }
.table--compact thead th {
  position: sticky; top: 0; background: #f9fbfc; z-index: 1; box-shadow: inset 0 -1px 0 #e6eff2; white-space: nowrap;
}
.table--compact tbody tr:nth-child(odd) { background: #fbfdfe; }
.table--compact tbody tr:hover { background: #f2f8fb; }
.th-right, .td-right { text-align: right; }
.td-muted { color: #6c8b96; }
.td-ellipsis { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1100px) {
  .table--compact td:first-child, .table--compact th:first-child {
    position: sticky; left: 0; z-index: 2; background: inherit; box-shadow: 1px 0 0 #e6eff2;
  }
}

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid #d5e6ea;
  font-size: .85em; color: #0d4957; background: #f6fbfc;
}
.chip--ok    { color: #155c36; border-color: #cfe9d9; background: #f3fbf6; }
.chip--warn  { color: #7b4a00; border-color: #f1e0b8; background: #fff9ea; }
.chip--info  { color: #125a78; border-color: #cfe3ee; background: #eef7fb; }
.chip--violet{ color: #4b2e83; border-color: #d9cff0; background: #f5f0ff; }

/* Estados (mapeos rápidos) */
.chip-estado--retirado { color:#155c36; border-color:#cfe9d9; background:#f3fbf6; }
.chip-estado--pago     { color:#125a78; border-color:#cfe3ee; background:#eef7fb; }

/* Botón ghost en tabla */
.btn-ghost {
  border: 1px solid #cfe0e6; background: #fff; padding: 4px 10px; border-radius: 8px;
  font-size: .86rem; color: #0b5a6f;
}
.btn-ghost:hover { background:#f0f7f9; }
.btn-ghost:active { transform: translateY(1px); }

/* Checkbox en tabla */
.table .chk { width: 18px; height: 18px; accent-color: #0a7bee; cursor: pointer; }

/* Toolbar selección */
.toolbar { display:flex; align-items:center; gap:10px; margin:8px 0 6px; }
.toolbar .count-badge {
  padding: 4px 10px; border-radius: 999px; background:#eef7fb; color:#0d5e6f; border:1px solid #cfe3ee; font-size:.86rem;
}
.toolbar .btn-panel:disabled, .toolbar .btn-cancelar-panel:disabled { opacity:.5; cursor:not-allowed; }

/* Pills para Depósito */
.pill{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.85em; line-height:1; border:1px solid #d5e6ea; background:#f6fbfc; color:#0d4957;
}
.pill--miami{ background:#fff4e6; border-color:#ffd9a8; color:#7b4a00; }
.pill--china{ background:#eaf8ee; border-color:#cfe9d9; color:#155c36; }
.pill--esp  { background:#eef2ff; border-color:#cfd7ff; color:#1a2b8f; }

/* ===== Filtros (admin) – mismo look que "Depósito" ===== */
.admin-filters {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 16px;
  align-items: end;
  margin: 18px 0 20px;
}

.admin-filters .filter-group {
  grid-column: span 6;         /* 2 por fila en desktop */
  display: flex;
  flex-direction: column;
}

.admin-filters .filter-group--wide { grid-column: span 12; } /* ocupa toda la fila */
.admin-filters .filter-group--sm   { grid-column: span 3;  } /* 4 por fila */
.admin-filters .filter-group--md   { grid-column: span 4;  } /* 3 por fila */
.admin-filters .filter-group--lg   { grid-column: span 6;  } /* 2 por fila */

.admin-filters label {
  font-weight: 600;
  font-size: .98rem;
  color: #154959;
  margin: 0 0 6px 2px;
}

.admin-filters select,
.admin-filters input[type="text"],
.admin-filters input[type="search"],
.admin-filters input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1.7px solid #b7c9ce;
  border-radius: 10px;         /* mismo radio que "Depósito" */
  background: #f8fafb;
  color: #133444;
  font: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none;            /* quita flechas nativas raras */
}

.admin-filters select:focus,
.admin-filters input:focus {
  border-color: #23b3b7;       /* mismo foco que venías usando */
  box-shadow: 0 0 0 3px rgba(35,179,183,.18);
  background: #fff;
}

/* Placeholder y altura visual pareja */
.admin-filters ::placeholder { color: #7f97a1; }

/* Botonera de filtros a la derecha */
.admin-filters .filters-actions {
  grid-column: span 12;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.admin-filters .btn-apply {
  background: #167187;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(31,149,147,.09);
  transition: background .15s, transform .06s;
}
.admin-filters .btn-apply:hover { background:#0d5e73; }
.admin-filters .btn-apply:active { transform: translateY(1px); }

.admin-filters .btn-reset {
  background: #fff;
  color: #0e5d77;
  border: 1.3px solid #cfe0e6;
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.admin-filters .btn-reset:hover {
  background: #e9f6f9;
  border-color: #b6e5ee;
}

/* Responsivo */
@media (max-width: 980px) {
  .admin-filters .filter-group,
  .admin-filters .filter-group--md,
  .admin-filters .filter-group--lg { grid-column: span 12; } /* 1 por fila */
  .admin-filters { gap: 10px 12px; }
}


/* Tabla crudo en modo “planilla” */
.table--grid {
  border-collapse: separate;
  border-spacing: 0;
}
.table--grid th,
.table--grid td {
  border: 1px solid #dde6ea;
}
.table--grid thead th {
  background: #f7fafc;
  position: sticky; top: 0; z-index: 1;
}
.table--grid tbody tr:hover {
  background: #f3f9fc;
}

/* Celdas adaptables */
.col-alias, .col-depo { max-width: 280px; }
.td-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Input inline para “Referido” */
.ref-edit {
  width: 100%;
  min-width: 140px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #0d4957;
}
.ref-edit:focus {
  outline: none;
  border-color: #15b2b3;
  box-shadow: 0 0 0 3px rgba(21,178,179,.18);
}

/* Chips (re-uso) */
.chip { display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid #d5e6ea;font-size:.85em;color:#0d4957;background:#f6fbfc; }
.chip--info { color:#125a78;border-color:#cfe3ee;background:#eef7fb; }


/* ====== Base ====== */
:root{
  --tbl-bg: #fff;
  --tbl-border: #e7eef1;
  --tbl-border-bold: #d6e2e7;
  --tbl-text: #133444;
  --tbl-sub: #5a7a86;
  --tbl-accent: #167187;
  --sticky-bg: #fffffff0; /* leve transparencia para ver el scroll */
  --row-hover: #f7fbfc;
  --chip-text: #0c2b36;
  --ok: #27ae60;
  --violet: #7b61ff;
  --blue: #2d9cdb;
  --amber: #f2c94c;
  --info: #3f9ab1;
}

* { box-sizing: border-box; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }

/* ====== Mensajes ====== */
#msg{
  display:none;
  padding:10px 12px;
  border-radius:10px;
  font-size:.95rem;
  margin:8px 0 14px;
}

/* ====== Tabla crudo ====== */
#tbl-raw{
  background: var(--tbl-bg);
  color: var(--tbl-text);
  font-size: 14px;
  line-height: 1.25;
  border: 1px solid var(--tbl-border-bold);
  border-radius: 12px;
  overflow: hidden;
}

/* cuadriculado tipo planilla */
.table--grid thead th,
.table--grid tbody td{
  border-bottom: 1px solid var(--tbl-border);
}
.table--grid thead th{
  background: #f6fafb;
  color: var(--tbl-sub);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 12px;
  border-bottom: 1px solid var(--tbl-border-bold);
}

/* alturas */
#tbl-raw thead th{ padding: 10px 12px; position: relative; }
#tbl-raw tbody td{ padding: 10px 12px; vertical-align: middle; }

/* zebra + hover */
#tbl-raw tbody tr:nth-child(odd){ background: #fcfefe; }
#tbl-raw tbody tr:hover{ background: var(--row-hover); }

/* ====== Sticky header & columns ====== */
.table--sticky thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sticky-bg);
  backdrop-filter: blur(2px);
}

.col-sticky{
  position: sticky;
  left: 0;
  z-index: 6; /* arriba del contenido */
  background: var(--sticky-bg);
  backdrop-filter: blur(2px);
  box-shadow: 1px 0 0 0 var(--tbl-border);
}

/* ordenar las tres primeras sticky: select -> fecha -> cliente */
th.col-select.col-sticky, td.col-select.col-sticky { left: 0; z-index: 7; width: 44px; min-width: 44px; }
th.col-date.col-sticky,   td.col-date.col-sticky   { left: 44px; z-index: 6; width: 110px; min-width: 110px; }
th.col-cli.col-sticky,    td.col-cli.col-sticky    { left: 154px; z-index: 6; min-width: 220px; }

/* columnas mínimas / anchos sugeridos */
.col-jbx     { min-width: 120px; font-variant-numeric: tabular-nums; }
.col-mail    { min-width: 200px; }
.col-tel     { min-width: 130px; font-variant-numeric: tabular-nums; }
.col-depo    { min-width: 120px; }
.col-estado  { min-width: 150px; }
.col-kg      { min-width: 80px; text-align: right; }
.col-dias    { min-width: 90px; text-align: right; }
.col-ref     { min-width: 180px; }
.col-benef   { min-width: 140px; }
.col-metodo  { min-width: 140px; }

/* celdas utilitarias */
.td-right{ text-align:right; }
.td-ellipsis{
  max-width: 1px; /* permite encoger con flex layout del contenedor */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-strong{ font-weight: 600; }

/* checkbox */
#tbl-raw .chk{ width:18px; height:18px; cursor:pointer; }

/* ====== Inputs inline (Referido) ====== */
#tbl-raw .col-ref input.ref-edit{
  width: 100%;
  border: 1px solid var(--tbl-border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  outline: none;
  background: #fff;
}
#tbl-raw .col-ref input.ref-edit:focus{
  border-color: var(--tbl-accent);
  box-shadow: 0 0 0 3px rgba(22,113,135,.12);
}

/* ====== Chips ====== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#eef5f7;
  color:var(--chip-text);
  border:1px solid #e4eef1;
}
.chip--depo{ background:#eef6ff; border-color:#e1ecff; }
.chip--depo-miami{ background:#e9f7ff; }
.chip--depo-china{ background:#fff1e6; }
.chip--depo-esp{ background:#fff3f6; }

.chip--state{ background:#eef6f8; border-color:#e1eff3; }
.chip--ok{ color:#0e7a3a; background: #e9f8ef; border-color:#d6f2e0; }
.chip--violet{ color:#4338ca; background:#eef0ff; border-color:#e0e3ff; }
.chip--blue{ color:#0b77b3; background:#e9f6ff; border-color:#d6ecff; }
.chip--amber{ color:#8a6d00; background:#fff6d9; border-color:#ffeab0; }
.chip--info{ color:#0b6a7e; background:#e7f6fb; border-color:#d4eef6; }

/* ====== Links ====== */
.link-mail, .link-tel{
  color: var(--tbl-accent);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.link-mail:hover, .link-tel:hover{
  border-color: currentColor;
}

/* ====== Botones ====== */
.btn-ghost{
  background: transparent;
  border: 1px solid var(--tbl-border);
  color: var(--tbl-accent);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}
.btn-ghost:hover{
  border-color: var(--tbl-accent);
  background: rgba(22,113,135,.06);
}

.btn-copy{
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--tbl-accent);
  cursor: pointer;
}
.btn-copy--inline{
  margin-right: 6px;
  border: 1px solid var(--tbl-border);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1;
  transform: translateY(-1px);
}
.btn-copy--inline:hover{ border-color: var(--tbl-accent); }

/* ====== Toolbar selección ====== */
#sel-count{ font-weight:600; color: var(--tbl-accent); }

/* ====== Sección scrollable (opcional) ======
   Si tu HTML envuelve la tabla en .table-section, esto da alto a pantalla. */
.table-section{
  border-radius: 12px;
  overflow: auto;
  border: 1px solid var(--tbl-border-bold);
  background: #fff;
}
.table-section--fill{
  max-height: calc(100vh - 260px); /* coordina con tu header/filtros */
}

/* ====== Responsivo ====== */
@media (max-width: 1200px){
  .col-metodo{ display:none; }
}
@media (max-width: 992px){
  .col-ref{ display:none; }
  .col-dias{ display:none; }
}
@media (max-width: 768px){
  .col-mail{ display:none; }
  .col-tel{ display:none; }
  /* agranda Cliente para que entre mejor */
  th.col-cli.col-sticky, td.col-cli.col-sticky{ min-width: 180px; left: 154px; }
}

/* ====== Pequeños detalles visuales ====== */
#tbl-raw thead th::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--tbl-border-bold);
}
#tbl-raw tbody td + td{ box-shadow: inset 1px 0 0 0 var(--tbl-border); }

/* número formateado */
.col-kg, .col-dias { font-variant-numeric: tabular-nums; }

/* focus row cuando hay inputs/checkbox */
#tbl-raw tr:has(.ref-edit:focus),
#tbl-raw tr:has(.row-select:focus){
  outline: 2px solid rgba(22,113,135,.2);
  outline-offset: -2px;
}