/* Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
*/

/* ==================================================
   Hello Elementor Child - UNIVERSAL SYSTEM (Optimizado)
   ================================================== */

/* -----------------------------
   VARIABLES (Globales)
   ----------------------------- */
:root {
  --primary: #BCBF03;
  --secondary: #1DAFD7;
  --bg-dark: #121212;
  --bg-sidebar: #0a0a0a;
  --bg-card: #1E1E1E;
  --bg-input: #0f0f0f;
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --border: #333333;
  --font-family: 'Inter', sans-serif;
  --font-size-base: 14px;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;

  --badge-bg: rgba(255, 255, 255, 0.05);
  --badge-color: var(--secondary);
  --badge-border: #333;
}

body.light-mode {
  --bg-dark: #F3F4F6;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-input: #F9FAFB;
  --text-main: #111827;
  --text-muted: #4B5563;
  --border: #D1D5DB;
  --primary: #aeb102;
  --secondary: #0e7490;
  --badge-bg: #E0F2FE;
  --badge-color: #0369A1;
  --badge-border: #BAE6FD;
}

/* -----------------------------
   RESET + UTILIDADES GENERALES
   ----------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

.hidden {
  display: none !important;
}

/* ============================
   WRAPPER (Encapsula TODO)
   ============================ */
#uw-app-wrapper {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-main);
}

/* Evita conflictos con Elementor */
#uw-app-wrapper * {
  font-family: inherit;
}

/* -----------------------------
   ANIMACIONES
   ----------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* -----------------------------
   TOASTS
   ----------------------------- */
#uw-app-wrapper .toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#uw-app-wrapper .toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  padding: 16px;
  background: var(--bg-card);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: var(--text-main);
  animation: slideIn 0.3s ease-out forwards;
  border: 1px solid var(--border);
}

#uw-app-wrapper .toast.success { border-color: var(--success); }
#uw-app-wrapper .toast.error { border-color: var(--danger); }

/* -----------------------------
   UTILIDADES
   ----------------------------- */
#uw-app-wrapper .wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37, 211, 102, 0.1);
  color: #25D366;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(37, 211, 102, 0.3);
  margin-left: 8px;
  transition: 0.2s;
}
#uw-app-wrapper .wa-btn:hover {
  background: #25D366;
  color: #fff;
}

/* -----------------------------
   LOGIN
   ----------------------------- */
#uw-app-wrapper .login-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, var(--bg-card) 0%, #000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#uw-app-wrapper .login-card {
  width: 400px;
  padding: 50px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: modalPop 0.6s ease-out;
}

#uw-app-wrapper .login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

#uw-app-wrapper .brand-icon-login {
  font-size: 50px;
  color: var(--primary);
  margin-bottom: 10px;
  display: inline-block;
}

#uw-app-wrapper .brand-name-login {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-main);
}

#uw-app-wrapper .input-group { position: relative; margin-bottom: 15px; }

#uw-app-wrapper .input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

#uw-app-wrapper .login-input {
  width: 100%;
  padding: 15px 15px 15px 45px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 12px;
  font-size: 1em;
  transition: 0.3s;
  font-family: inherit;
}

#uw-app-wrapper .login-btn {
  width: 100%;
  padding: 15px;
  background: var(--primary);
  color: #000;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.2s;
  font-family: inherit;
  text-transform: uppercase;
  font-size: 0.9em;
}

#uw-app-wrapper .error-text {
  color: var(--danger);
  margin-top: 15px;
  font-size: 0.9em;
  background: rgba(239, 68, 68, 0.1);
  padding: 10px;
  border-radius: 8px;
}

#uw-app-wrapper .login-footer {
  position: absolute;
  bottom: 20px;
  color: var(--text-muted);
  font-size: 0.8em;
}

/* -----------------------------
   LAYOUT
   ----------------------------- */
#uw-app-wrapper .app-layout {
  display: flex;
  height: 100vh;
}

#uw-app-wrapper .sidebar {
  width: 260px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px;
  transition: width 0.3s;
}

#uw-app-wrapper .main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}

#uw-app-wrapper .content-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

#uw-app-wrapper .brand-area {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#uw-app-wrapper .brand-logo-img {
  max-height: 120px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

#uw-app-wrapper .brand-title {
  color: var(--primary);
  font-size: 1.4em;
  font-weight: 800;
  letter-spacing: -0.5px;
}

#uw-app-wrapper .nav-scroll {
  flex: 1;
  overflow-y: auto;
}

#uw-app-wrapper .nav-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

#uw-app-wrapper .nav-item {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 5px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.2s;
  font-size: 0.95em;
  font-family: inherit;
}

#uw-app-wrapper .nav-item:hover {
  background: rgba(128,128,128,0.05);
  color: var(--text-main);
}

#uw-app-wrapper .nav-item.active {
  background: linear-gradient(90deg, rgba(29, 175, 215, 0.1), transparent);
  color: var(--secondary);
  border-left: 3px solid var(--secondary);
}

#uw-app-wrapper .nav-group {
  font-size: 0.75em;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  margin: 15px 0 5px 10px;
}

/* -----------------------------
   HEADER
   ----------------------------- */
#uw-app-wrapper .top-header {
  height: 75px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background: var(--bg-card);
  transition: background 0.3s;
}

#uw-app-wrapper .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

#uw-app-wrapper .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

#uw-app-wrapper .icon-btn:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

#uw-app-wrapper .user-wrapper {
  position: relative;
}

#uw-app-wrapper .user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 30px;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--bg-input);
  border: 1px solid var(--border);
}

#uw-app-wrapper .user-badge:hover {
  border-color: var(--secondary);
}

#uw-app-wrapper .avatar {
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

#uw-app-wrapper .user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: right;
}

#uw-app-wrapper .role-badge {
  font-size: 0.7em;
  background: var(--bg-input);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-end;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

#uw-app-wrapper .dropdown-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 180px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 100;
  animation: fadeUp 0.2s ease-out;
}

#uw-app-wrapper .dropdown-menu button {
  width: 100%;
  padding: 12px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
}

/* -----------------------------
   PARCHE ELEMENTOR (TÍTULOS)
   ----------------------------- */
#uw-app-wrapper h1#page-title {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
  color: var(--text-main) !important;
}

#uw-app-wrapper p#page-subtitle {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  margin: 5px 0 0 0 !important;
  font-weight: 400 !important;
}

/* -----------------------------
   DASHBOARD
   ----------------------------- */
#uw-app-wrapper .dashboard-welcome { margin-bottom: 30px; }

#uw-app-wrapper .welcome-title {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 5px;
}

#uw-app-wrapper .welcome-subtitle {
  color: var(--text-muted);
  font-size: 0.95em;
}

#uw-app-wrapper .section-header {
  margin: 30px 0 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

#uw-app-wrapper .section-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text-main);
}

/* -----------------------------
   GRID DASHBOARD
   ----------------------------- */
#uw-app-wrapper .monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 10px;
}

#uw-app-wrapper .monitor-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

#uw-app-wrapper .monitor-card:hover {
  transform: translateY(-5px);
  border-color: var(--secondary);
}

#uw-app-wrapper .monitor-info { z-index: 2; }

#uw-app-wrapper .monitor-context {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 600;
}

#uw-app-wrapper .monitor-doc {
  font-size: 1.1em;
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 5px;
}

#uw-app-wrapper .monitor-count {
  font-size: 2.5em;
  font-weight: 700;
  color: var(--secondary);
  line-height: 1;
}

#uw-app-wrapper .monitor-icon-bg {
  position: absolute;
  right: -10px;
  bottom: -10px;
  font-size: 80px;
  color: var(--text-main);
  opacity: 0.05;
  transform: rotate(-15deg);
  z-index: 1;
}

/* -----------------------------
   LISTAS
   ----------------------------- */
#uw-app-wrapper .expiration-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#uw-app-wrapper .expiration-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.2s;
}

#uw-app-wrapper .expiration-card:hover { border-color: var(--text-muted); }

#uw-app-wrapper .exp-info { display: flex; flex-direction: column; }

#uw-app-wrapper .exp-name {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--text-main);
}

#uw-app-wrapper .exp-location {
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: 2px;
}

#uw-app-wrapper .exp-status {
  display: flex;
  align-items: center;
  gap: 15px;
}

#uw-app-wrapper .exp-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 6px;
}

#uw-app-wrapper .exp-badge.critical {
  background: var(--danger);
  color: #fff;
  animation: pulse-red 2s infinite;
}

#uw-app-wrapper .exp-badge.warning {
  background: var(--warning);
  color: #000;
}

#uw-app-wrapper .exp-badge.safe {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

#uw-app-wrapper .exp-date {
  font-family: monospace;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* -----------------------------
   SHORTCUTS
   ----------------------------- */
#uw-app-wrapper .shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

#uw-app-wrapper .shortcut-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  transition: 0.2s;
  font-weight: 500;
}

#uw-app-wrapper .shortcut-btn:hover {
  border-color: var(--primary);
  color: var(--text-main);
  transform: translateY(-2px);
}

/* -----------------------------
   BUSCADOR
   ----------------------------- */
#uw-app-wrapper .global-search {
  width: 100%;
  padding: 18px 20px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 12px;
  font-size: 1.1em;
  transition: 0.3s;
  margin-bottom: 20px;
  font-family: inherit;
}

#uw-app-wrapper .global-search:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 20px rgba(29, 175, 215, 0.15);
}

/* -----------------------------
   TABLAS
   ----------------------------- */
#uw-app-wrapper .table-responsive {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

#uw-app-wrapper .table-responsive th {
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8em;
  text-transform: uppercase;
}

#uw-app-wrapper .table-responsive td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* -----------------------------
   BADGES
   ----------------------------- */
#uw-app-wrapper .date-badge {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  font-family: var(--font-family) !important;;
  font-weight: 700;
  background: var(--badge-bg);
  color: var(--badge-color);
  border: 1px solid var(--badge-border);
  transition: 0.3s;
}

#uw-app-wrapper .date-soon {
  background: var(--warning) !important;
  color: #000 !important;
  border-color: var(--warning) !important;
}

#uw-app-wrapper .date-today {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
  animation: pulse-red 2s infinite;
}

#uw-app-wrapper .date-expired {
  background: #555 !important;
  color: #ccc !important;
  border-color: #444 !important;
  opacity: 0.7;
}

/* -----------------------------
   BUSCADOR (RESULTADOS)
   ----------------------------- */
#uw-app-wrapper #search-results {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

#uw-app-wrapper .search-full-card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--secondary);
  animation: fadeUp 0.3s ease-out;
}

#uw-app-wrapper .search-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

#uw-app-wrapper .search-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

#uw-app-wrapper .search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--bg-input);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.02);
}

#uw-app-wrapper .search-label {
  font-size: 0.75em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

#uw-app-wrapper .search-value {
  font-size: 0.95em;
  color: var(--text-main);
  word-break: break-word;
  font-weight: 500;
}

/* -----------------------------
   SETTINGS & MODALS
   ----------------------------- */
#uw-app-wrapper .settings-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 25px;
  padding-bottom: 10px;
}

#uw-app-wrapper .tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
  padding-bottom: 5px;
  border-bottom: 3px solid transparent;
}

#uw-app-wrapper .tab-btn.active {
  color: var(--text-main);
  border-bottom-color: var(--primary);
}

#uw-app-wrapper .tab-content {
  display: none;
  animation: fadeUp 0.3s ease-out;
}

#uw-app-wrapper .tab-content.active {
  display: block;
}

#uw-app-wrapper .settings-container {
  background: var(--bg-card);
  padding: 30px;
  border-radius: 16px;
  border: 1px solid var(--border);
}

#uw-app-wrapper .form-group {
  margin-bottom: 20px;
}

#uw-app-wrapper .form-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.9em;
  margin-bottom: 8px;
  font-weight: 500;
}

#uw-app-wrapper .form-ctrl {
  width: 100%;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 8px;
  font-family: inherit;
  transition:0.2s;
}

#uw-app-wrapper .form-ctrl:focus {
  border-color: var(--secondary);
}

#uw-app-wrapper .range-ctrl {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 5px;
  outline: none;
  appearance: none;
  margin-top: 5px;
}

#uw-app-wrapper .range-ctrl::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--secondary);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
  border: 2px solid #fff;
}

/* -----------------------------
   BACKUP CARDS
   ----------------------------- */
#uw-app-wrapper .backup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

#uw-app-wrapper .backup-card {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  background: var(--bg-input);
  color: var(--text-muted);
}

#uw-app-wrapper .backup-card:hover {
  border-color: var(--primary);
  color: var(--text-main);
  background: var(--bg-card);
  transform: translateY(-3px);
}

#uw-app-wrapper .backup-icon {
  font-size: 3em;
  margin-bottom: 15px;
  color: var(--secondary);
}

#uw-app-wrapper .backup-title {
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 5px;
}

/* -----------------------------
   MODALES
   ----------------------------- */
#uw-app-wrapper .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s;
}

#uw-app-wrapper .modal-window {
  width: 650px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  animation: modalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#uw-app-wrapper .modal-header,
#uw-app-wrapper .modal-actions {
  padding: 20px 25px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#uw-app-wrapper .modal-actions {
  border-top: 1px solid var(--border);
  border-bottom: none;
  justify-content: flex-end;
  gap: 15px;
  background: var(--bg-input);
  border-radius: 0 0 16px 16px;
}

#uw-app-wrapper .modal-content {
  padding: 25px;
  overflow-y: auto;
}

/* -----------------------------
   SIDE PANEL (Historial)
   ----------------------------- */
#uw-app-wrapper .side-panel {
  position: fixed;
  top: 0;
  right: -350px;
  width: 320px;
  height: 100%;
  background: var(--bg-input);
  border-left: 1px solid var(--border);
  z-index: 1500;
  transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0,0,0,0.3);
}

#uw-app-wrapper .side-panel.active {
  right: 0;
}

#uw-app-wrapper .panel-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#uw-app-wrapper .panel-body {
  padding: 20px;
  overflow-y: auto;
}

/* ===== Historial - Título independiente ===== */
#uw-app-wrapper .historial-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
}

#uw-app-wrapper .historial-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* -----------------------------
   BOTONES
   ----------------------------- */
#uw-app-wrapper .btn-primary {
  background: var(--primary);
  color: #000;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

#uw-app-wrapper body.light-mode .btn-primary {
  color: #fff;
}

#uw-app-wrapper .btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

#uw-app-wrapper body.light-mode .btn-secondary {
  color: #000;
}

#uw-app-wrapper .btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

/* -----------------------------
   ICON GRID
   ----------------------------- */
#uw-app-wrapper .icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--bg-input);
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

#uw-app-wrapper .icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 20px;
  transition: 0.2s;
}

#uw-app-wrapper .icon-option.selected {
  background: rgba(188, 191, 3, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

/* -----------------------------
   NUEVO DOCUMENTO
   ----------------------------- */
#uw-app-wrapper .new-doc-btn {
  height: 180px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--border);
  background: transparent !important;
  cursor: pointer;
  transition: 0.3s ease;
}

#uw-app-wrapper .new-doc-btn:hover {
  border-color: var(--primary);
  background: rgba(188, 191, 3, 0.05) !important;
}

#uw-app-wrapper .new-doc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#uw-app-wrapper .new-doc-content i {
  font-size: 40px;
  color: var(--primary);
}

#uw-app-wrapper .new-doc-content span {
  font-weight: 600;
  font-size: 0.9em;
  color: var(--text-muted);
}

/* -----------------------------
   DOCUMENT CARDS
   ----------------------------- */
#uw-app-wrapper .doc-item-card {
  position: relative;
  height: 180px;
  cursor: pointer;
  padding: 25px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-left: 4px solid var(--secondary);
}

#uw-app-wrapper .doc-icon {
  font-size: 30px;
  color: var(--secondary);
  margin-bottom: 20px;
}

#uw-app-wrapper .doc-name {
  font-weight: 700;
  font-size: 1.1em;
  color: var(--text-main);
  margin-bottom: 5px;
}

#uw-app-wrapper .doc-meta {
  font-size: 0.85em;
  color: var(--text-muted);
}

#uw-app-wrapper .delete-doc-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 8px !important;
  font-size: 0.8em;
}

/* -----------------------------
   PARCHE: modo claro para tarjetas
   ----------------------------- */
body.light-mode #uw-app-wrapper .monitor-card,
body.light-mode #uw-app-wrapper .expiration-card,
body.light-mode #uw-app-wrapper .search-full-card {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* -----------------------------
   ICONS FONT AWESOME (seguro)
   ----------------------------- */
#uw-app-wrapper i {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.brand-logo-login {
    width: 120px;      /* Ajusta al tamaño que quieras */
    height: auto;
    margin-bottom: 15px;
    display: inline-block;
    object-fit: contain;
}

/* ==================================================
   BLOQUE DE ESTILOS MODERNOS (GLASSMORPHISM & GLOW)
   ================================================== */

/* 1. Sistema de Fechas Ultra Moderno */
#uw-app-wrapper .date-badge {
    padding: 5px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.72em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#uw-app-wrapper .date-badge.safe {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#uw-app-wrapper .date-badge.warning {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#uw-app-wrapper .date-badge.critical {
    background: rgba(231, 76, 60, 0.2);
    color: #ff7675;
    border: 1px solid rgba(231, 76, 60, 0.5);
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.2);
}

/* 2. Animación de Pulsación "Respiración" */
#uw-app-wrapper .date-badge.pulse {
    animation: glass-pulse 2.5s infinite ease-in-out;
}

@keyframes glass-pulse {
    0% { background: rgba(231, 76, 60, 0.2); transform: scale(1); }
    50% { background: rgba(231, 76, 60, 0.35); transform: scale(1.05); }
    100% { background: rgba(231, 76, 60, 0.2); transform: scale(1); }
}

/* 3. Efecto "Luz" en el Primer Campo del Buscador */
#uw-app-wrapper .search-card-grid .search-field:first-child {
    grid-column: 1 / -1;
    background: linear-gradient(90deg, rgba(188, 191, 3, 0.1), transparent);
    padding: 12px;
    border-radius: 10px;
    border-left: 4px solid var(--primary);
    margin-bottom: 5px;
}

#uw-app-wrapper .search-card-grid .search-field:first-child .search-value {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--primary);
}

/* 4. Parche de Contraste para Modo Claro */
body.light-mode #uw-app-wrapper .search-label { 
    color: var(--text-muted) !important; 
}

body.light-mode #uw-app-wrapper .search-value:not(.date-badge) { 
    color: #1a1a1a !important; 
}

body.light-mode .date-badge.safe { color: #1e8449; background: rgba(46, 204, 113, 0.2); }
body.light-mode .date-badge.warning { color: #d35400; background: rgba(243, 156, 18, 0.2); }
body.light-mode .date-badge.critical { color: #c0392b; background: rgba(231, 76, 60, 0.25); }

/* ==================================================
   DISEÑO MODERNO DE CABECERA (ACORDEÓN)
   ================================================== */

/* 1. Contenedor principal del grupo de resultados */
#uw-app-wrapper .search-accordion-group {
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 5px solid var(--secondary); /* Resalte lateral moderno */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 2. Cabecera con distribución responsiva (Flecha a la derecha) */
#uw-app-wrapper .accordion-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between; /* Empuja la flecha al extremo derecho */
    align-items: center;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
    transition: all 0.3s ease;
}

#uw-app-wrapper .accordion-header:hover {
    background: rgba(29, 175, 215, 0.05); /* Color secundario sutil al pasar el mouse */
}

/* 3. Título (Icono + Texto + Contador) */
#uw-app-wrapper .accordion-title {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre icono y texto */
    font-weight: 700;
    color: var(--text-main);
    flex: 1; /* Permite que el título ocupe el espacio necesario sin empujar la flecha */
}

#uw-app-wrapper .accordion-title i {
    font-size: 1.2em;
    color: var(--secondary);
}

/* 4. Badge del contador (El número de resultados) */
#uw-app-wrapper .accordion-count {
    background: var(--bg-input);
    color: var(--secondary);
    font-size: 0.75em;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    margin-left: 10px;
}

/* 5. Icono de la flecha (Totalmente a la derecha) */
#uw-app-wrapper .accordion-icon {
    font-size: 0.9em;
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Rotación de la flecha cuando está abierto */
#uw-app-wrapper .search-accordion-group.open .accordion-icon {
    transform: rotate(180deg);
    color: var(--primary);
}

/* 6. Cuerpo del resultado (Glassmorphism sutil) */
#uw-app-wrapper .accordion-body {
    display: none !important; /* Controlado por el JS y la clase .open */
    padding: 20px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--border);
}

#uw-app-wrapper .search-accordion-group.open .accordion-body {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

/* --- CORRECCIÓN DE CONTRASTE EN BOTONES (MODO CLARO) --- */
body.light-mode #uw-app-wrapper .btn-secondary {
    color: var(--text-main) !important; /* Cambia el texto a casi negro */
    border-color: var(--border) !important;
    background: rgba(0, 0, 0, 0.05); /* Un fondo sutil para que no se pierda */
}

/* Asegura que los iconos dentro de esos botones también cambien a negro */
body.light-mode #uw-app-wrapper .btn-secondary i {
    color: var(--text-main) !important;
}

/* Efecto hover en modo claro para que se sienta reactivo */
body.light-mode #uw-app-wrapper .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
}

body.light-mode #uw-app-wrapper .btn-secondary:hover i {
    color: var(--secondary) !important;
}

/* --- ESTILOS DASHBOARD COMPACTO (LADO A LADO) --- */

/* Ajuste general de la tarjeta */
#uw-app-wrapper .monitor-card.compact-layout {
    min-height: 140px; /* Altura fija para uniformidad */
    align-items: flex-start;
    padding-right: 10px; 
}

/* Contenedor de la fila de estadísticas */
#uw-app-wrapper .stats-row {
    display: flex;
    align-items: center; /* Alineación vertical centrada */
    gap: 15px; /* Espacio entre los grupos */
    margin-top: 10px;
}

/* Grupos individuales (Numero + Label) */
#uw-app-wrapper .stat-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Números */
#uw-app-wrapper .stat-num {
    font-weight: 800;
    line-height: 1;
    font-family: 'Bebas Neue', sans-serif; /* Si tienes Bebas, si no usa la default */
    font-family: var(--font-family);
}

/* Número Principal (Items) */
#uw-app-wrapper .stat-num.main {
    font-size: 2.5em;
    color: var(--secondary);
}

/* Número Secundario (Suma) */
#uw-app-wrapper .stat-num.highlight {
    font-size: 2.5em; /* Mismo tamaño para simetría */
    color: var(--primary);
}

/* Etiquetas (Items / Cuentas) */
#uw-app-wrapper .stat-lbl {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Línea divisoria vertical elegante */
#uw-app-wrapper .stat-divider {
    width: 1px;
    height: 35px; /* Altura de la línea */
    background: var(--border);
    transform: rotate(10deg); /* Un toque de diseño inclinado */
}

/* Modo claro para la línea divisoria */
body.light-mode #uw-app-wrapper .stat-divider {
    background: #e5e7eb;
}

/* Hacer que las tarjetas del dashboard parezcan botones */
#uw-app-wrapper .monitor-card {
    cursor: pointer;
}

/* --- BARRA DE FILTROS Y ORDENAMIENTO --- */

/* Contenedor de filtros */
.doc-filter-bar {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
}

.doc-filter-bar input,
.doc-filter-bar select {
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-main);
}

.doc-filter-bar select {
    border-right: 1px solid var(--border);
    margin-right: 10px;
    cursor: pointer;
}

/* Encabezados Ordenables */
.table-sortable th {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    position: relative;
}

.table-sortable th:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.sort-icon {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.3;
}

.sort-icon.active {
    opacity: 1;
    color: var(--primary);
}

/* --- BARRA DE HERRAMIENTAS GENERAL --- */
.doc-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
    flex-wrap: wrap; /* Para que se adapte en móviles */
}

/* --- BOTÓN ATRÁS (REDONDO) --- */
.back-btn-aesthetics {
    border: none !important;
    background: var(--bg-input) !important;
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
}

.back-btn-aesthetics:hover {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    transform: translateX(-3px); /* Pequeña animación hacia atrás */
    border-color: var(--secondary) !important;
}

/* --- LA CÁPSULA DEL FILTRO (CONTENEDOR PRINCIPAL) --- */
.filter-capsule {
    flex: 1; 
    max-width: 550px; /* Ancho máximo elegante */
    height: 50px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px; /* Bordes totalmente redondos */
    padding: 4px; /* Espacio interno */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto al usar el filtro */
.filter-capsule:focus-within {
    border-color: var(--secondary);
    box-shadow: 0 4px 20px rgba(29, 175, 215, 0.2); /* Resplandor suave del color secundario */
    transform: translateY(-1px);
}

/* --- PARTE IZQUIERDA: SELECTOR (SCOPE) --- */
.filter-scope-wrapper {
    position: relative;
    height: 100%;
    margin-right: 5px;
}

/* Select real invisible ocupando todo el espacio del botón */
.filter-select-hidden {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Botón visual que simula el select */
.filter-scope-trigger {
    height: 100%;
    background: var(--bg-input);
    padding: 0 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-main);
    transition: background 0.2s;
    border: 1px solid transparent;
}

.filter-scope-wrapper:hover .filter-scope-trigger {
    background: var(--border); /* Se oscurece un poco al pasar el mouse */
}

.filter-scope-trigger i {
    font-size: 0.75em;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- PARTE DERECHA: INPUT DE TEXTO --- */
.filter-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

.filter-input-wrapper i {
    color: var(--text-muted);
    font-size: 1.1em;
    margin-right: 12px;
}

.filter-input-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 1em;
    color: var(--text-main);
    font-family: inherit;
    height: 100%;
}

.filter-input-wrapper input::placeholder {
   color: var(--text-muted);
   opacity: 0.6;
}

/* --- BOTONES DE ACCIÓN (DERECHA) --- */
.doc-actions-group {
    display: flex;
    gap: 10px;
}

/* Estilo especial para el botón AÑADIR */
.btn-add-aesthetic {
    padding-left: 25px !important;
    padding-right: 25px !important;
    height: 42px;
    border-radius: 30px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(188, 191, 3, 0.2); /* Sombra amarilla sutil */
    transition: 0.2s;
}

.btn-add-aesthetic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(188, 191, 3, 0.4);
}

/* Ajuste para Modo Claro */
body.light-mode .filter-capsule {
    background: #fff;
    border-color: #e5e7eb;
}
body.light-mode .filter-scope-trigger {
    background: #f3f4f6;
}

/* --- TARJETAS DASHBOARD COMPACTAS (Lado a Lado) --- */
#uw-app-wrapper .monitor-card.compact-layout {
    min-height: 140px; 
    align-items: flex-start;
    padding-right: 10px; 
    cursor: pointer; /* Manito al pasar el mouse */
}

#uw-app-wrapper .stats-row {
    display: flex;
    align-items: center;
    gap: 15px; 
    margin-top: 10px;
}

#uw-app-wrapper .stat-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#uw-app-wrapper .stat-num {
    font-weight: 800;
    line-height: 1;
    font-family: var(--font-family);
}

#uw-app-wrapper .stat-num.main {
    font-size: 2.5em;
    color: var(--secondary);
}

#uw-app-wrapper .stat-num.highlight {
    font-size: 2.5em; 
    color: var(--primary);
}

#uw-app-wrapper .stat-lbl {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

#uw-app-wrapper .stat-divider {
    width: 1px;
    height: 35px;
    background: var(--border);
    transform: rotate(10deg);
}

/* --- SWITCH INTERRUPTOR MODERNO --- */
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-card); border: 1px solid var(--border); transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--text-muted); transition: .4s; }
input:checked + .slider { background-color: var(--primary); border-color: var(--primary); }
input:checked + .slider:before { transform: translateX(24px); background-color: #000; }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Ajustes Modo Claro */
body.light-mode #uw-app-wrapper .stat-divider { background: #e5e7eb; }
body.light-mode input:checked + .slider:before { background-color: #fff; }

/* Cursor al pasar por la fila */
.draggable-row {
    cursor: grab;
}

/* Estado mientras arrastras (transparencia y borde) */
.draggable-row.dragging {
    opacity: 0.5;
    background: var(--bg-card) !important;
    border: 1px dashed var(--secondary) !important;
    transform: scale(0.98);
}

/* Cursor cuando lo tienes agarrado */
.draggable-row:active {
    cursor: grabbing;
}

/* --- ESTILOS DE SCROLL PERSONALIZADOS --- */

/* Colores por defecto (Modo Oscuro) */
:root {
    --scroll-track: #121212; /* Tu color de fondo oscuro */
    --scroll-thumb: #333333; /* Un gris sutil para la barra */
}

/* Colores cuando se activa Modo Claro */
body.light-mode {
    --scroll-track: #ffffff;
    --scroll-thumb: #cccccc;
}

/* Configuración para Chrome, Edge y Safari */
::-webkit-scrollbar {
    width: 8px;  /* Ancho del scroll vertical */
    height: 8px; /* Alto del scroll horizontal */
}

::-webkit-scrollbar-track {
    background: var(--scroll-track); /* Fondo del scroll */
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 10px;
    /* Truco: un borde transparente crea un efecto de margen */
    border: 2px solid var(--scroll-track); 
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary); /* La barra brilla con tu color primario al pasar el mouse */
}

/* Configuración para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* El cursor es normal cuando está oculto */
/* --- EL CANDADO VISUAL --- */
.password-mask {
    background: rgba(128, 128, 128, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    cursor: default;
    transition: all 0.2s;
    /* Eliminamos cualquier propiedad de 'text-security' aquí */
}

.password-mask.visible {
    background: transparent;
    cursor: pointer;
    text-decoration: underline dotted var(--primary);
}

/* MONITOR DE SINCRONIZACIÓN UNIVERSAL */
#sync-monitor {
    position: fixed;
    bottom: 25px;
    right: 25px;
    padding: 10px 18px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    z-index: 100000;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

.sync-success { background-color: #065f46; color: #ffffff; border-color: #059669 !important; }
.sync-warning { background-color: #92400e; color: #ffffff; border-color: #d97706 !important; }
.sync-error { background-color: #991b1b; color: #ffffff; border-color: #dc2626 !important; animation: pulse-red 2s infinite; }

.dot {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    margin-right: 10px;
}

.sync-success .dot { background-color: #34d399; }
.sync-warning .dot { background-color: #fbbf24; }
.sync-error .dot { background-color: #f87171; }

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* MONITOR DE SINCRONIZACIÓN - DISEÑO FINAL CONSOLIDADO */
#sync-monitor {
    position: fixed;
    bottom: 25px;
    right: 25px;
    padding: 10px 18px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    z-index: 100000;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
    border: 1px solid transparent;
    min-width: 170px; /* Espacio extra para que la fecha no lo mueva */
}

/* Contenedor de información (Nombre y Hora) */
.sync-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

/* Estilo para la fecha/hora de sincronización */
#sync-time {
    font-size: 8.5px;
    text-transform: uppercase;
    opacity: 0.7; /* Un poco más visible que antes */
    margin-top: 2px;
    letter-spacing: 0.5px;
    font-weight: 400;
}

/* Dot (Punto de estado) */
.dot {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    margin-right: 12px;
}

/* Estados de Color */
.sync-success { background-color: #065f46; color: #ffffff; border-color: #059669 !important; }
.sync-warning { background-color: #92400e; color: #ffffff; border-color: #d97706 !important; }
.sync-error { background-color: #991b1b; color: #ffffff; border-color: #dc2626 !important; animation: pulse-red 2s infinite; }

.sync-success .dot { background-color: #34d399; }
.sync-warning .dot { background-color: #fbbf24; }
.sync-error .dot { background-color: #f87171; }

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.exp-field-tag {
    font-size: 0.75em;
    color: var(--primary);
    font-weight: 700;
    background: rgba(var(--primary-rgb), 0.1); /* Si tienes definida la variable RGB */
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}


#sync-text {
    font-size: 0.85em !important;
    font-weight: 700 !important;
}

/* Arreglo Correo en Alertas */
.exp-name {
    white-space: normal !important;
    word-break: break-all !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

.expiration-card {
    align-items: center !important;
    min-height: 70px !important;
}

/* Contenedor con Scroll Estético */
.expiration-scroll-container::-webkit-scrollbar {
    width: 4px;
}
.expiration-scroll-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

/* Tarjetas más compactas para ahorrar espacio */
.mini-card {
    background: var(--bg-input);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.2s;
}

.mini-card:hover {
    transform: translateX(5px);
    background: var(--border);
}

/* Título de la sección con contador */
.alert-count-badge {
    background: var(--primary);
    color: #000;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
}
.expiration-list::-webkit-scrollbar {
    width: 5px;
}
.expiration-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}
/* GRID DEL CONTENEDOR PRINCIPAL */
.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 15px !important;
}

/* TARJETA HORIZONTAL (CONTENEDOR) */
.monitor-card.horizontal-layout {
    display: grid !important;
    /* Definimos 3 columnas: Icono (50px) | Texto (Flexible) | Datos (Auto) */
    grid-template-columns: 50px 1fr auto !important;
    align-items: center !important;
    padding: 12px 15px !important;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    min-height: auto !important; /* Reseteamos altura vieja */
}

.monitor-card.horizontal-layout:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

/* COLUMNA 1: CAJA DEL ICONO */
.card-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05); /* Fondo sutil */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2em;
}

/* COLUMNA 2: TEXTO */
.card-text-box {
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.card-service {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.card-doc {
    font-size: 1em;
    font-weight: 700;
    color: var(--text-main);
}

/* COLUMNA 3: ESTADÍSTICAS (PÍLDORAS) */
.card-stats-box {
    display: flex;
    flex-direction: column; /* Uno encima del otro para orden */
    align-items: flex-end; /* Pegados a la derecha */
    gap: 4px;
}

.stat-pill {
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75em;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
}

.stat-pill.main { color: var(--text-main); }
.stat-pill.money { 
    color: var(--primary); 
    background: rgba(var(--primary-rgb), 0.1); /* Si tienes RGB, si no usa transparente */
    border-color: var(--primary);
    font-weight: 700;
}

.stat-val { font-size: 1.1em; font-weight: 800; }
.stat-type { font-size: 0.8em; opacity: 0.7; }

/* === MODO EDICIÓN DASHBOARD === */

/* Contenedor Grid en modo edición */
.monitor-grid.editing-mode {
    /* Bloquea la selección de texto para que no estorbe al arrastrar */
    user-select: none !important;
    -webkit-user-select: none;
}

/* Las tarjetas en modo edición */
.monitor-grid.editing-mode .monitor-card {
    cursor: grab !important; /* Manita abierta */
    border: 1px dashed var(--primary) !important; /* Indicador visual de edición */
    transform: scale(0.98); /* Se hacen un pelín más pequeñas */
    background: var(--bg-input); /* Oscurecer un poco */
}

.monitor-grid.editing-mode .monitor-card:active {
    cursor: grabbing !important; /* Manita cerrada al agarrar */
}

/* Efectos de la librería Sortable */
.sortable-ghost {
    opacity: 0.4;
    background: rgba(var(--primary-rgb), 0.1);
    border: 2px dashed var(--primary);
}

.sortable-chosen {
    box-shadow: 0 15px 30px rgba(0,0,0,0.3) !important;
    transform: scale(1.05) !important;
    z-index: 999;
}

/* BOTÓN DE ORGANIZAR (LIMPIO Y DEL SISTEMA) */
.btn-text-icon {
    /* Forzamos la limpieza de estilos heredados */
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Tipografía y Color del Sistema */
    color: var(--text-muted) !important;
    font-family: var(--font-family) !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    
    /* Estructura */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important; /* Quita márgenes raros */
    text-transform: none !important; /* Evita que Elementor lo ponga todo mayúscula */
}

/* AL PASAR EL MOUSE (Efecto elegante) */
.btn-text-icon:hover {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.1) !important; /* Fondo sutil del color de tu marca */
    transform: translateY(-1px); /* Un pequeño "saltito" */
}

/* AL HACER CLICK (Efecto hundido) */
.btn-text-icon:active {
    transform: translateY(1px);
    opacity: 0.8;
}

/* AJUSTE DEL ICONO INTERNO */
.btn-text-icon i {
    font-size: 1.1em;
    pointer-events: none; /* Para que no interfiera en el click */
}

/* SELECTOR DE ESTATUS */
.status-select {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    outline: none;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
}
.status-select.active {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}
.status-select.inactive {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.status-select:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

/* ==================================================
   ESTILOS DEL INSPECTOR Y OPTIMIZACIÓN VISUAL (FINAL)
   ================================================== */

/* --- 1. INSPECTOR (SIDEBAR DE DETALLES) --- */
.inspector-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); 
    z-index: 19000; opacity: 0; pointer-events: none; transition: 0.3s;
    backdrop-filter: blur(3px);
}
.inspector-backdrop.active { opacity: 1; pointer-events: all; }

.inspector-grid {
    display: flex; flex-direction: column; gap: 15px;
}
.inspector-item {
    background: var(--bg-input); padding: 12px; border-radius: 8px; border: 1px solid var(--border);
}
.inspector-label {
    font-size: 0.75em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 5px; font-weight: 700;
}

/* Valores en el Sidebar (Estilo Interactivo) */
.inspector-val {
    font-size: 1em; 
    color: var(--text-main); 
    word-wrap: break-word; 
    line-height: 1.4;
    
    /* Interactividad para copiar */
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px 10px; 
    border-radius: 6px;
    border: 1px solid transparent;
}

.inspector-val:hover {
    background: rgba(29, 175, 215, 0.1); 
    color: var(--secondary);
    border-color: rgba(29, 175, 215, 0.3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Excepción: No poner cursor/hover extra en badges de fecha dentro del inspector */
.inspector-val .date-badge {
    cursor: pointer; 
}


/* --- 2. OPTIMIZACIÓN DE TABLA (SHRINK-WRAP) --- */
.table-responsive {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Fundamental: el contenido dicta el ancho */
}

/* El truco del 1%: Fuerza a la columna a encogerse hasta tocar el texto */
.table-responsive th, 
.table-responsive td {
    white-space: nowrap; 
    width: 1%; 
    padding: 8px 12px; 
    vertical-align: middle;
}

/* Excepción: La columna de acciones se queda a la derecha */
.table-responsive th:last-child, 
.table-responsive td:last-child {
    width: 1%; 
    text-align: right;
    max-width: none;
}

/* Ajuste para que los badges no rompan el layout */
.table-responsive td span.date-badge, 
.table-responsive td select.status-select {
    display: inline-block;
}


/* --- 3. TEXTO COPIABLE (ESTILO CAJA UNIFICADO) --- */
/* Esta clase se usa tanto en la tabla como donde quieras ese efecto */
.text-copyable {
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Dimensiones de la "Cajita" */
    padding: 4px 8px; 
    border-radius: 6px;
    
    /* Borde transparente por defecto */
    border: 1px solid transparent; 
    
    display: inline-block; 
    max-width: 250px; /* Límite de seguridad para textos kilométricos */
    
    /* Corte elegante del texto */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Efecto Hover: Fondo suave + Color Secundario */
.text-copyable:hover {
    background: rgba(29, 175, 215, 0.1); /* Fondo Azulito suave */
    color: var(--secondary);              /* Texto Azul Cyan */
    border-color: rgba(29, 175, 215, 0.3); /* Borde sutil */
    transform: translateY(-1px);          /* Pequeño efecto de elevación */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


/* --- 4. BOTONES (LIMPIEZA ANTI-ELEMENTOR) --- */

/* Botón Cerrar Sidebar */
#inspector-sidebar .close-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important; 
    color: var(--text-muted) !important;
    font-size: 1.4em !important;
    cursor: pointer !important;
    padding: 5px !important;
    width: 30px; height: 30px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s !important;
    border-radius: 50%;
}

#inspector-sidebar .close-btn:hover {
    color: var(--danger) !important;
    background: rgba(239, 68, 68, 0.1) !important;
    transform: rotate(90deg); 
}

/* Botón Ojito (Tabla) */
.btn-eye {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-muted) !important; 
    padding: 6px 8px !important;
    font-size: 1.1em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 6px;
    margin-right: 5px;
}

.btn-eye:hover {
    background: rgba(255, 255, 255, 0.1) !important; 
    color: var(--text-main) !important; 
    transform: scale(1.1);
}

/* ==================================================
   UNIFICACIÓN DE BOTONES DE ACCIÓN (ESTILO "CLEAN")
   ================================================== */

/* 1. ESTILO BASE (Invisible y limpio para TODOS los botones de la última columna) */
.table-responsive td:last-child button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important; /* Mata sombras de Elementor */
    padding: 6px 9px !important; /* Un poco más de área de click */
    font-size: 1.1em !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    margin: 0 2px !important; /* Separación sutil entre ellos */
    
    /* Opacidad por defecto para que no pesen visualmente */
    opacity: 0.8; 
}

/* 2. HOVER GENÉRICO (Efecto de elevación y fondo) */
.table-responsive td:last-child button:hover {
    opacity: 1;
    transform: translateY(-2px) scale(1.1); /* "Salta" hacia arriba */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

/* 3. COLORES ESPECÍFICOS AL PASAR EL MOUSE */

/* Ojito y Editar (Se iluminan en Blanco/Gris Claro) */
.table-responsive td:last-child button[title*="Ver"],
.table-responsive td:last-child button[title*="Editar"] {
    color: var(--text-muted) !important;
}
.table-responsive td:last-child button[title*="Ver"]:hover,
.table-responsive td:last-child button[title*="Editar"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* WhatsApp (Se ilumina en Verde) */
.table-responsive td:last-child button[title*="WhatsApp"] {
    color: #25D366 !important;
}
.table-responsive td:last-child button[title*="WhatsApp"]:hover {
    background: rgba(37, 211, 102, 0.15) !important;
    color: #25D366 !important;
}

/* Duplicar (Se ilumina en Cyan/Secundario) */
.table-responsive td:last-child button[title*="Duplicar"] {
    color: var(--secondary) !important;
}
.table-responsive td:last-child button[title*="Duplicar"]:hover {
    background: rgba(29, 175, 215, 0.15) !important;
    color: var(--secondary) !important;
}

/* Borrar (Se ilumina en Rojo Peligro) */
.table-responsive td:last-child button[title*="Borrar"] {
    color: var(--danger) !important;
}
.table-responsive td:last-child button[title*="Borrar"]:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger) !important;
}

/* --- ACCIONES DE DOCUMENTO (Botones Mini) --- */
.doc-actions-wrapper {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 5px;
    z-index: 10; /* Asegura que esté por encima del click de la tarjeta */
}

.btn-action-mini {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.2); /* Fondo semitransparente oscuro */
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

/* Hover General */
.btn-action-mini:hover {
    background: var(--bg-input);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Hover específico para Borrar */
.btn-action-mini.btn-delete:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Ajuste para Modo Claro */
body.light-mode .btn-action-mini {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0,0,0,0.05);
}
body.light-mode .btn-action-mini:hover {
    background: #fff;
}

/* --- TABLA PROFESIONAL (TÉCNICA DE LA CORTINA) --- */

.table-container-pro {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    height: 70vh; /* Altura fija */
    overflow: auto; /* Scroll */
    position: relative;
    padding: 0 !important;
    transform: translateZ(0); 
    will-change: scroll-position;
}

.table-container-pro table {
    width: 100%;
    border-collapse: separate; /* Mejor para sticky que collapse */
    border-spacing: 0;
    margin: 0 !important; /* Elementor a veces mete margen aquí */
    border: none;
}

/* CABECERA PEGAJOSA */
.table-container-pro thead th {
    position: sticky;
    top: 0;
    z-index: 20; /* Encima del contenido */
    background-color: var(--bg-card);
    
    /* Borde inferior sólido */
    border-bottom: 2px solid var(--border);
    
    padding: 15px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    border-top: 1px solid var(--bg-card);
}
.table-container-pro thead th::before {
    content: '';
    position: absolute;
    top: -5px; /* Sube 5px hacia arriba */
    left: 0;
    width: 100%;
    height: 5px; /* Altura del parche */
    background-color: var(--bg-card); /* Mismo color del fondo */
    z-index: 21; /* Encima de la propia cabecera */
}

/* CUERPO */
.table-container-pro tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-card);
    /* Aseguramos que el texto pase POR DEBAJO de la cabecera */
    z-index: 1; 
    position: relative;
}

/* Ajuste de esquinas del contenedor (visual) */
.table-container-pro thead th:first-child { border-top-left-radius: 10px; }
.table-container-pro thead th:last-child { border-top-right-radius: 10px; }

/* --- ESTILOS PARA EL ESTADO PENDIENTE --- */

/* 1. Color del selector (el cuadrito dentro de la tabla) */
.status-select.pending {
    background-color: #fff7ed !important; /* Naranja muy claro */
    color: #c2410c !important;           /* Texto naranja quemado */
    border: 1px solid #fdba74 !important;
}

/* Color para filas PENDIENTES (Amarillo/Dorado) */
.row-pending td {
    background-color: rgba(188, 191, 3, 0.15) !important; /* El color de tu marca */
    border-bottom: 1px solid rgba(188, 191, 3, 0.3);
}

/* Color para filas INACTIVAS (Rojo) */
.row-inactive td {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

/* Opcional: una barrita lateral para que resalte más */
.row-pending td:first-child {
    border-left: 4px solid var(--primary) !important;
}
.row-inactive td:first-child {
    border-left: 4px solid #ef4444 !important;
}

/* === NUEVO DISEÑO: TARJETAS DE RECURSOS (SECCIONES) === */

/* Contenedor de la rejilla */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Más anchas, menos altas */
    gap: 15px;
    padding-bottom: 40px;
}

/* La Tarjeta Base (Horizontal) */
.resource-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 15px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--primary);
}

/* Estilo Específico para CARPETAS */
.resource-card.is-folder {
    border-left: 4px solid var(--primary); /* El toque diferenciador */
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 0%, var(--bg-card) 40%);
}

/* Estilo Específico para DOCUMENTOS */
.resource-card.is-doc {
    border-left: 4px solid transparent; /* Sin borde de color, más limpio */
}

/* Estilo para Botones de "Nuevo..." */
.resource-card.is-new {
    border: 1px dashed var(--text-muted);
    background: transparent;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
}
.resource-card.is-new:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

/* Icono Principal (Izquierda) */
.resource-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-main);
    font-size: 1.2em;
    margin-right: 15px;
    flex-shrink: 0;
}

.is-folder .resource-icon-box {
    background: rgba(255, 200, 0, 0.15); /* Fondo amarillento sutil */
    color: #f59e0b; /* Color Carpeta */
}

/* Información de Texto (Centro) */
.resource-info {
    flex-grow: 1;
    overflow: hidden;
}

.resource-title {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.resource-meta {
    font-size: 0.75em;
    color: var(--text-muted);
}

/* Grupo de Botones (Derecha) */
.resource-actions {
    display: flex;
    gap: 5px;
    opacity: 0.6; /* Sutil por defecto */
    transition: 0.2s;
}

.resource-card:hover .resource-actions {
    opacity: 1; /* Visibles al pasar el mouse */
}

.btn-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    transition: 0.2s;
}

.btn-icon-sm:hover {
    background: var(--bg-input);
    color: var(--primary);
}

.btn-icon-sm.delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* === NUEVA BARRA DE HERRAMIENTAS (TOOLBAR) === */
.resources-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar-right {
    display: flex;
    gap: 10px;
}

/* Botones de la Toolbar (Más compactos y elegantes) */
.btn-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

.btn-toolbar:hover {
    border-color: var(--primary);
    background: var(--bg-input);
    transform: translateY(-1px);
}

.btn-toolbar.primary {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--primary);
}

.btn-toolbar.back {
    color: var(--text-muted);
}

/* === CORRECCIÓN VISUAL DE DOCUMENTOS === */

/* Carpetas: Raya AMARILLA (Primary) */
.resource-card.is-folder {
    border-left: 4px solid var(--primary);
}

/* Documentos: Raya AZUL (Secondary) - Ahora sí se ve */
.resource-card.is-doc {
    border-left: 4px solid var(--secondary); 
}

/* Ajuste del Grid para que suba un poco */
.resources-grid {
    padding-top: 5px;
}

/* === ESTILOS DRAG & DROP === */

/* Clase que se activa al arrastrar un documento */
.resource-card.is-doc[draggable="true"] {
    cursor: grab;
}
.resource-card.is-doc[draggable="true"]:active {
    cursor: grabbing;
}

/* Efecto visual cuando pasas un archivo sobre una carpeta */
.resource-card.is-folder.drag-over {
    border: 2px dashed var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.15) !important;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
    z-index: 10;
}

/* === MODO ORGANIZACIÓN Y SELECCIÓN === */

/* 1. Checkbox (Círculo) - CORREGIDO PARA QUE NO SE APLASTE */
.card-checkbox {
    width: 22px;       /* Un poco más grande para facilitar el clic */
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;     /* Oculto por defecto (se activa por JS) */
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card);
    
    /* LA CLAVE: Esto evita que se aplaste con textos largos */
    flex-shrink: 0; 
}

/* Estilo cuando está seleccionado */
.resource-card.selected .card-checkbox {
    background: var(--secondary);
    border-color: var(--secondary);
    color: white;
    transform: scale(1.1); /* Pequeño efecto pop */
}

.card-checkbox i {
    display: none;
    font-size: 0.8em;
}
.resource-card.selected .card-checkbox i {
    display: block;
}

/* 2. Comportamiento en MODO NORMAL (Protegido) */
.resource-card.is-doc {
    cursor: pointer; /* Solo clic normal */
    border-left: 4px solid var(--secondary); /* Borde normal */
}

/* 3. Comportamiento en MODO ORGANIZAR (Activo) */
.resource-card.is-doc.organize-active {
    cursor: grab; /* Manita para mover */
    border: 1px dashed var(--border); /* Borde punteado indica "movible" */
    border-left: 4px solid var(--secondary);
    background: rgba(var(--bg-input), 0.3); /* Fondo sutilmente diferente */
}

.resource-card.is-doc.organize-active:hover {
    border-color: var(--primary);
}

.resource-card.is-doc.organize-active:active {
    cursor: grabbing;
}

/* Ocultar acciones individuales en modo organizar para no saturar */
.resource-card.organize-active .resource-actions {
    display: none; 
}

/* Icono de agarre (Grip) */
.drag-handle {
    color: var(--text-muted);
    margin-right: 10px;
    font-size: 1em;
    cursor: grab;
    display: none; /* Oculto por defecto */
}

/* === NUEVOS MONITORES PERSONALIZADOS DASHBOARD === */
.dashboard-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.dashboard-welcome {
    margin-bottom: 0 !important; /* Sobreescribe el margen original para alinearlo */
}
.custom-monitors-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.custom-mini-monitor {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.custom-mini-monitor:hover {
    transform: translateY(-2px);
}
.custom-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}
.custom-mini-data {
    display: flex;
    flex-direction: column;
}
.custom-mini-title {
    font-size: 0.75em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.custom-mini-value {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}
.custom-mini-sub {
    font-size: 0.5em;
    opacity: 0.7;
    font-weight: normal;
    text-transform: none;
    margin-left: 2px;
}

/* === ESTILOS PREMIUM PARA CARPETAS === */
.folder-card {
    cursor: pointer;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Efecto hover interactivo */
.folder-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Línea de acento superior al hacer hover */
.folder-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; 
    height: 4px;
    background: var(--primary);
    opacity: 0;
    transition: 0.3s ease;
}

.folder-card:hover::before {
    opacity: 1;
}

.folder-icon-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.folder-icon-wrapper i {
    font-size: 3.2em;
    color: var(--primary);
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}

.folder-card:hover .folder-icon-wrapper i {
    transform: scale(1.08);
}

.folder-badge {
    background: var(--bg-main);
    color: var(--text-main);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 800;
    border: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.folder-text-area {
    margin-top: auto;
}

.folder-title {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.folder-subtitle {
    font-size: 0.75em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}