/* =============================================================================
   RutaTurismo360 - Global Cards Template Styles
   =============================================================================

   Estilos para TODOS los tipos de cards del sistema con prefijo rt360-*.
   Modificar aquí afecta a TODOS los módulos que usen cards.
   Un único lugar para mantener consistencia visual entre componentes.

   Prefijo: rt360-*
   Última actualización: Marzo 2026
   Versión: 1.0.0

   ÍNDICE:
   -------
   1.  Cards utilitarias base (rt360-card-rounded, rt360-card--popular, rt360-card--current, rt360-card--label)
   2.  Header con gradiente (rt360-header-gradient) — formularios Create/Edit
   3.  Stat cards — KPIs y métricas (rt360-card--stat)
   4.  Switch cards — Configuración on/off (rt360-card--switch)
   5.  Setting cards — Ítems de configuración (rt360-card--setting)
   6.  Panel items — Navegación de panel lateral (rt360-panel-item)
   7.  Pricing cards — Planes de suscripción (rt360-card--pricing)
   8.  Dark Mode — Todos los tipos de cards
   9.  Avatar / Foto de perfil (rt360-avatar)
   10. Sidebar info cards — Sidebars con gradiente (rt360-sidebar-card--*)
   ============================================================================= */


/* =============================================================================
   1. CARDS UTILITARIAS BASE
   Modificadores de bordes y sombra aplicables a cualquier RadzenCard.
   ============================================================================= */

/**
 * Base universal para todas las cards con tipo.
 * Uso: <RadzenCard class="rt360-card rt360-card--[tipo]">
 */
.rt360-card {
    position: relative;
}

/**
 * Card con bordes redondeados (secciones, filtros, listados)
 * Uso: <RadzenCard class="rt360-card-rounded">
 */
.rt360-card-rounded {
    border-radius: var(--radius-md, 8px);
}

.rt350-card-rounded--text{
    color: var(--rz-text);
}

/**
 * Modificador: borde primario destacado (plan popular, elemento seleccionado)
 * Uso: <RadzenCard class="rt360-card rt360-card--popular">
 */
.rt360-card--popular {
    border: 2px solid var(--rz-primary);
}

/**
 * Modificador: borde info + fondo suave (estado activo/actual)
 * Uso: <RadzenCard class="rt360-card rt360-card--current">
 */
.rt360-card--current {
    border: 2px solid var(--rz-info);
    background: var(--rz-base-50);
}

/**
    * Modificador: card atenuada para textos secundarios o estados inactivos.
    * Uso: <RadzenCard class="rt360-card rt360-card--label">
*/

.rt360-card--label {
    color: var(--rz-text-secondary-color);
}

/**
 * Card resumen para empresa/suscripción dentro de páginas de módulo.
 * Uso: <RadzenCard class="rt360-card-rounded rt360-company-summary">
 */
.rt360-company-summary {
    padding: 1rem 1.25rem;
}

.rt360-company-summary__logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-border-color);
    flex-shrink: 0;
}

.rt360-company-summary__placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 39, 176, 0.12);
    color: var(--rz-primary);
    flex-shrink: 0;
}

.rt360-company-summary__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.rt360-company-summary__meta {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.rt360-company-summary__usage {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rt360-company-summary__usage-note {
    margin: 0;
}

/* =============================================================================
   2. HEADER CON GRADIENTE
   Encabezado decorativo para páginas de Create/Edit.
   Uso: <RadzenCard class="rt360-header-gradient">
   ============================================================================= */

/**
 * Card con gradiente primary→secondary (para formularios Create/Edit)
 * Uso: <RadzenCard class="rt360-header-gradient">
 */
.rt360-header-gradient {
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    color: white;
    border: none;
}

/**
 * Ícono principal del header
 * Uso: <RadzenIcon class="rt360-header-icon">
 */
.rt360-header-icon {
    font-size: 2.5rem;
    color: white;
}

/**
 * Título del header
 * Uso: <RadzenText class="rt360-header-title">
 */
.rt360-header-title {
    margin: 0;
    color: white;
}

/**
 * Subtítulo del header
 * Uso: <RadzenText class="rt360-header-subtitle">
 */
.rt360-header-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/**
 * Contenedor flexible del contenido textual del header.
 * Uso: class="rt360-header-content"
 */
.rt360-header-content {
    flex: 1;
}


/* =============================================================================
   3. STAT CARDS — KPIs Y MÉTRICAS
   Cards con borde izquierdo de color y gradiente para mostrar métricas.
   Uso: <RadzenCard class="rt360-card rt360-card--stat rt360-card--info">
   ============================================================================= */

.rt360-card--stat {
    border-left: 4px solid;
}

/* Variante Info (azul) */
.rt360-card--stat.rt360-card--info {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border-left-color: var(--rz-info);
}

/* Variante Success (verde) */
.rt360-card--stat.rt360-card--success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border-left-color: var(--rz-success);
}

/* Variante Warning (naranja) */
.rt360-card--stat.rt360-card--warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border-left-color: var(--rz-warning);
}

/* Variante Danger (rojo) */
.rt360-card--stat.rt360-card--danger {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.05) 100%);
    border-left-color: var(--rz-danger);
}

/**
 * Badge circular con ícono de la métrica
 * Uso: <div class="rt360-stat-icon-badge rt360-stat-icon-badge--info">
 */
.rt360-stat-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.rt360-stat-icon-badge--info    { background: var(--rz-info); }
.rt360-stat-icon-badge--success { background: var(--rz-success); }
.rt360-stat-icon-badge--warning { background: var(--rz-warning); }
.rt360-stat-icon-badge--danger  { background: var(--rz-danger); }

/**
 * Ícono dentro del badge
 * Uso: <RadzenIcon class="rt360-stat-icon">
 */
.rt360-stat-icon {
    font-size: 1.5rem;
}

/**
 * Label de la métrica (overline estilo)
 * Uso: <RadzenText class="rt360-stat-label">
 */
.rt360-stat-label {
    color: var(--rz-text-secondary-color);
    margin: 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/**
 * Valor numérico de la métrica
 * Uso: <RadzenText class="rt360-stat-value rt360-stat-value--info">
 */
.rt360-stat-value {
    font-weight: 700;
    margin: 0;
    font-size: var(--rz-text-h5-font-size, 1.5rem);
    line-height: 1.2;
}

.rt360-stat-value--info    { color: var(--rz-info); }
.rt360-stat-value--success { color: var(--rz-success); }
.rt360-stat-value--warning { color: var(--rz-warning); }
.rt360-stat-value--danger  { color: var(--rz-danger); }


/* =============================================================================
   4. SWITCH CARDS — CONFIGURACIÓN ON/OFF
   Card que envuelve un RadzenSwitch con label y helper text.
   Uso: <RadzenCard class="rt360-card rt360-card--switch">
   ============================================================================= */

.rt360-card--switch {
    background-color: var(--rz-base-100);
}

/**
 * Label principal del switch
 * Uso: <RadzenLabel class="rt360-switch-label">
 */
.rt360-switch-label {
    font-weight: 500;
    margin: 0;
}

/**
 * Texto de ayuda del switch
 * Uso: <RadzenText class="rt360-switch-helper">
 */
.rt360-switch-helper {
    color: var(--rz-text-secondary-color);
    margin: 0;
}


/* =============================================================================
   5. SETTING CARDS — ÍTEMS DE CONFIGURACIÓN
   Card horizontal para cada opción de la página /settings.
   Uso: <div class="rt360-card rt360-card--setting">
   ============================================================================= */

.rt360-card--setting {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--rz-border-color);
    background: var(--rz-panel-background-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rt360-card--setting:hover {
    border-color: var(--rz-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Modificador "próximamente" — apariencia atenuada */
.rt360-card--setting.rt360-card--soon {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/**
 * Badge ícono dentro de la setting card (44×44px)
 * Uso: <div class="rt360-setting-card-icon rt360-setting-card-icon--primary">
 */
.rt360-setting-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rt360-setting-card-icon .rzi { font-size: 1.4rem; }

/* Variantes de color del ícono badge */
.rt360-setting-card-icon--primary { background: rgba(156, 39, 176, 0.12); }
.rt360-setting-card-icon--primary .rzi { color: var(--rz-primary); }
.rt360-setting-card-icon--pink    { background: rgba(233, 30, 99, 0.12); }
.rt360-setting-card-icon--pink .rzi    { color: #e91e63; }
.rt360-setting-card-icon--blue    { background: rgba(33, 150, 243, 0.12); }
.rt360-setting-card-icon--blue .rzi    { color: #2196f3; }
.rt360-setting-card-icon--green   { background: rgba(76, 175, 80, 0.12); }
.rt360-setting-card-icon--green .rzi   { color: #4caf50; }
.rt360-setting-card-icon--cyan    { background: rgba(3, 169, 244, 0.12); }
.rt360-setting-card-icon--cyan .rzi    { color: #03a9f4; }
.rt360-setting-card-icon--brown   { background: rgba(121, 85, 72, 0.12); }
.rt360-setting-card-icon--brown .rzi   { color: #795548; }
.rt360-setting-card-icon--red     { background: rgba(244, 67, 54, 0.12); }
.rt360-setting-card-icon--red .rzi     { color: #f44336; }
.rt360-setting-card-icon--neutral { background: rgba(33, 33, 33, 0.10); }
.rt360-setting-card-icon--neutral .rzi { color: var(--rz-text-secondary-color); }

/* Área de texto (título + descripción) */
.rt360-setting-card-body   { flex: 1; min-width: 0; }
/* Área de acción (botón) */
.rt360-setting-card-action { flex-shrink: 0; }

/* Título y descripción de la setting card */
.rt360-setting-card-title {
    margin: 0 !important;
    font-weight: 600;
    color: var(--rz-text-primary-color);
}

.rt360-setting-card-desc {
    margin: 0 !important;
    color: var(--rz-text-secondary-color);
}

/* rt360-badge-soon → global-badges-template.css */

/* =============================================================================
   6. PANEL ITEMS
   Ítems de lista navegable (panel de preferencias, sidebar de configuración).
   Uso: <a class="rt360-panel-item">
   ============================================================================= */

.rt360-panel-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--rz-text-color);
    font-size: 0.875rem;
    transition: background 0.15s ease;
    cursor: pointer;
}

.rt360-panel-item:hover {
    background: var(--rz-base-background-color);
    color: var(--rz-primary);
    text-decoration: none;
}

.rt360-panel-item:hover .rt360-panel-item-icon {
    color: var(--rz-primary);
}

/* Variante "próximamente" */
.rt360-panel-item--soon {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.rt360-panel-item-icon {
    font-size: 1.1rem;
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}


/* =============================================================================
   7. PRICING CARDS — PLANES DE SUSCRIPCIÓN
   Cards para comparar y seleccionar planes de suscripción.
   Uso: <RadzenCard class="rt360-card rt360-card--pricing [rt360-card--popular|rt360-card--current]">
   ============================================================================= */

.rt360-card--pricing {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rt360-card--pricing:hover {
    transform: translateY(-4px);
    box-shadow: var(--rz-shadow-6);
}

/**
 * Badge flotante centrado en la parte superior de la card
 * Uso: <RadzenBadge class="rt360-pricing-badge" Text="Más popular" />
 */
.rt360-pricing-badge {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap;
}


/* =============================================================================
   8. DARK MODE
   Un único bloque centralizado para todos los overrides de dark mode.
   ============================================================================= */

/* 1. Card labels */
html[data-theme="dark"] .rt360-card--label {
    color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="dark"] .rt360-company-summary__logo {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .rt360-company-summary__placeholder {
    background: rgba(156, 39, 176, 0.2);
}

html[data-theme="dark"] .rt360-company-summary__title {
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .rt360-company-summary__meta,
html[data-theme="dark"] .rt360-company-summary__usage-note {
    color: rgba(255, 255, 255, 0.6);
}


/* ── 3. Stat cards ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .rt360-stat-label {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ── 4. Switch cards ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .rt360-switch-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .rt360-switch-helper {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── 5. Setting cards ────────────────────────────────────────────────────── */
html[data-theme="dark"] .rt360-card--setting {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .rt360-card--setting:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--rz-primary);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .rt360-card--setting .rz-text-subtitle2 {
    color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .rt360-card--setting .rz-text-caption,
html[data-theme="dark"] .rt360-card--setting .rt360-setting-card-desc {
    color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="dark"] .rt360-card--setting.rt360-card--soon {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .rt360-setting-card-icon {
    filter: brightness(1.25);
}

html[data-theme="dark"] .rt360-setting-card-icon--neutral {
    background: rgba(255, 255, 255, 0.10);
}

/* ── 1. Cards base (rt360-card--current) ────────────────────────────────── */
html[data-theme="dark"] .rt360-card--current {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--rz-info);
}

/* ── 7. Pricing cards ────────────────────────────────────────────────────── */

/* Color base: cascada a todo RadzenText sin clase explícita (valores de límites, etc.) */
html[data-theme="dark"] .rt360-card--pricing {
    color: rgba(255, 255, 255, 0.87);
}

html[data-theme="dark"] .rt360-card--pricing strong {
    color: rgba(255, 255, 255, 0.92) !important;
}


/* =============================================================================
   9. AVATAR / FOTO DE PERFIL
   Clases para foto circular de usuario y placeholder con gradiente.
   Uso: <RadzenImage class="rt360-avatar"> / <div class="rt360-avatar-placeholder">
   ============================================================================= */

.rt360-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--rz-primary);
}

.rt360-avatar-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rt360-avatar-icon {
    font-size: 80px !important;
    color: white;
}


/* =============================================================================
   10. SIDEBAR INFO CARDS
   Cards con gradiente suave y borde de color para sidebars (perfil, settings).
   Uso: <RadzenCard Variant="Variant.Outlined" class="rt360-sidebar-card--info">
   ============================================================================= */

.rt360-sidebar-card--info {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.10) 0%, rgba(33, 150, 243, 0.05) 100%);
    border-left: 4px solid var(--rz-info);
}

.rt360-sidebar-card--success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.10) 0%, rgba(76, 175, 80, 0.05) 100%);
    border-left: 4px solid var(--rz-success);
}

.rt360-sidebar-card--warning {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.10) 0%, rgba(255, 152, 0, 0.05) 100%);
    border-left: 4px solid var(--rz-warning);
}

.rt360-sidebar-card--danger {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.10) 0%, rgba(244, 67, 54, 0.05) 100%);
    border-left: 4px solid var(--rz-danger);
}


/* =============================================================================
   11. PUBLIC CONFIRMATION CARD
   Layout para páginas públicas de confirmación y validación por token.
   Uso: <div class="rt360-confirm-page"> ...
   ============================================================================= */

.rt360-confirm-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
    padding: 1rem;
}

.rt360-confirm-card {
    background: var(--rz-card-background-color, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.rt360-confirm-header {
    background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
    padding: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rt360-confirm-header img {
    filter: brightness(0) invert(1);
    max-height: 56px;
    width: auto;
}

.rt360-confirm-loading {
    padding: 3rem 1rem;
}

.rt360-confirm-body {
    padding: 2rem;
}

.rt360-confirm-icon {
    font-size: 4rem !important;
}

.rt360-confirm-icon--success {
    font-size: 5rem !important;
}

.rt360-confirm-summary-card {
    width: 100%;
}

.rt360-confirm-pin-input,
.rt360-confirm-pin-input .rz-textbox {
    width: 100%;
    font-size: 1.4rem;
    letter-spacing: 6px;
    font-family: monospace;
    text-transform: uppercase;
    text-align: center;
}

.rt360-confirm-submit {
    width: 100%;
    margin-top: 1.5rem;
}

html[data-theme="dark"] .rt360-confirm-card {
    background: var(--rz-base-300, #1e1e2e);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}


/* =============================================================================
   FIN DEL ARCHIVO
   ============================================================================= */