/* ------------------------------------------
   COMPONENTES COMPARTIDOS
   ------------------------------------------ */

/* Anti-zoom iOS: inputs con font-size >= 16px */
input, select, textarea { font-size: 16px !important; }

/* Bloquear selección de texto (excepto inputs) */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

/* Toast */
#toast-container {
  position:fixed; top:20px; right:20px; z-index:10000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:14px 20px; border-radius:12px; font-size:14px; font-weight:500;
  color:#fff; pointer-events:auto; animation:toastIn .3s ease-out;
  display:flex; align-items:center; gap:10px; max-width:360px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); backdrop-filter:blur(10px);
}
.toast.success { background:rgba(16,185,129,.9); }
.toast.error { background:rgba(239,68,68,.9); }
.toast.warning { background:rgba(245,158,11,.9); }
.toast.info { background:rgba(99,102,241,.9); }
.toast.hide { animation:toastOut .3s ease-in forwards; }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { to{opacity:0;transform:translateX(40px)} }

/* Modal overlay */
#modal-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  justify-content:center; align-items:center; padding:16px;
}
#modal-overlay.active { display:flex; }

.modal-box {
  background:#1e1e2e; border:1px solid #334155; border-radius:16px;
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  animation:modalIn .25s ease-out; padding:0;
}
@keyframes modalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

.modal-header {
  padding:20px 24px 16px; border-bottom:1px solid #1e293b;
  font-size:18px; font-weight:700; color:#fff;
}
.modal-body { padding:20px 24px; }
.modal-footer {
  padding:16px 24px 20px; display:flex; gap:10px; justify-content:flex-end;
  border-top:1px solid #1e293b;
}

.modal-field { margin-bottom:14px; }
.modal-field label {
  display:block; font-size:13px; color:#94a3b8; margin-bottom:6px; font-weight:500;
}
.modal-input {
  width:100%; padding:11px 14px; font-size:16px;
  background:#0f172a; border:1px solid #334155; border-radius:10px;
  color:#e2e8f0; outline:none; transition:border-color .2s;
}
.modal-input:focus { border-color:#6366f1; }
.modal-input::placeholder { color:#475569; }
.modal-input:read-only { background:#1a1a2e; color:#64748b; cursor:not-allowed; }
.modal-select {
  width:100%; padding:11px 14px; font-size:16px;
  background:#0f172a; border:1px solid #334155; border-radius:10px;
  color:#e2e8f0; outline:none; cursor:pointer;
}
.modal-select:focus { border-color:#6366f1; }

/* Botones */
.btn-primary {
  padding:10px 22px; background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn-primary:hover { box-shadow:0 4px 16px rgba(99,102,241,.4); transform:translateY(-1px); }
.btn-secondary {
  padding:10px 22px; background:transparent;
  border:1px solid #475569; border-radius:10px; color:#94a3b8; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn-secondary:hover { border-color:#64748b; color:#e2e8f0; }
.btn-danger {
  padding:10px 22px; background:linear-gradient(135deg,#ef4444,#dc2626);
  border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn-danger:hover { box-shadow:0 4px 16px rgba(239,68,68,.4); }
.btn-success {
  padding:10px 22px; background:linear-gradient(135deg,#10b981,#059669);
  border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn-success:hover { box-shadow:0 4px 16px rgba(16,185,129,.4); }
.btn-warning {
  padding:10px 22px; background:linear-gradient(135deg,#f59e0b,#d97706);
  border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}

.btn-sm { padding:7px 14px; font-size:12px; }
.btn-icon { display:inline-flex; align-items:center; gap:6px; }

/* Switch */
.switch-container { display:flex; align-items:center; gap:8px; font-size:13px; color:#94a3b8; }
.switch { position:relative; width:42px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.switch-slider {
  position:absolute; inset:0; cursor:pointer;
  background:#334155; border-radius:24px; transition:.3s;
}
.switch-slider::before {
  content:''; position:absolute; left:3px; top:3px;
  width:18px; height:18px; background:#fff; border-radius:50%; transition:.3s;
}
.switch input:checked + .switch-slider { background:#6366f1; }
.switch input:checked + .switch-slider::before { transform:translateX(18px); }

/* Filtro búsqueda */
.search-bar {
  position:relative; flex:1; max-width:320px;
}
.search-bar input {
  width:100%; padding:10px 14px 10px 38px; font-size:14px;
  background:#0f172a; border:1px solid #334155; border-radius:10px;
  color:#e2e8f0; outline:none; transition:border-color .2s;
}
.search-bar input:focus { border-color:#6366f1; }
.search-bar input::placeholder { color:#475569; }
.search-bar svg {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#64748b; pointer-events:none;
}

/* Data table desktop */
.data-table {
  width:100%; border-collapse:collapse; font-size:13px;
}
.data-table thead th {
  padding:12px 10px; text-align:left; font-size:11px;
  text-transform:uppercase; letter-spacing:.5px;
  color:#64748b; border-bottom:1px solid #1e293b; white-space:nowrap;
}
.data-table tbody tr {
  cursor:pointer; transition:background .15s;
}
.data-table tbody tr:hover { background:rgba(99,102,241,.08); }
.data-table tbody tr.selected { background:rgba(99,102,241,.15); }
.data-table tbody td {
  padding:10px; border-bottom:1px solid rgba(30,41,59,.5);
  color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:180px;
}

/* Data cards mobile */
.data-cards { display:none; flex-direction:column; gap:10px; }
.data-card {
  background:#1e293b; border:1px solid #334155; border-radius:12px;
  padding:14px; cursor:pointer; transition:all .15s;
}
.data-card:hover { border-color:#6366f1; }
.data-card.selected { border-color:#6366f1; background:rgba(99,102,241,.1); }
.data-card-row { display:flex; justify-content:space-between; padding:3px 0; }
.data-card-label { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.3px; }
.data-card-value { font-size:13px; color:#e2e8f0; text-align:right; word-break:break-all; max-width:60%; }

/* Badge */
.badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
}
.badge-green { background:rgba(16,185,129,.15); color:#34d399; }
.badge-red { background:rgba(239,68,68,.15); color:#f87171; }
.badge-yellow { background:rgba(245,158,11,.15); color:#fbbf24; }
.badge-blue { background:rgba(99,102,241,.15); color:#818cf8; }

/* Loading */
.loading-spinner {
  display:flex; align-items:center; justify-content:center; padding:40px;
}
.loading-spinner::after {
  content:''; width:32px; height:32px;
  border:3px solid #334155; border-top-color:#6366f1;
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Empty state */
.empty-state {
  text-align:center; padding:40px 20px; color:#475569;
}
.empty-state svg { width:48px; height:48px; margin-bottom:12px; opacity:.5; }
.empty-state p { font-size:14px; }

/* Responsive */
@media(max-width:768px){
  .data-table-wrap { display:none; }
  .data-cards { display:flex; }
  #toast-container { top:10px; right:10px; left:10px; }
  .toast { max-width:100%; }
  .modal-box { max-width:100%; border-radius:12px; }
  .modal-footer { flex-wrap:wrap; }
  .modal-footer button { flex:1; min-width:120px; }
}
@media(min-width:769px){
  .data-table-wrap { display:block; overflow-x:auto; }
  .data-cards { display:none; }
}