/* =====================================================
   1. CONFIGURACIÓN GLOBAL Y VARIABLES
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');

:root {
    --color-primary: #FF6B00;
    --color-primary-dark: #E05D00;
    --color-accent: #FF6B00;
    --color-accent-dark: #E05D00;
    --color-danger: #dc2626;
    --color-success: #16a34a;
    --color-bg: #F9F6F0;
    --color-surface: #ffffff;
    --color-border: #c4d8dc;
    --color-text: #393939;
    --color-text-muted: #626262;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 8px 24px rgba(24, 20, 40, 0.06), 0 2px 6px rgba(24, 20, 40, 0.04);
    --shadow-soft-hover: 0 14px 32px rgba(24, 20, 40, 0.10), 0 4px 10px rgba(24, 20, 40, 0.05);

    /* Paleta de marca RackVirtual */
    --rv-purple: #1E0B36;
    --rv-purple-light: #2D1350;
    --rv-border-violet: #3F186D;
    --rv-beige: #F9F6F0;
    --rv-beige-card: #FFFDF9;
    --rv-orange: #FF6B00;
    --rv-orange-hover: #E05D00;
    --rv-violet-text: #1E0B36;

    /* Bootstrap 5.3 Overrides */
    --bs-primary: #FF6B00;
    --bs-primary-rgb: 255, 107, 0;
    --bs-link-color: #FF6B00;
    --bs-link-hover-color: #E05D00;
    --bs-font-sans-serif: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* =====================================================
   2. SIDEBAR ADMIN Y TOPBAR (Protegiendo el menú de usuario)
   ===================================================== */
.sidebar, aside, .admin-sidebar {
    --bs-offcanvas-width: 250px;
    width: 250px;
    background-color: var(--rv-purple) !important;
    color: #f3f4f6 !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1f2937 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.sidebar-brand img {
    max-height: 32px;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: contain;
}

.sidebar-section {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af !important;
    font-weight: 700;
    padding: 16px 20px 6px;
}

.sidebar-link, .sidebar a, aside a, .admin-sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #9ca3af !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.sidebar-link:hover, .sidebar a:hover, aside a:hover, .admin-sidebar a:hover {
    background: #1f2937 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.sidebar-link.active, .sidebar a.active, aside a.active, .admin-sidebar a.active {
    background: #374151 !important;
    color: #ffffff !important;
    border-left-color: var(--color-accent, #ff7a3d);
    text-decoration: none !important;
}

.sidebar-link i {
    width: 18px;
    text-align: center;
}

.admin-content {
    margin-left: 250px;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 0.25rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #eef0f4;
}

/* Restaurar comportamiento original del botón de usuario / dropdown en el topbar */
.topbar .dropdown-toggle, 
.topbar .navbar-nav .btn, 
.topbar .nav-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-text) !important;
    padding: 0.35rem 0.65rem !important;
}

@media (max-width: 991.98px) {
    .admin-content {
        margin-left: 0;
    }
}

/* =====================================================
   3. JERARQUÍA Y ESTANDARIZACIÓN DE BOTONES PRINCIPALES
   ===================================================== */

/* Botones principales de creación (Grandes: + Nueva factura, + Nuevo cliente, etc.) */
.btn-primary, 
.btn-accent, 
button[type="submit"]:not(.search-btn), 
.action-btn {
    background-color: #7c54f5 !important;
    border-color: #7c54f5 !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(124, 84, 245, 0.2);
    transition: all 0.2s ease-in-out;
    padding: 0.5rem 1.15rem;
    font-size: 0.9rem;
}

.btn-primary:hover, 
.btn-accent:hover, 
button[type="submit"]:not(.search-btn):hover, 
.action-btn:hover {
    background-color: #6a42df !important;
    border-color: #6a42df !important;
    color: #ffffff !important;
}

/* Enlaces de cabecera transformados a botones principales */
.admin-content .d-flex.justify-content-between.align-items-center > a:not(.btn),
.admin-content h1 + a:not(.btn) {
    background-color: #7c54f5 !important;
    color: #ffffff !important;
    padding: 0.5rem 1.15rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 4px rgba(124, 84, 245, 0.2) !important;
}

.admin-content .d-flex.justify-content-between.align-items-center > a:not(.btn):hover,
.admin-content h1 + a:not(.btn):hover {
    background-color: #6a42df !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Botones secundarios generales (Limpios) */
.btn-outline-secondary, 
.btn-secondary {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-weight: 500;
}

.btn-outline-secondary:hover, 
.btn-secondary:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

/* =====================================================
   4. BOTONES DE ACCIÓN INTERNOS EN TABLAS (Clientes, Servicios, etc.)
      - Más pequeños, sin subrayado, con iconos vectoriales
   ===================================================== */
.admin-content .table td .btn,
.admin-content .table td a.btn,
.admin-content .table td a,
.admin-content .table td button,
.admin-content .table td form.d-inline button {
    text-decoration: none !important;
    font-size: 0.68rem !important;
    padding: 0.15rem 0.4rem !important;
    line-height: 1.1 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-shadow: none !important;
    margin: 1px !important;
}

.admin-content .table td a:hover,
.admin-content .table td .btn:hover {
    text-decoration: none !important;
}

/* Forzar control de tamaño estricto para botones de eliminar en tablas */
.admin-content .table td .btn-danger,
.admin-content .table td form[action*="delete"] button,
.admin-content .table td form[action*="destroy"] button {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    padding: 0.15rem 0.4rem !important;
}

.admin-content .table td .btn-danger:hover,
.admin-content .table td form[action*="delete"] button:hover,
.admin-content .table td form[action*="destroy"] button:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}


/* =====================================================
   5. FORMULARIOS, BÚSQUEDA Y ESPACIADOS
   ===================================================== */
.admin-layout .form-control, .client-layout .form-control,
.admin-layout .form-select, .client-layout .form-select {
    border-radius: 8px;
    border-color: #e3e3ea;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
}

.admin-layout .form-control:focus, .client-layout .form-control:focus,
.admin-layout .form-select:focus, .client-layout .form-select:focus {
    border-color: #7c54f5;
    box-shadow: 0 0 0 0.2rem rgba(124, 84, 245, 0.15);
}

/* Espaciado limpio, ordenado y con separación clara para buscadores */
form.d-flex, 
.input-group, 
.search-form, 
form[method="GET"], 
form[action*="search"] {
    gap: 12px !important;
    align-items: center;
}

/* Asegurar separación correcta entre el input/textarea de búsqueda y su botón */
.input-group > .form-control + .btn, 
.input-group > .form-control + button, 
.input-group > textarea + button,
form.d-flex > .form-control + button,
form.d-flex > input + button {
    border-radius: 8px !important;
    margin-left: 6px !important;
    padding: 0.3rem 0.7rem !important;
    font-size: 0.8rem !important;
}

/* =====================================================
   6. TARJETAS, TABLAS Y DISEÑO GENERAL
   ===================================================== */
.admin-layout .card, .client-layout .card {
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.admin-layout .card-body, .client-layout .card-body {
    padding: 1.5rem;
}

.admin-layout .table, .client-layout .table {
    --bs-table-border-color: #eef0f4;
}

.admin-layout .table thead th, .client-layout .table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #8a8a95;
    font-weight: 700;
    border-bottom-width: 1px;
    padding: 0.9rem 1.1rem;
    background: #fafafc;
}

.admin-layout .table td, .client-layout .table td {
    padding: 0.9rem 1.1rem;
    vertical-align: middle;
}

.admin-content main {
    padding: 2rem 2.25rem !important;
}

@media (max-width: 767.98px) {
    .admin-content main {
        padding: 1.25rem !important;
    }
}

/* =====================================================
   CORRECCIÓN DE LOGIN (Fondo oscuro para contraste del logo)
   ===================================================== */
body.login, 
.login-page, 
.auth-page, 
body:has(.login-box),
body:has(.auth-box),
body:has(form[action*="login"]) {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tarjeta central del formulario de login */
.login-box, 
.auth-box, 
.card.login-card,
.card.auth-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    padding: 2rem !important;
    width: 100%;
    max-width: 420px;
}

/* Optimización del logo dentro del login */
.login-logo img, 
.auth-logo img, 
.login-box img,
.auth-box img {
    max-height: 48px !important;
    background: transparent !important;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

/* =====================================================
   CORRECCIÓN: Formulario y Botones en "Crear Ticket" (Client Panel)
   ===================================================== */

/* Contenedor o tarjeta del formulario de creación de tickets */
.client-content form[action*="ticket"],
.client-content .card:has(form[action*="ticket"]),
.client-layout form[action*="ticket"] {
    border-radius: 14px;
}

/* Botones principales de envío en el formulario de tickets */
.client-content form[action*="ticket"] button[type="submit"],
.client-content form[action*="ticket"] .btn-primary,
.client-content form[action*="ticket"] .btn-success {
    background-color: #7c54f5 !important;
    border-color: #7c54f5 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.25rem !important;
    box-shadow: 0 2px 4px rgba(124, 84, 245, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
}

.client-content form[action*="ticket"] button[type="submit"]:hover,
.client-content form[action*="ticket"] .btn-primary:hover,
.client-content form[action*="ticket"] .btn-success:hover {
    background-color: #6a42df !important;
    border-color: #6a42df !important;
}

/* Botones secundarios o de cancelar en el formulario de tickets */
.client-content form[action*="ticket"] .btn-secondary,
.client-content form[action*="ticket"] .btn-outline-secondary {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 0.55rem 1.15rem !important;
}

.client-content form[action*="ticket"] .btn-secondary:hover,
.client-content form[action*="ticket"] .btn-outline-secondary:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

/* Campos de texto, textareas y selects dentro de la creación de tickets */
.client-content form[action*="ticket"] .form-control,
.client-content form[action*="ticket"] .form-select {
    border-radius: 8px !important;
    border-color: #e3e3ea !important;
    padding: 0.6rem 0.95rem !important;
    font-size: 0.95rem !important;
}

.client-content form[action*="ticket"] .form-control:focus,
.client-content form[action*="ticket"] .form-select:focus {
    border-color: #7c54f5 !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 84, 245, 0.15) !important;
}

/* =====================================================
   FORZAR ESTILOS MODERNOS A SELECTS Y TEXTAREAS (Panel Cliente / General)
   ===================================================== */
.client-content select, 
.client-layout select,
.card select,
form select {
    background-color: #ffffff !important;
    border: 1px solid #c4d8dc !important;
    border-radius: 8px !important;
    padding: 0.6rem 2.5rem 0.6rem 0.95rem !important;
    font-size: 0.95rem !important;
    color: #393939 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23393939' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 10px !important;
}

.client-content textarea, 
.client-layout textarea,
.card textarea,
form textarea {
    background-color: #ffffff !important;
    border: 1px solid #c4d8dc !important;
    border-radius: 8px !important;
    padding: 0.6rem 0.95rem !important;
    font-size: 0.95rem !important;
    color: #393939 !important;
    box-shadow: none !important;
    width: 100% !important;
}

.client-content select:focus, 
.client-layout select:focus,
.card select:focus,
form select:focus,
.client-content textarea:focus, 
.client-layout textarea:focus,
.card textarea:focus,
form textarea:focus {
    border-color: #7c54f5 !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 84, 245, 0.15) !important;
    outline: none !important;
}

/* =====================================================
   CORRECCIÓN ROBUSTA: Enlaces de creación en Panel Cliente (Cualquier nivel de título o tarjeta)
   ===================================================== */
.client-content h1 ~ a:not(.btn),
.client-content h2 ~ a:not(.btn),
.client-content h3 ~ a:not(.btn),
.client-content h4 ~ a:not(.btn),
.client-content .card-header a:not(.btn),
.client-layout h1 ~ a:not(.btn),
.client-layout h2 ~ a:not(.btn),
.client-layout h3 ~ a:not(.btn),
.client-layout h4 ~ a:not(.btn),
.client-layout .card-header a:not(.btn),
.client-content a[href*="create"]:not(.btn),
.client-layout a[href*="create"]:not(.btn) {
    background-color: #7c54f5 !important;
    color: #ffffff !important;
    padding: 0.5rem 1.15rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 4px rgba(124, 84, 245, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
}

.client-content h1 ~ a:not(.btn):hover,
.client-content h2 ~ a:not(.btn):hover,
.client-content h3 ~ a:not(.btn):hover,
.client-content h4 ~ a:not(.btn):hover,
.client-content .card-header a:not(.btn):hover,
.client-layout h1 ~ a:not(.btn):hover,
.client-layout h2 ~ a:not(.btn):hover,
.client-layout h3 ~ a:not(.btn):hover,
.client-layout h4 ~ a:not(.btn):hover,
.client-layout .card-header a:not(.btn):hover,
.client-content a[href*="create"]:not(.btn):hover,
.client-layout a[href*="create"]:not(.btn):hover {
    background-color: #6a42df !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* =====================================================
   FORZAR APILAMIENTO VERTICAL ABSOLUTO EN "NUEVO TICKET"
   ===================================================== */
.client-content form[action*="ticket"] .row,
.client-layout form[action*="ticket"] .row,
form[action*="tickets"] .row {
    display: block !important;
}

.client-content form[action*="ticket"] .row > *,
.client-layout form[action*="ticket"] .row > *,
form[action*="tickets"] .row > *,
.client-content form[action*="ticket"] [class*="col-"],
.client-layout form[action*="ticket"] [class*="col-"],
form[action*="tickets"] [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* =====================================================
   FORZAR APILAMIENTO VERTICAL ESTRICTO EN FORMULARIOS (Tickets y General)
   ===================================================== */
.client-content form .row,
.client-layout form .row,
.card form .row,
form .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.client-content form .row > *,
.client-layout form .row > *,
.card form .row > *,
form .row > *,
.client-content form [class*="col-"],
.client-layout form [class*="col-"],
.card form [class*="col-"],
form [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =====================================================
   FORZAR CAMPOS VERTICALES (Uno debajo del otro) EN "Nuevo Ticket"
   ===================================================== */
.client-content form[action*="ticket"] .row {
    display: flex !important;
    flex-direction: column !important;
}

.client-content form[action*="ticket"] .row > div,
.client-content form[action*="ticket"] .col,
.client-content form[action*="ticket"] [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.client-content form[action*="ticket"] .mb-3,
.client-content form[action*="ticket"] .mb-4,
.client-content form[action*="ticket"] .form-group {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1.25rem !important;
}
/* Navbar del panel cliente en oscuro, con logo en chip blanco para que resalte */
.client-navbar-dark {
    background: var(--rv-purple) !important;
    border-bottom: 1px solid var(--rv-border-violet);
}
.client-navbar-dark .nav-link {
    color: #cbb8e6 !important;
}
.client-navbar-dark .nav-link:hover,
.client-navbar-dark .nav-link.active {
    color: #fff !important;
}
.client-navbar-dark .btn-outline-light { border-color: var(--rv-border-violet); color: #fff; }
.client-navbar-dark .btn-outline-light:hover { background: var(--rv-orange); border-color: var(--rv-orange); }
.client-logo-chip {
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
}

/* Chat de tickets de soporte */
.chat-thread { max-height: 560px; overflow-y: auto; background: var(--rv-beige); border-radius: 12px; padding: 1.25rem !important; }
.chat-bubble {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 14px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(30,11,54,.08);
}
.chat-bubble-mine { background: var(--rv-orange); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-mine a { color: #fff !important; text-decoration: underline; font-weight: 600; }
.chat-bubble-other { background: var(--rv-purple); color: #fff; border-bottom-left-radius: 4px; }
.chat-bubble-other a { color: #ffd8b0 !important; text-decoration: underline; font-weight: 600; }
.chat-thread img.rounded-circle { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.chat-thread .text-muted { color: #7a6a8f !important; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; }

/* Tabs de login/registro en checkout: mejor contraste */
.client-layout .nav-tabs .nav-link {
    color: #393939;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
}
.client-layout .nav-tabs .nav-link.active {
    color: #8161f7;
    border-bottom-color: #8161f7;
    background: transparent;
}
.client-layout .nav-tabs { border-bottom: 1px solid #e3e3ea; }

/* Refresh visual navbar cliente */
.client-navbar-dark { padding-top: .5rem; padding-bottom: .5rem; }
.client-nav-compact .nav-link {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
    font-size: .92rem;
    border-radius: 6px;
    transition: background .15s ease;
}
.client-nav-compact .nav-link:hover { background: rgba(255,255,255,.08); }
.client-nav-compact .nav-link.active { background: var(--rv-orange); color: #fff !important; font-weight: 700; }
@media (min-width: 1200px) and (max-width: 1400px) {
    .client-nav-compact .nav-link { padding-left: .4rem !important; padding-right: .4rem !important; font-size: .86rem; }
}

.card { transition: box-shadow .15s ease; }
.card.shadow-sm:hover { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08) !important; }

/* Tienda — estilo RackVirtual (violeta oscuro / beige / naranja) */
.store-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--rv-orange);
    background: rgba(255,107,0,.1);
    border: 1px solid rgba(255,107,0,.3);
    padding: .3rem .9rem;
    border-radius: 999px;
    margin-bottom: .75rem;
    text-transform: uppercase;
}
.store-eyebrow-light { color: var(--rv-orange); background: rgba(255,107,0,.12); }

.store-hero {
    background: var(--rv-purple);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin-top: 1rem;
}
.store-hero-title { font-size: 2.2rem; font-weight: 800; color: #fff; }
.store-hero-title span { color: var(--rv-orange); }
.store-hero-sub { color: #cbb8e6; font-size: 1.05rem; }

.store-category-card {
    display: block;
    background: var(--rv-beige-card);
    border: 1px solid #e7ddc9;
    border-radius: 16px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: var(--rv-violet-text);
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(255,107,0,.14);
    border-color: var(--rv-orange);
}
.store-category-icon {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,107,0,.1);
    color: var(--rv-orange); font-size: 1.5rem;
}
.store-category-card h5 { margin-bottom: .35rem; font-weight: 700; color: var(--rv-violet-text); }
.store-category-cta { font-size: .82rem; color: var(--rv-orange); font-weight: 700; }

.trust-strip { padding: 2rem 0; }
.trust-icon {
    width: 56px; height: 56px; margin: 0 auto .85rem;
    border-radius: 50%;
    background: rgba(255,107,0,.1);
    color: var(--rv-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.trust-strip .trust-card {
    background: var(--rv-beige-card);
    border: 1px solid #e7ddc9;
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    height: 100%;
}
.trust-strip h6 { font-weight: 700; color: var(--rv-violet-text); }

.hosting-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--rv-purple);
    border: 1px solid var(--rv-border-violet);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    color: #fff;
    text-decoration: none;
}
.hosting-banner:hover { border-color: var(--rv-orange); color: #fff; }
.hosting-banner-icon {
    width: 64px; height: 64px; flex-shrink: 0;
    background: rgba(255,107,0,.15);
    color: var(--rv-orange);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.hosting-banner-text { flex: 1; }
.hosting-banner-text h3 { color: #fff; font-weight: 700; font-size: 1.25rem; margin-bottom: .25rem; }
.hosting-banner-text p { color: #cbb8e6; margin-bottom: 0; font-size: .9rem; }
.hosting-banner-cta { font-weight: 700; white-space: nowrap; color: var(--rv-orange); }

.pricing-card {
    background: var(--rv-purple-light);
    border: 1px solid var(--rv-border-violet);
    color: #d9cdec;
    border-radius: 18px;
    padding: 2rem 1.75rem;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pricing-card:hover { transform: translateY(-4px); border-color: #7a4fb0; }
.pricing-card-featured {
    background: var(--rv-beige);
    color: var(--rv-violet-text);
    border: 2px solid var(--rv-orange);
    box-shadow: 0 1rem 2.5rem rgba(255,107,0,.18);
    transform: scale(1.03);
}
.pricing-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--rv-orange);
    color: #fff; font-size: .72rem; font-weight: 800;
    padding: .3rem 1.1rem; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
}
.pricing-name { font-weight: 800; margin-bottom: .3rem; color: #fff; }
.pricing-card-featured .pricing-name { color: var(--rv-violet-text); }
.pricing-desc { color: #b6a4d1; font-size: .88rem; min-height: 40px; }
.pricing-card-featured .pricing-desc { color: #5c4a72; }
.pricing-price { font-size: 1.9rem; font-weight: 800; color: #fff; margin: .5rem 0 1.1rem; border-top: 1px solid var(--rv-border-violet); padding-top: 1.1rem; }
.pricing-card-featured .pricing-price { color: var(--rv-violet-text); border-top-color: #e7ddc9; }
.pricing-price span { font-size: .95rem; font-weight: 500; color: #b6a4d1; }
.pricing-card-featured .pricing-price span { color: #5c4a72; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.pricing-features li { padding: .3rem 0; font-size: .88rem; }
.pricing-features li i { color: var(--rv-orange); margin-right: .5rem; }
.pricing-card .btn-primary { background: var(--rv-orange); border-color: var(--rv-orange); font-weight: 700; }
.pricing-card .btn-primary:hover { background: var(--rv-orange-hover); border-color: var(--rv-orange-hover); }
.pricing-card .btn-outline-primary { color: #fff; border-color: var(--rv-border-violet); background: transparent; font-weight: 700; }
.pricing-card .btn-outline-primary:hover { background: var(--rv-border-violet); border-color: var(--rv-border-violet); color: #fff; }

.faq-section {
    background: var(--rv-purple);
    border-radius: 20px;
    padding: 3rem 2.5rem;
}
.faq-section .store-eyebrow, .faq-section h2 { color: #fff; }
.faq-section h2 { font-weight: 800; }
.faq-section .accordion-button {
    font-weight: 700;
    background: var(--rv-purple-light);
    color: #fff;
}
.faq-section .accordion-button:not(.collapsed) { color: var(--rv-orange); background: var(--rv-purple-light); box-shadow: none; }
.faq-section .accordion-button::after { filter: invert(1); }
.faq-section .accordion-item { border-radius: 12px !important; overflow: hidden; margin-bottom: .7rem; border: 1px solid var(--rv-border-violet); background: var(--rv-purple-light); }
.faq-section .accordion-body { background: var(--rv-purple-light); color: #cbb8e6; }

@media (max-width: 767.98px) {
    .store-hero-title { font-size: 1.5rem; }
    .ssl-section { padding: 2rem 1.5rem; }
    .hosting-banner { flex-direction: column; text-align: center; }
    .faq-section { padding: 2rem 1.25rem; }
}

body.store-page { background: var(--rv-beige) !important; }
.rv-store-nav {
    background: var(--rv-purple);
    border-bottom: 1px solid var(--rv-border-violet);
    padding-top: 1rem; padding-bottom: 1rem;
}
.rv-store-nav .navbar-brand img { height: 38px; }
.rv-store-nav .nav-link { color: #ffffff; font-weight: 700; padding: .5rem 1rem !important; }
.rv-store-nav .nav-link:hover { color: var(--rv-orange); }
.rv-store-nav .navbar-toggler { border-color: rgba(255,255,255,.35); }
.rv-store-nav .navbar-toggler-icon { filter: invert(1); }
.store-logo-chip { background: transparent; padding: 0; }
.btn-rv-orange { background: var(--rv-orange); border-color: var(--rv-orange); color: #fff; font-weight: 700; }
.btn-rv-orange:hover { background: var(--rv-orange-hover); border-color: var(--rv-orange-hover); color: #fff; }
.rv-store-nav .btn-outline-rv-violet { border: 1px solid #fff; color: #fff; font-weight: 700; background: transparent; }
.rv-store-nav .btn-outline-rv-violet:hover { background: var(--rv-orange); border-color: var(--rv-orange); color: #fff; }
.btn-outline-rv-violet { border: 1px solid var(--rv-purple); color: var(--rv-violet-text); font-weight: 700; background: transparent; }
.btn-outline-rv-violet:hover { background: var(--rv-purple); color: #fff; }

.checkout-auth-wrap { background: var(--rv-purple); border-radius: 20px; padding: 2.5rem 1.75rem 0; margin-top: 1rem; }
#authTabs.checkout-auth-tabs, .checkout-auth-tabs { border-bottom: 0 !important; margin-bottom: 0 !important; }
.checkout-auth-tabs .nav-item { margin-bottom: 0 !important; }
.checkout-auth-tabs .nav-link {
    color: #ffffff !important;
    font-weight: 700;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: rgba(255,255,255,.08) !important;
    padding: .65rem 1.25rem;
    margin: 0 .15rem;
}
.checkout-auth-tabs .nav-link.active {
    color: var(--rv-violet-text) !important;
    background: var(--rv-beige-card) !important;
}
.checkout-auth-wrap .auth-card { border-radius: 0 0 18px 18px !important; margin-top: 0 !important; box-shadow: none !important; }

.store-logo-chip { background: var(--rv-purple); padding: .4rem .9rem; border-radius: 10px; display: inline-flex; align-items: center; }
.rv-icon-btn { border-radius: 8px; padding: .35rem .75rem; font-weight: 600; }
.rv-icon-btn.btn-outline-secondary { border-color: var(--rv-border-violet); color: var(--rv-violet-text); }
.rv-icon-btn.btn-outline-secondary:hover { background: var(--rv-purple); border-color: var(--rv-purple); color: #fff; }
.rv-icon-btn.btn-outline-danger:hover { background: var(--color-danger); color: #fff; }
.chat-thread { max-width: 100%; overflow-wrap: anywhere; }
.chat-thread img.rounded-circle { flex-shrink: 0; }
@media (max-width: 767.98px) {
    .chat-thread > div[style*="max-width:75%"],
    .chat-thread div[style*="max-width: 75%"] { max-width: 88% !important; }
    .chat-bubble { word-break: break-word; }
    .admin-content .card-body { padding: 1rem !important; }
}

/* Login / Registro / Recuperar contraseña */
.auth-bg { background: var(--rv-purple) !important; }
.auth-bg .card { background: var(--rv-beige-card); border: 1px solid var(--rv-border-violet); border-radius: 16px; }
.auth-bg .form-label { color: var(--rv-violet-text); }
.auth-bg .text-muted a, .auth-bg a { color: var(--rv-orange) !important; font-weight: 600; }
.auth-bg .btn-primary { background: var(--rv-orange); border-color: var(--rv-orange); font-weight: 700; }
.auth-bg .btn-primary:hover { background: var(--rv-orange-hover); border-color: var(--rv-orange-hover); }
.auth-bg img { filter: none; }
.auth-card { background: var(--rv-beige-card); border-radius: 18px; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.25); }
.auth-footer-text { color: #cbb8e6; }
.auth-side { flex-direction: column; justify-content: center; color: #fff; padding: 2rem 3rem 2rem 0; }
.auth-side h2 { color: #fff; font-weight: 800; margin-top: 1.5rem; }
.auth-side p { color: #cbb8e6; }
.auth-side-list { list-style: none; padding: 0; margin-top: 1.25rem; }
.auth-side-list li { color: #e5d9f5; padding: .35rem 0; }
.auth-side-list li i { color: var(--rv-orange); margin-right: .6rem; }
.client-layout .list-group-item.active { background: var(--rv-orange) !important; border-color: var(--rv-orange) !important; }
.client-layout a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) { color: var(--rv-orange); }

/* Footer */
.rv-footer { background: var(--rv-purple); color: #cbb8e6; margin-top: 3rem; }
.rv-footer-title { color: #fff; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.rv-footer-text { color: #b6a4d1; font-size: .85rem; }
.rv-pay-badge { background: var(--rv-purple-light); border: 1px solid var(--rv-border-violet); color: #e5d9f5; padding: .4rem .8rem; border-radius: 8px; font-size: .8rem; }
.rv-qr-box { width: 88px; height: 88px; background: #fff; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--rv-purple); }
.rv-footer-hr { border-color: var(--rv-border-violet); margin: 2rem 0 1rem; }

/* SSL section v2 */
.ssl-section {
    background: linear-gradient(135deg, var(--rv-purple) 0%, var(--rv-purple-light) 100%);
    border: 1px solid var(--rv-border-violet);
    border-radius: 24px;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.ssl-section::before {
    content: "";
    position: absolute; top: -60px; right: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,0,.18), transparent 70%);
}
.ssl-section-icon-badge {
    width: 110px; height: 110px; flex-shrink: 0; border-radius: 50%;
    background: rgba(255,107,0,.15);
    border: 2px solid rgba(255,107,0,.35);
    color: var(--rv-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.8rem;
    position: relative; z-index: 1;
}
.ssl-section-text { position: relative; z-index: 1; }
.ssl-section-text .store-eyebrow { color: var(--rv-orange); background: rgba(255,107,0,.15); border-color: rgba(255,107,0,.35); }
.ssl-section-text h2 { color: #fff; font-weight: 800; font-size: 1.9rem; margin: .75rem 0; }
.ssl-section-text p { color: #cbb8e6; max-width: 560px; margin: 0 0 1.25rem; }
.ssl-section-perks { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ssl-section-perks li { color: #e5d9f5; font-size: .85rem; }
.ssl-section-perks li i { color: var(--rv-orange); margin-right: .4rem; }
.ssl-section .btn { background: var(--rv-orange); border-color: var(--rv-orange); color: #fff; font-weight: 700; }
.ssl-section .btn:hover { background: var(--rv-orange-hover); border-color: var(--rv-orange-hover); }
@media (max-width: 767.98px) { .ssl-section { flex-direction: column; text-align: center; padding: 2.25rem 1.5rem; } .ssl-section-perks { justify-content: center; } }

.btn-rv-orange { background: var(--rv-orange); border-color: var(--rv-orange); color: #fff; font-weight: 700; }
.btn-rv-orange:hover { background: var(--rv-orange-hover); border-color: var(--rv-orange-hover); color: #fff; }
.text-rv-orange { color: var(--rv-orange); }

.addon-suggest-card { background: var(--rv-beige-card); border: 1px solid #e7ddc9; border-radius: 12px; padding: 1rem; height: 100%; }

.domain-ext-card { background: var(--rv-beige-card); border: 1px solid #e7ddc9; border-radius: 14px; padding: 1.25rem; }
.domain-ext-tld { font-weight: 800; font-size: 1.3rem; color: var(--rv-violet-text); }
.domain-ext-price { color: var(--rv-orange); font-weight: 700; }
.domain-ext-price span { color: var(--rv-violet-text); font-weight: 400; font-size: .78rem; }
.rv-link-more { color: var(--rv-orange); font-weight: 700; text-decoration: none; }

/* KB con íconos */
.kb-cat-icon { width: 20px; text-align: center; margin-right: .4rem; color: var(--rv-orange); }
.kb-article-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,107,0,.1); color: var(--rv-orange); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.client-layout .list-group-item { color: var(--rv-violet-text); }
.client-layout .list-group-item.active { color: #fff !important; }




/* Panel cliente — estilo RackVirtual más allá del header */
.client-layout .rv-page-title { font-weight: 800; color: var(--rv-violet-text); font-size: 1.6rem; margin-bottom: 1.25rem; padding-left: .8rem; border-left: 4px solid var(--rv-orange); }
.client-layout .card { border: 1px solid #e7ddc9; border-radius: 14px; }
.client-layout .card-body { background: var(--rv-beige-card); border-radius: 14px; }
.rv-card-table { background: var(--rv-beige-card); border: 1px solid #e7ddc9; border-radius: 14px; overflow: hidden; }
.rv-card-table table { border: none; }
.rv-card-table thead th { background: var(--rv-purple); color: #fff; font-weight: 700; border: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.rv-card-table tbody tr:hover { background: rgba(255,107,0,.05); }
.rv-tabs .nav-link { color: var(--rv-violet-text); font-weight: 700; border: none; border-bottom: 3px solid transparent; }
.rv-tabs .nav-link.active { color: var(--rv-orange); border-bottom-color: var(--rv-orange); background: transparent; }
.client-layout .btn-outline-primary { color: var(--rv-orange); border-color: var(--rv-orange); }
.client-layout .btn-outline-primary:hover { background: var(--rv-orange); border-color: var(--rv-orange); color: #fff; }







/* =====================================================
   RESPONSIVE MÓVIL (todo el sistema)
   ===================================================== */
img { max-width: 100%; height: auto; }

table.table {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    body { font-size: 0.92rem; }

    .container, .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }

    h1, .h3 { font-size: 1.35rem !important; }
    h2, .h4 { font-size: 1.15rem !important; }

    .admin-content main,
    .client-content, .client-layout > .container,
    .container.py-4 {
        padding: 1rem !important;
    }

    .admin-layout .card-body, .client-layout .card-body, .card-body {
        padding: 1rem !important;
    }

    /* Tablas: scroll horizontal en vez de romper el layout */
    table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table.table thead, table.table tbody, table.table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    table.table td, table.table th {
        white-space: normal;
        word-break: break-word;
    }

    /* Navbars y topbar: evitar que el contenido se corte */
    .navbar .container, .navbar .container-fluid {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .navbar-brand img, .client-logo-chip img { max-height: 22px !important; }

    .topbar .container-fluid {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .topbar .ms-auto {
        gap: 8px !important;
    }

    /* Botones que ocupan todo el ancho en pantallas chicas */
    .card-body form .btn:not(.btn-sm),
    .d-flex.justify-content-between.align-items-center > .btn,
    .d-flex.justify-content-between.align-items-center > a.btn {
        width: 100%;
        justify-content: center;
    }
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* Carrusel de banners promocionales */
    #promoCarousel img { max-height: 180px !important; }

    /* Chat de tickets: burbujas más anchas y avatar más chico */
    .chat-bubble { max-width: 100% !important; font-size: 0.88rem; }
    .chat-thread .d-flex img.rounded-circle { width: 28px !important; height: 28px !important; }
    .chat-thread > div[style*="max-width:75%"],
    .chat-thread div[style*="max-width: 75%"] {
        max-width: 82% !important;
    }

    /* Tarjetas de la tienda / carrusel / grillas: aire vertical prolijo */
    .row.g-4 > [class*="col-"] { margin-bottom: 0.25rem; }

    /* Formularios de dos/tres columnas: ya se apilan por regla global, se ajusta separación */
    form .row > * { margin-bottom: 0.65rem; }

    /* Dropdowns del navbar oscuro del cliente: ancho contenido a la pantalla */
    .dropdown-menu { max-width: 92vw; }

    /* Sidebar admin en offcanvas: header no debe desbordar */
    .sidebar-brand img { max-height: 26px; }
}

@media (max-width: 420px) {
    .admin-content .table td .btn,
    .admin-content .table td a.btn,
    .admin-content .table td button {
        display: flex !important;
        width: 100%;
        justify-content: center;
        margin: 2px 0 !important;
    }
}

@media (max-width: 767.98px) {
    .rv-store-nav { padding-top: .6rem; padding-bottom: .6rem; }
    .rv-store-nav .navbar-brand img { height: 30px; }
    .rv-store-nav .navbar-collapse { background: var(--rv-purple-light); margin-top: .75rem; padding: .75rem; border-radius: 10px; border: 1px solid var(--rv-border-violet); }
    .store-hero { padding: 1.75rem 1.25rem; border-radius: 14px; }
    .ssl-section { padding: 1.75rem 1.25rem; border-radius: 14px; }
    .hosting-banner { padding: 1.5rem; border-radius: 14px; }
    .pricing-card-featured { transform: none; }
    .pricing-card { padding: 1.5rem 1.25rem; }
    .trust-card { padding: 1.25rem 1rem; }
    .auth-bg .card { margin: 0 .5rem; }
    .client-navbar-dark .navbar-collapse { background: var(--rv-purple-light); margin-top: .75rem; padding: .75rem; border-radius: 10px; }

    /* Tablas del panel cliente -> tarjetas apiladas (no scroll horizontal) */
    table.responsive-stack, table.responsive-stack tbody, table.responsive-stack tr, table.responsive-stack td {
        display: block !important;
        width: 100% !important;
    }
    table.responsive-stack { overflow: visible !important; white-space: normal !important; }
    table.responsive-stack thead { display: none !important; }
    table.responsive-stack tr {
        border-bottom: 8px solid var(--color-bg);
        padding: .85rem 1rem;
    }
    table.responsive-stack td {
        border: none !important;
        padding: .35rem 0 !important;
        text-align: left !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
    }
    table.responsive-stack td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--rv-violet-text);
        font-size: .78rem;
        text-transform: uppercase;
        flex-shrink: 0;
    }
    table.responsive-stack td[data-label=""] { justify-content: flex-end; }
}