/* ========================================================== Pawcitas UI • Sistema de Diseño Global Paleta: #49EDCB (primary) • #0D2E3D (dark) • #598381 (medium) • #F4F2F3 (light) ========================================================== */ /* ===================== */ /* TOKENS / FOUNDATION */ /* ===================== */ :root{ /* Colores marca */ --primary-teal:#49EDCB; --dark-teal:#0D2E3D; --medium-teal:#598381; --light:#F4F2F3; /* Grises */ --gray-50:#f8f9fa; --gray-100:#F4F2F3; --gray-200:#e9ecef; --gray-300:#dee2e6; --gray-400:#ced4da; --gray-500:#adb5bd; --gray-600:#6c757d; --gray-700:#495057; --gray-800:#343a40; --gray-900:#212529; /* Estados */ --success:#28a745; --danger:#dc3545; --warning:#ffc107; --info:#17a2b8; /* Sombras */ --shadow-xs:0 1px 2px rgba(13,46,61,.06); --shadow-sm:0 2px 6px rgba(13,46,61,.10); --shadow-md:0 8px 24px rgba(13,46,61,.18); --shadow-lg:0 16px 40px rgba(13,46,61,.22); /* Radios */ --r-2:6px; --r:10px; --r-lg:16px; --r-xl:24px; /* Transiciones */ --tr-fast:150ms cubic-bezier(.4,0,.2,1); --tr:250ms cubic-bezier(.4,0,.2,1); /* Controles */ --control-h:44px; --control-pad-y:.6rem; --control-pad-x:.875rem; /* Altura barra superior */ --topbar-h:64px; } /* ===================== */ /* APP TOPBAR (legacy) */ /* ===================== */ /* (La barra moderna usa .pc-nav; esto queda por compatibilidad si en otra vista aún usan .app-topbar) */ .app-topbar{ position:sticky; top:0; z-index:1000; height:var(--topbar-h); min-height:var(--topbar-h); background:#192735; display:flex; align-items:center; justify-content:space-between; padding:0 20px; box-shadow:0 2px 10px rgba(0,0,0,.12); } /* ===================== */ /* RESET / BASE */ /* ===================== */ *, *::before, *::after{ box-sizing:border-box; } html,body{ height:100%; } html{ scroll-padding-top:0; } /* evita offset fantasma con anchors */ body{ margin:0; /* <- elimina margen por defecto del body */ padding-top:0 !important; /* <- FIX: no empujar contenido (nav es sticky, no fixed) */ display:flex; flex-direction:column; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:var(--gray-900); background: radial-gradient(1200px 1200px at -10% -20%, rgba(73,237,203,.08) 0%, transparent 60%), radial-gradient(1000px 1000px at 110% 10%, rgba(89,131,129,.08) 0%, transparent 60%), linear-gradient(135deg, var(--gray-50) 0%, var(--light) 100%); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Evita colapso de márgenes del primer elemento bajo */ body > header:first-child, body > div:first-child, body > main:first-child{ margin-top:0 !important; } /* Accesibilidad */ :where(a,button,input,select,textarea):focus-visible{ outline:3px solid rgba(73,237,203,.6); outline-offset:2px; } ::selection{ background:var(--primary-teal); color:var(--dark-teal); } /* Utilidades layout */ .container-max{ max-width:1400px; margin-inline:auto; padding-inline:1rem; } .flex-1{ flex:1 1 auto; } .hide-sm{ display:block; } @media (max-width:768px){ .hide-sm{ display:none !important; } } .show-sm{ display:none; } @media (max-width:768px){ .show-sm{ display:block !important; } } /* ===================== */ /* HERO (encabezado) */ /* ===================== */ .app-hero{ position:relative; color:#fff; background:linear-gradient(135deg, var(--dark-teal) 0%, var(--medium-teal) 100%); min-height:128px; padding:1.4rem 0 2.2rem; margin:0 0 1.25rem; box-shadow:var(--shadow-lg); overflow:hidden; } .app-hero::before{ content:""; position:absolute; inset:auto -12% -40% auto; width:620px; height:620px; background:radial-gradient(circle, rgba(73,237,203,.14) 0%, transparent 70%); animation:appFloat 22s ease-in-out infinite; z-index:-1; } .app-hero .container-max{ position:relative; z-index:1; } @keyframes appFloat{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-18px) rotate(180deg) } } .app-hero__title{ margin:0 0 .35rem; font-size:2rem; line-height:1.25; font-weight:800; letter-spacing:-.4px; text-shadow:0 2px 8px rgba(0,0,0,.25); } .app-hero__sub{ display:block; margin:0; line-height:1.35; font-weight:300; opacity:.95; filter:drop-shadow(0 1px 0 rgba(0,0,0,.12)); } /* ===================== */ /* TOOLBAR / FILTROS */ /* ===================== */ .toolbar{ background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:1rem; position:sticky; top:1rem; z-index:10; } .toolbar-grid{ display:grid; grid-template-columns:auto 1fr auto auto; gap:.75rem; align-items:center; } @media (max-width:992px){ .toolbar-grid{ grid-template-columns:1fr; } } .view-toggle{ display:flex; gap:.25rem; background:var(--gray-100); border-radius:var(--r); padding:.25rem; } .view-btn{ border:0; background:transparent; color:var(--gray-700); padding:.55rem 1rem; border-radius:var(--r-2); font-weight:700; display:flex; gap:.5rem; align-items:center; transition:var(--tr-fast); cursor:pointer; } .view-btn:hover{ background:#fff; box-shadow:var(--shadow-xs); color:var(--dark-teal); } .view-btn.is-active{ background:#fff; color:var(--dark-teal); box-shadow:var(--shadow-sm); } @media (max-width:768px){ #tableViewBtn{ display:none !important; } } /* ===================== */ /* FORM / CONTROLS */ /* ===================== */ .form-label{ margin-bottom:.45rem; font-weight:600; color:var(--gray-800); } input.form-control, select.form-control, textarea.form-control{ height:var(--control-h); padding:var(--control-pad-y) var(--control-pad-x); line-height:1.25; border:2px solid var(--gray-200); border-radius:var(--r); background:#fff; box-shadow:none; transition:var(--tr); } textarea.form-control{ min-height:calc(var(--control-h) * 2.2); height:auto; line-height:1.35; resize:vertical; } select.form-control{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:2.25rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23598381' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:12px 12px; font-weight:600; color:var(--gray-900); } select.form-control option{ line-height:1.25; } input[type="date"].form-control{ height:var(--control-h); line-height:1.25; padding:var(--control-pad-y) var(--control-pad-x); } input.form-control:focus, select.form-control:focus, textarea.form-control:focus{ border-color:var(--primary-teal); box-shadow:0 0 0 4px rgba(73,237,203,.12); outline:0; } ::placeholder{ color:var(--gray-600); } .select,.filter-select{ padding:.75rem 2.2rem .75rem 1rem; border:2px solid var(--gray-200); background:#fff; border-radius:var(--r); font-weight:700; color:var(--gray-800); appearance:none; min-width:170px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23598381' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; } .select:focus,.filter-select:focus{ border-color:var(--primary-teal); box-shadow:0 0 0 4px rgba(73,237,203,.12); } /* Switch */ .switch{ position:relative; display:inline-block; width:46px; height:26px; } .switch input{ opacity:0; width:0; height:0; } .switch .slider{ position:absolute; inset:0; background:#cfd4da; border-radius:26px; cursor:pointer; transition:var(--tr-fast); } .switch .slider:before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:var(--tr-fast); box-shadow:0 1px 3px rgba(0,0,0,.2); } .switch input:checked + .slider{ background:var(--primary-teal); } .switch input:checked + .slider:before{ transform:translateX(20px); } /* Botones */ .btn-primary-modern{ background:linear-gradient(135deg, var(--medium-teal) 0%, var(--primary-teal) 100%); color:#fff; border:0; padding:.8rem 1.25rem; border-radius:var(--r); font-weight:800; letter-spacing:.4px; display:inline-flex; gap:.5rem; align-items:center; text-decoration:none; transition:var(--tr); } .btn-primary-modern:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color:#fff; } .btn-ghost{ background:#fff; color:var(--dark-teal); border:2px solid var(--gray-200); border-radius:var(--r); padding:.6rem 1rem; font-weight:700; } .btn-ghost:hover{ border-color:var(--primary-teal); } /* ===================== */ /* CARDS / PANELS */ /* ===================== */ .card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); } .card:hover{ box-shadow:var(--shadow-md); } .card-header{ padding:1rem 1.25rem; border-bottom:1px solid var(--gray-200); background:linear-gradient(135deg, var(--gray-50) 0%, #fff 100%); } .card-body{ padding:1.25rem; } .card-footer{ padding:1rem 1.25rem; border-top:1px solid var(--gray-200); background:var(--gray-50); } /* Badges */ .badge-modern{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:20px; font-size:.75rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase; } .badge-info{ background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color:#1565c0; border:1px solid #90caf9; } .badge-success{ background:linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); color:#2e7d32; border:1px solid #a5d6a7; } .badge-warning{ background:linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); color:#e65100; border:1px solid #ffcc80; } .badge-danger{ background:linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); color:#c62828; border:1px solid #ef9a9a; } /* ===================== */ /* TABLES */ /* ===================== */ .table-wrap{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .modern-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; } .modern-table thead{ background:linear-gradient(135deg, var(--dark-teal) 0%, var(--medium-teal) 100%); } .modern-table th{ color:#fff; text-transform:uppercase; letter-spacing:.5px; padding:1rem .9rem; border:0; font-weight:800; font-size:.86rem; } .modern-table td{ padding:1rem .9rem; border-bottom:1px solid var(--gray-200); color:var(--gray-800); vertical-align:middle; } .modern-table tbody tr:hover{ background:rgba(73,237,203,.05); } /* ===================== */ /* LISTAS DE SERVICIO */ /* ===================== */ .service-list{ list-style:none; padding:0; margin:0; } .service-item{ background:linear-gradient(135deg, var(--gray-50) 0%, #fff 100%); border:1px solid var(--gray-200); border-radius:var(--r); padding:.6rem .75rem; margin:.45rem 0; } .service-label{ font-weight:700; color:var(--dark-teal); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; } .service-value{ color:var(--gray-700); display:block; margin-top:.2rem; } .pet-image{ width:60px; height:60px; object-fit:cover; border-radius:var(--r); border:2px solid var(--gray-200); transition:var(--tr-fast); } .pet-image:hover{ transform:scale(1.04); } /* ===================== */ /* GRID CARDS (Bookings) */ /* ===================== */ .cards-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:1rem; } .booking-card{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; position:relative; transition:var(--tr); border:1px solid var(--gray-200); } .booking-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--primary-teal) 0%, var(--medium-teal) 100%); } .booking-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .booking-card-header{ background:linear-gradient(135deg, var(--gray-50) 0%, #fff 100%); padding:1rem 1.1rem; border-bottom:1px solid var(--gray-200); } .booking-card-title{ color:var(--dark-teal); font-size:1.05rem; font-weight:800; margin:0; display:flex; align-items:center; gap:.5rem; } .booking-card-body{ padding:1rem 1.1rem; } .booking-card-footer{ background:var(--gray-50); padding:.85rem 1.1rem; border-top:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; } /* ===================== */ /* ALERTS / NOTICES */ /* ===================== */ .alert-premium{ background:linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border:0; border-left:4px solid var(--warning); border-radius:var(--r); padding:1.1rem; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .alert-modern{ border:0; border-left:4px solid var(--medium-teal); background:linear-gradient(135deg, #eef7f5 0%, #ffffff 100%); color:var(--gray-800); box-shadow:var(--shadow-xs); } .alert-modern.success{ border-left-color:var(--success); } .alert-modern.info{ border-left-color:var(--info); } .alert-modern.warn{ border-left-color:var(--warning); } /* ===================== */ /* LOADING OVERLAY */ /* ===================== */ .loading-overlay{ position:fixed; inset:0; background:rgba(13,46,61,.88); backdrop-filter:blur(6px); z-index:9999; display:none; align-items:center; justify-content:center; } .loading-overlay.active{ display:flex; } .loading-spinner{ width:60px; height:60px; border:4px solid rgba(73,237,203,.2); border-top:4px solid var(--primary-teal); border-radius:50%; animation:pawSpin 1s linear infinite; } @keyframes pawSpin{ to{ transform:rotate(360deg); } } .loading-text{ color:#fff; margin-top:.75rem; font-weight:700; letter-spacing:.4px; } /* ===================== */ /* FOOTER (sticky) */ /* ===================== */ .footer{ margin-top:auto; width:100%; background-color:#192735; color:#fff; text-align:center; padding:1rem; box-shadow:0 -2px 12px rgba(0,0,0,.08); } /* ===================== */ /* RESPONSIVE */ /* ===================== */ .full-details{ display:block; } /* Tabla por defecto en desktop */ .less-details{ display:none; } @media (max-width:768px){ .full-details{ display:none !important; } /* Cards en móvil */ .less-details{ display:block !important; } } /* ===================== */ /* HELPERS */ /* ===================== */ .shadow-sm{ box-shadow:var(--shadow-sm) !important; } .rounded-brand{ border-radius:var(--r-lg); } .folio-badge{ background:var(--primary-teal); color:var(--dark-teal); padding:.22rem .5rem; border-radius:var(--r-2); font-weight:800; font-size:.85rem; } .fade-in{ animation:fadeIn .4s ease-out; } @keyframes fadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } /* ===================== */ /* NAV (icon bar .pc-*) */ /* ===================== */ .pc-nav{ background:#192735; padding:0; position:sticky; /* sticky: ocupa flujo -> NO usar padding-top en body */ top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.12); margin-top:0; /* evita colapsos de margen */ } .pc-nav .pc-wrap{ display:flex; align-items:center; gap:1rem; height:var(--topbar-h); } .pc-nav .pc-brand img{ display:block; /* mantenlo */ height:48px; /* súbelo (44–52px suele verse bien) */ width:auto; /* conserva proporción */ max-height: calc(var(--topbar-h) - 16px); /* evita que desborde la barra */ } .pc-main{ flex:1 1 auto; scroll-behavior:smooth; } .pc-icons{ display:flex; gap:.4rem; align-items:center; justify-content:center; margin:0; padding:0; list-style:none; height:var(--topbar-h); } .pc-item{ position:relative; } .pc-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; min-width:64px; height:var(--topbar-h); color:#cfe6e8; text-decoration:none; font-weight:700; padding:0 .5rem; border-radius:12px; transition:var(--tr-fast); background:transparent !important; box-shadow:none !important; border:0 !important; } .pc-link i{ font-size:1.1rem; line-height:1; } .pc-link span{ font-size:.72rem; letter-spacing:.2px; } .pc-link:hover{ background:rgba(255,255,255,.07) !important; color:#fff; } /* Dropdown */ .pc-item.has-dd .pc-dd{ position:absolute; left:50%; transform:translateX(-50%) translateY(8px); top:calc(100% - 6px); min-width:220px; background:#0f1d29; color:#cfe6e8; border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:var(--shadow-lg); padding:.4rem; display:none; z-index:1001; } .pc-item.has-dd .pc-dd.right{ right:0; left:auto; transform:none; } .pc-item.has-dd:hover .pc-dd, .pc-item.has-dd:focus-within .pc-dd{ display:block; } .pc-dd a{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:10px; color:#cfe6e8; text-decoration:none; white-space:nowrap; transition:var(--tr-fast); } .pc-dd a:hover{ background:rgba(73,237,203,.12); color:#fff; } .pc-dd a i{ width:18px; text-align:center; } .pc-account{ position:relative; margin-left:auto; } .pc-account .pc-link{ min-width:auto; padding:0 .75rem; } /* Burger (mobile) */ .pc-burger{ display:none; border:0; background:transparent; color:#49EDCB; font-size:1.2rem; width:42px; height:42px; border-radius:10px; } .pc-burger:hover{ background:rgba(255,255,255,.07); } @media (max-width:1020px){ .pc-icons{ justify-content:flex-start; overflow:visible; /* ⭐ CAMBIO: de auto a visible */ padding-bottom:.25rem; scrollbar-width:none; } .pc-icons::-webkit-scrollbar{ display:none; } } @media (max-width:760px){ .pc-burger{ display:inline-flex; align-items:center; justify-content:center; } /* ⭐ CONTENEDOR PRINCIPAL DEL MENÚ MÓVIL */ .pc-main{ position:absolute; inset:var(--topbar-h) 0 auto 0; background:#13212d; border-bottom:1px solid rgba(255,255,255,.06); display:none; max-height:calc(100vh - var(--topbar-h)); /* ⭐ Altura máxima hasta el fondo */ overflow-y:auto; /* ⭐ Scroll en TODO el menú, no solo en .pc-icons */ overflow-x:hidden; box-shadow:0 8px 24px rgba(0,0,0,.3); /* ⭐ Mejor sombra */ } .pc-main.open{ display:block; } /* ⭐ LISTA DE ICONOS SIN SCROLL INTERNO */ .pc-icons{ justify-content:flex-start; padding:.6rem .5rem; /* ⭐ Más padding */ height:auto; overflow:visible !important; /* ⭐ CRÍTICO: Sin scroll aquí */ flex-direction:column; /* ⭐ Vertical en móvil */ align-items:stretch; /* ⭐ Items ocupan todo el ancho */ } /* ⭐ ITEMS DE MENÚ EN MÓVIL */ .pc-item{ width:100%; } .pc-link{ width:100%; height:auto; min-height:48px; /* ⭐ Altura mínima para touch */ flex-direction:row; /* ⭐ Horizontal: icono + texto */ justify-content:flex-start; padding:.75rem 1rem; gap:.75rem; border-radius:8px; margin-bottom:.3rem; /* ⭐ Separación entre items */ } .pc-link i{ font-size:1.3rem; } .pc-link span{ font-size:.95rem; text-align:left; } /* ⭐ DROPDOWNS EXPANDIDOS (NO POSICIONADOS ABSOLUTAMENTE) */ .pc-item .pc-dd{ position:static; transform:none; margin:.2rem 0 .5rem 0; border:0; box-shadow:none; background:rgba(0,0,0,.2); /* ⭐ Fondo más oscuro para diferenciar */ border-radius:8px; padding:.4rem; display:none; /* ⭐ Oculto por defecto */ border-left:3px solid var(--primary-teal); /* ⭐ Indicador visual */ } /* ⭐ MOSTRAR DROPDOWN CUANDO EL ITEM TIENE CLASE 'open' */ .pc-item.open .pc-dd{ display:block; } .pc-dd a{ padding:.7rem 1rem; font-size:.9rem; border-radius:6px; } /* ⭐ CUENTA (último item) */ .pc-account{ width:100%; margin-left:0; margin-top:.5rem; border-top:1px solid rgba(255,255,255,.1); padding-top:.5rem; } } /* Radio oculto pero clickeable dentro de la tarjeta */ .vh-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; /* el click va al label contenedor */ } /* feedback visual cuando está seleccionado */ .icon-btn.selected{ border-color:#0D6478; background:#e9f5f7; } /*PAGINACIÓN DE INVENTARIO */ /* ===== Pagination (coherente con look&feel) ===== */ .pagination-meta{ font-weight:600; color: var(--gray-700, #495057); } .pagination-modern .page-item{ margin:.15rem; } .pagination-modern .page-link{ border:2px solid var(--gray-200, #e9ecef); color: var(--dark-teal, #0D2E3D); font-weight:700; border-radius: 999px; padding:.45rem .9rem; background:#fff; transition:.15s ease-in-out; } .pagination-modern .page-link:hover{ text-decoration:none; border-color: var(--medium-teal, #598381); background: var(--gray-100, #F4F2F3); } .pagination-modern .page-item.active .page-link{ color:#fff; border-color: transparent; background: linear-gradient(135deg, var(--dark-teal, #0D2E3D) 0%, var(--medium-teal, #598381) 100%); box-shadow: 0 4px 10px rgba(13,46,61,.15); } .pagination-modern .page-item.disabled .page-link{ color: var(--gray-600, #6c757d); background: var(--gray-100, #F4F2F3); border-color: var(--gray-200, #e9ecef); opacity:.85; } .pagination-modern .page-link:focus{ outline:0; box-shadow: 0 0 0 0.2rem rgba(73,237,203,.35); border-color: var(--primary-teal, #49EDCB); } @media (max-width:576px){ .pagination-modern .page-link{ padding:.4rem .75rem; } } /* Botón de acción (mismo look que Clientes) */ .action-btn{ background: linear-gradient(135deg, var(--dark-teal, #0D2E3D) 0%, var(--medium-teal, #598381) 100%); color:#fff; border:0; padding:.5rem 1rem; border-radius:6px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:.15s; white-space:nowrap; } .action-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(13,46,61,.12); color:#fff; text-decoration:none; } /* ---- Modal Moderno (look&feel Pawcitas) ---- */ .modal-modern{ border:0; border-radius:var(--r-lg, 16px); overflow:hidden; box-shadow:var(--shadow-lg, 0 16px 40px rgba(13,46,61,.22)); } .modal-modern__header{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; background:linear-gradient(135deg, var(--dark-teal,#0D2E3D) 0%, var(--medium-teal,#598381) 100%); color:#fff; position:relative; } .modal-modern__header::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg, var(--primary-teal,#49EDCB) 0%, rgba(255,255,255,.35) 100%); opacity:.85; } .mm-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); flex:0 0 auto; } .mm-icon i{ font-size:1.05rem; color:#fff; } .mm-headings{ display:flex; flex-direction:column; gap:.15rem; } .mm-title{ margin:0; font-weight:800; letter-spacing:.2px; text-shadow:0 1px 6px rgba(0,0,0,.25); font-size:1.15rem; } .mm-sub{ margin:0; opacity:.9; font-weight:500; font-size:.9rem; } .mm-close{ margin-left:auto; border:0; background:transparent; color:#fff; width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; } .mm-close:hover{ background:rgba(255,255,255,.12); } .modal-modern__body{ background:#fff; color:var(--gray-900,#212529); padding:1.1rem 1.2rem; max-height:70vh; overflow:auto; } /* Ajustes genéricos para contenido cargado dentro del body */ .modal-modern__body .table{ background:#fff; border-radius:var(--r,10px); overflow:hidden; border:1px solid var(--gray-200,#e9ecef); } .modal-modern__body .alert{ margin-bottom:0; } .modal-modern__footer{ background:var(--gray-50,#f8f9fa); border-top:1px solid var(--gray-200,#e9ecef); padding:.9rem 1.1rem; display:flex; align-items:center; justify-content:flex-end; gap:.5rem; } /* Estados opcionales (si los usas con JS) */ .modal-modern.mm--success .mm-icon{ background:rgba(40,167,69,.18); box-shadow:inset 0 0 0 2px rgba(40,167,69,.18); } .modal-modern.mm--warn .mm-icon{ background:rgba(255,193,7,.18); box-shadow:inset 0 0 0 2px rgba(255,193,7,.18); } .modal-modern.mm--error .mm-icon{ background:rgba(220,53,69,.18); box-shadow:inset 0 0 0 2px rgba(220,53,69,.18); } /* ═══════════════════════════════════════════════════════════════ FUNCIONES PREMIUM BLOQUEADAS ═══════════════════════════════════════════════════════════════ */ /* Botón bloqueado con estilo visual distintivo */ .premium-feature-locked { position: relative; opacity: 0.7; cursor: not-allowed !important; background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%) !important; border: 2px dashed rgba(102, 126, 234, 0.5) !important; /* ⭐ REMOVIDO: pointer-events: none !important; */ /* Ahora permitimos hover para el tooltip, pero bloqueamos click con JavaScript */ } .premium-feature-locked:hover { opacity: 0.8; transform: none !important; background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%) !important; } /* Badge de corona premium */ .premium-badge { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #8b4513; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); animation: crownPulse 2s ease-in-out infinite; pointer-events: none; /* ⭐ Badge no interfiere con eventos */ } @keyframes crownPulse { 0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); } 50% { transform: scale(1.1); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6); } } /* Tooltip mejorado */ .premium-feature-locked::after { content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 10000; } .premium-feature-locked:hover::after { opacity: 1; } /* ⭐ NUEVO: Tooltip responsivo para móviles */ @media (max-width: 768px) { .premium-feature-locked::after { bottom: auto; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: normal; max-width: 280px; text-align: center; font-size: 0.7rem; } } /* ═══════════════════════════════════════════════════════════════ ITEMS DE NAVEGACIÓN PREMIUM BLOQUEADOS ═══════════════════════════════════════════════════════════════ */ /* Estilo especial para links en navegación */ .nav-premium-item.premium-feature-locked { opacity: 0.6; cursor: not-allowed !important; background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important; border-left: 3px dashed rgba(102, 126, 234, 0.5) !important; pointer-events: auto; } .nav-premium-item.premium-feature-locked:hover { opacity: 0.7; background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important; } /* Ajustar badge premium en navegación */ .nav-premium-item .premium-badge { width: 18px; height: 18px; font-size: 0.6rem; top: 50%; right: 8px; transform: translateY(-50%); } /* ⭐ Tooltip CORREGIDO - El fondo ahora cubre TODO el texto */ .nav-premium-item.premium-feature-locked::after { content: attr(title); display: inline-block; /* ⭐ CLAVE: Permite que el ancho se ajuste al contenido */ position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.5rem 0.85rem; /* ⭐ Más padding para mejor apariencia */ border-radius: 6px; font-size: 0.7rem; font-weight: 500; /* ⭐ Legibilidad */ line-height: 1.4; /* ⭐ Espaciado vertical */ white-space: nowrap; width: max-content; /* ⭐ CRÍTICO: Ajusta el ancho al contenido */ max-width: none; /* ⭐ Sin límite de ancho */ min-width: auto; /* ⭐ Sin ancho mínimo */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10000; } .nav-premium-item.premium-feature-locked:hover::after { opacity: 1; } /* Flechita del tooltip */ .nav-premium-item.premium-feature-locked::before { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 2px; border: 5px solid transparent; /* ⭐ Flecha un poco más grande */ border-right-color: #667eea; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 10001; } .nav-premium-item.premium-feature-locked:hover::before { opacity: 1; } /* ⭐ Asegurar que el contenedor permita overflow */ .pc-dd { overflow: visible !important; } /* ⭐ Prevenir que otros estilos interfieran */ .nav-premium-item.premium-feature-locked::after, .nav-premium-item.premium-feature-locked::before { box-sizing: border-box !important; } /* ===================================================== DASHBOARD MODERNO - Extensiones para index.html ===================================================== */ /* Hero Dashboard mejorado */ .dashboard-hero { position: relative; background: linear-gradient(135deg, var(--dark-teal) 0%, var(--medium-teal) 100%); min-height: 180px; padding: 2rem 0 2.5rem; margin: 0 0 2rem; box-shadow: var(--shadow-lg); overflow: hidden; } .dashboard-hero::before { content: ""; position: absolute; top: -50%; right: -15%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(73, 237, 203, 0.15) 0%, transparent 70%); animation: dashFloat 20s ease-in-out infinite; } .dashboard-hero::after { content: ""; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); animation: dashFloat 15s ease-in-out infinite reverse; } @keyframes dashFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -20px) scale(1.05); } } .dashboard-hero .container-max { position: relative; z-index: 1; } .dashboard-welcome { color: rgba(255, 255, 255, 0.95); font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem; animation: fadeInDown 0.6s ease-out; } .dashboard-title { color: #fff; font-size: 2.5rem; font-weight: 900; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); animation: fadeInDown 0.6s ease-out 0.1s both; } .dashboard-subtitle { color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; margin-top: 0.5rem; font-weight: 400; animation: fadeInDown 0.6s ease-out 0.2s both; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Grid de módulos mejorado */ .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } /* Cards de módulos premium */ .module-card-modern { background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; height: 100%; min-height: 160px; } .module-card-modern::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-teal) 0%, var(--medium-teal) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .module-card-modern:hover::before { transform: scaleX(1); } .module-card-modern:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary-teal); } .module-card-modern .card-body { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; } .module-icon-modern { width: 70px; height: 70px; background: linear-gradient(135deg, rgba(73, 237, 203, 0.15), rgba(89, 131, 129, 0.15)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: all 0.3s ease; } .module-card-modern:hover .module-icon-modern { background: linear-gradient(135deg, var(--primary-teal), var(--medium-teal)); transform: scale(1.1) rotate(5deg); box-shadow: var(--shadow-md); } .module-icon-modern i { font-size: 2rem; color: var(--medium-teal); transition: all 0.3s ease; } .module-card-modern:hover .module-icon-modern i { color: #fff; } .module-title-modern { font-size: 1.05rem; font-weight: 700; color: var(--dark-teal); margin: 0; transition: color 0.3s ease; } .module-card-modern:hover .module-title-modern { color: var(--primary-teal); } /* Stats mejoradas */ .stats-section { margin-top: 3rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .stat-card-modern { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); position: relative; overflow: hidden; transition: all 0.3s ease; } .stat-card-modern::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--primary-teal) 0%, var(--medium-teal) 100%); } .stat-card-modern:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .stat-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .stat-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary-teal), var(--medium-teal)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; box-shadow: var(--shadow-sm); } .stat-card-title { font-size: 1.3rem; font-weight: 800; color: var(--dark-teal); margin: 0; } .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-200); } .stat-item:last-child { border-bottom: none; } .stat-label { color: var(--gray-700); font-weight: 600; font-size: 0.95rem; } .stat-value { color: var(--dark-teal); font-weight: 800; font-size: 1.1rem; } .stat-value.highlight { color: var(--primary-teal); font-size: 1.3rem; } /* Animaciones de entrada */ .fade-in-up { animation: fadeInUp 0.6s ease-out both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Delays para animación escalonada */ .fade-in-up:nth-child(1) { animation-delay: 0.05s; } .fade-in-up:nth-child(2) { animation-delay: 0.1s; } .fade-in-up:nth-child(3) { animation-delay: 0.15s; } .fade-in-up:nth-child(4) { animation-delay: 0.2s; } .fade-in-up:nth-child(5) { animation-delay: 0.25s; } .fade-in-up:nth-child(6) { animation-delay: 0.3s; } .fade-in-up:nth-child(7) { animation-delay: 0.35s; } .fade-in-up:nth-child(8) { animation-delay: 0.4s; } .fade-in-up:nth-child(9) { animation-delay: 0.45s; } .fade-in-up:nth-child(10) { animation-delay: 0.5s; } .fade-in-up:nth-child(11) { animation-delay: 0.55s; } .fade-in-up:nth-child(12) { animation-delay: 0.6s; } /* Sección título */ .section-header-modern { text-align: center; margin-bottom: 2.5rem; } .section-badge-modern { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, rgba(73, 237, 203, 0.15), rgba(89, 131, 129, 0.15)); color: var(--dark-teal); padding: 0.5rem 1.25rem; border-radius: 20px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 1rem; } .section-title-modern { font-size: 2rem; font-weight: 900; color: var(--dark-teal); margin: 0; } /* Responsive */ @media (max-width: 768px) { .dashboard-title { font-size: 2rem; } .modules-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .module-card-modern .card-body { padding: 1.5rem 1rem; } .module-icon-modern { width: 60px; height: 60px; } .module-icon-modern i { font-size: 1.75rem; } .module-title-modern { font-size: 0.95rem; } .stats-grid { grid-template-columns: 1fr; } .section-title-modern { font-size: 1.6rem; } } @media (max-width: 480px) { .modules-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .dashboard-hero { min-height: 150px; padding: 1.5rem 0 2rem; } .dashboard-title { font-size: 1.75rem; } }