@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+Symbols:wght@100..900&family=Young+Serif&display=swap');
/* <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name*/



/* =====================================================
   1. VARIABLES GLOBALES (PALETA MEASURE+)
   ===================================================== */
:root {
/* Texto */
    --text-main: #1C1C1C;
    --text-muted: #bfbfbf;
    --text-00: #ffffff;
    --text-gray: #7B7E7C;
   
/* ===== PALETA estructura =================*/

  --primary-base: #ADC8D9;
  --primary-00: #FFFFFF;
  --primary-101: #FBFCFD; /* --surface*/
  --primary-2-74: #0C151A; /* --on-surface*/
  --primary-3-12: #CBDCE7; /* --surface-variant*/
  --primary-4-68: #182934; /* --on-surface-variant*/
  --primary-5-6: #E5EDF3; /* --surface-container-highest-5*/
  --primary-6-5: #E9F0F5; /*--surface-container-high-4*/
  --primary-7-4: #EEF3F7; /*--surface-container-3*/
  --primary-8-3: #F2F6F9; /*--surface-container-low-2*/
  --primary-10-73: #0E181E; /*--inverse-surface*/
  --primary-11-7: #E1EBF1; /*--on-inverse-surface*/
  /*buttons*/
  --primary-12-46: #457594; /*--btn-primary*/
  --primary-13-58: #2C4C60; /*--btn-primary*/
  --primary-14-64: #203746; /*--btn-primary*/
  --primary-15-13: #C6D9E5; /*--btn-secondary*/
  --primary-16-19: #ACC7D9; /*--btn-secondary*/
  --primary-17-25: #92B6CD; /*--btn-secondary*/
  --primary-18-67: #1A2D39; /*--btn-dark*/
  --primary-2-74: #0E181E; /*--btn-dark*/
  --primary-20-79: #020304; /*--btn-dark*/
  --primary-7-4: #EEF3F7; /*--btn-ghost*/
  --primary-22-10: #D3E2EB; /*--btn-ghost*/


  /* ===== PALETA PRIMARY  =================*/
  --primary-acent: #ADC8D9; /* barra active, titutlo tabbla background*/
  --secondary-acent: #ADD9E6; /* gradeints*/
  --secondary-acent-up:#399ABA;
  --primary-01: #FBFCFD; /* --surface* 101 surface containers topbar editor*/
  --primary-05: #F2F6F9; /*--surface-container-2 8-3*/
  --primary-10: #EEF3F7; /*--surface-container-3 7-4*  acordeón*/
  --primary-20: #E9F0F5; /*--surface-container--4 6-5 card- costado */
  --primary-30: #E5EDF3; /* --surface-container-5  5-6 card-bars*/
  --primary-40: #E1EBF1; /*--on-inverse-surface 11-7 */
  --primary-50: #CBDCE7; /* --surface-variant 3-12 hover iconos iconos zoom*/
  --primary-70: #C6D9E5; /*--btn-secondary 15-13 active*/
  --primary-80: #ACC7D9; /*--btn-secondary 16-19 inicial*/
  --primary-90: #92B6CD; /*--btn-secondary 1717-25 hover*/
  --primary-100: #457594; /*--btn-primary 12-46 active*/
  --primary-200: #2C4C60; /*--btn-primary 13-58 inicial*/
  --primary-300: #203746; /*--btn-primary 14-64 hover*/
  --primary-400: #1A2D39; /*--btn-dark 18-67 */
  --primary-500: #182934; /* --on-surface-variant 4-68 texto hover */
  --primary-600: #121F27; /* dark /* --surface-container-highest-5* D5-71*/
  --primary-700: #0E181E; /*--inverse-surface 10-73 */
  --primary-800: #0C151A; /* --on-surface 2-74 */
  --primary-900: #020304; /*--btn-dark 20-79 */

   /* ===== PALETA NEUTRAL  =================*/
  --neutral-00: #FFFFFF;
  --neutral-10: #f6f4f4;
  --neutral-50: #eeeeee; /* divider light*/
  --neutral-100: #CFD0CF; /*border outline border divider text-muted*/
  --neutral-200: #9D9D9D; /*iconos*/
  --neutral-300: #929BA0; /* canvas*/
  --neutral-500: #585A59; /* iconos - texto*/
  --neutral-600: #7B7E7C;
  --neutral-700: #333b47; /* grey-text*/
  --neutral-750: #29313d;
  --neutral-800:#181a20;
  --neutral-850: #0b0e11;
    --neutral-900: #000000;

  /* ===== TOKENS SEMÁNTICOS - LIGHT MODE ===== */

 
  

  --error: #B3261E;
  --on-error:#FFFFFF;
  --error-container:#F9DEDC;
  --on-error-container:#8C1D18;


  --surface: var(--primary-00); /* --surface* 101 surface containers topbar editor*/
  --on-surface: var(--primary-800); /* --on-surface 2-74 */
  --surface-variant: var(--primary-50); /* --surface-variant 3-12 hover iconos iconos zoom*/
  --on-surface-variant: var(--primary-500); /* --on-surface-variant 4-68 texto hover */
  --surface-container-5: var(--primary-30); /* --surface-container-5  5-6 card-bars mas oscura de las claras para light la capa mas arriba*/
  --surface-container-4: var(--primary-20); /*--surface-container--4 6-5 card- costado */
  --surface-container-3: var(--primary-10); /*--surface-container-3 7-4*  acordeón*/
  --surface-container-2: var(--primary-05); /*--surface-container-2 8-3*/
  --surface-container-1: var(--primary-01); /* --surface* 101 surface containers topbar editor*/
  --surface-inverse: var(--primary-500); /*--inverse-surface 10-73 */
  --on-surface-inverse: var(--primary-40); /*--on-inverse-surface 11-7 */
  --surface-canvas: var(--neutral-100); /* canvas*/
  --surface-gray: var(--neutral-00); /* es blanco en ligt neutral 200 en dark

 

  /* ===== TOKENS SEMÁNTICOS - LIGHT MODE ===== */
  /* ===== ANDROID - SUPERFICIE Y ELEVACIÓN ===== */

  --background: var(--neutral-00);
  --foreground: var(--neutral-900);
  --hover-link: var(--surface-variant);
  --on-hover-link: var(--on-surface-variant);
  --hover-light: var(--primary-40);

  --popover: var(--background);
  --popover-foreground: var(--foreground);
 
  --primary: var(--primary-200); /*--btn-primary 13-58 inicial*/
  --on-primary: var(--neutral-00);
  --primary-hover: var(--primary-300); /*--btn-primary 14-64 hover*/
  --primary-active: var(--primary-300);
  
  --secondary: var(--primary-80); /*--btn-secondary 16-19 inicial*/
  --on-secondary: var(--secondary-900);
  --secondary-hover: var(--primary-90); /*--btn-secondary 1717-25 hover*/
  --secondary-active: var(--primary-90);

  --dark: var(--primary-400); /*--btn-dark 18-67 */
  --dark-hover: var(--secondary-900); /*--btn-secondary 1717-25 hover*/
  --dark-active: var(--secondary-900); /*--btn-secondary 1717-25 hover*/

  --outline:var(--neutral-100);
  --outline-variant:var(--neutral-60);
  
  --muted: var(--neutral-100);
  --on-muted: var(--neutral-500);
  
  --destructive: #dc2626;
  --destructive-foreground:var(--mp-text-white);
  --destructive-hover: #d6828240;
  
  --border: var(--neutral-100);
  --border-light: var(--neutral-50);
  --input: var(--neutral-200);
  --input-background: var(--neutral-50);
  --switch-background: var(--neutral-300);
  
  --ring: var(--mp-500);
  --ring-offset: #ffffff;
  
  --fab-background: var(--mp-500--);
  --fab-foreground: #ffffff;
  --bottom-nav: var(--neutral-50--);
  

  
  
  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.375rem;    /* 6px */
  --radius: 0.5rem;         /* 8px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-full: 999px;
   
  /* ===== TYPOGRAPHY ===== */
  --font-weight-thin: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --font-size-xs: 0.813rem; /*--13px--*/
  --font-size-base: 0.875rem; /*--14px--*/
  --font-size-sm: 0.938rem; /*--15px--*/
  --font-size-md: 1rem; /*--16px--*/
  --font-size-lg: 1.125rem; /*--18px--*/
  --font-size-small: 0.75rem; /*12px - */
  --font-size-heading-md: 1.2rem; /*--19.2px*/
  --font-size-heading-lg:1.5rem;/* 24px */
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  
  /* ===== SPACING ===== */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   DARK MODE
   ============================================================================ */

.dark,
[data-theme="dark"] {
  
  --primary-acent: var(--primary-400);

  --background: var(--neutral-900);
  --foreground: var(--neutral-50);
  --hover-link: var(--neutral-750);
  --on-hover-link: var(--neutral-50);
  --hover-light: var(--neutral-700);
 
  --text-main:  var(--neutral-50);
  --text-muted: #bfbfbf;
  --text-00: var(--neutral-50);
  --text-gray: var(--neutral-200);
  --popover: var(--background);
  --popover-foreground: var(--foreground);
 
  --primary: var(--primary-200); /*--btn-primary 13-58 inicial*/
  --on-primary: var(--neutral-00);
  --primary-hover: var(--primary-300); /*--btn-primary 14-64 hover*/
  --primary-active: var(--primary-300);
  
  --secondary: var(--primary-80); /*--btn-secondary 16-19 inicial*/
  --on-secondary: var(--secondary-900);
  --secondary-hover: var(--primary-90); /*--btn-secondary 1717-25 hover*/
  --secondary-active: var(--primary-90);
  
  --muted: var(--neutral-300);
  --on-muted: var(--neutral-300);
  
  --destructive: #ef4444;
  --on-destructive: #ffffff;
  --destructive-hover: #d6828240;
  
  --border: var(--neutral-700);
  --border-light: var(--primary-500);
  --input-background: var(--neutral-800);
  --switch-background: var(--neutral-600);
  
  --ring: var(--mp-400);
  --ring-offset: var(--neutral-900);
  
    --fab-background: var(--mp-400);
  --on-fab: var(--neutral-900);
  --bottom-nav: var(--neutral-800);

  --surface: var(--neutral-800); /* --surface* 101 surface containers topbar editor*/
  --on-surface: var(--neutral-05); /* --on-surface 2-74 */
  --surface-variant: var(--neutral-900); /* --surface-variant 3-12 hover iconos iconos zoom*/
  --on-surface-variant: var(--primary-05); /* --on-surface-variant 4-68 texto hover */
  --surface-container-5: var(--neutral-800); /* --surface-container-5  5-6 card-bars mas oscura de las claras para light la capa mas arriba*/
  --surface-container-4: var(--neutral-800); /*--surface-container--4 6-5 card- costado */
  --surface-container-3: var(--neutral-800); /*--surface-container-3 7-4*  acordeón*/
  --surface-container-2: var(--primary-850); /*--surface-container-2 8-3*/
  --surface-container-1: var(--primary-900); /* --surface* 101 surface containers topbar editor*/
  --surface-inverse: var(--neutral-750); /*--inverse-surface 10-73 */
  --on-surface-inverse: var(--neutral-050); /*--on-inverse-surface 11-7 */
  --surface-canvas: var(--neutral-100); /* canvas*/
  --surface-gray: var(--neutral-200);

 
  }
  

/* Base tipográfica */
body {
    font-family: "Lato", "Noto Sans Symbols", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--mp-text-main);
    background-color: var(--background);
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: var(--font-size-base);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Background colors */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-muted { background-color: var(--muted); }
.bg-card { background-color: var(--card); }
.bg-background { background-color: var(--background); }

/* Text colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary-foreground); }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--primary); }
.text-destructive { color: var(--destructive); }
.text-foreground { color: var(--foreground); }
.text-gray { color: var(--text-gray); }
.icon-acent { color: var(--secondary-acent-up); }
.icon-danger { color: var(--destructive); }

/* Brand colors */
.bg-mp-100 { background-color: var(--mp-100); }
.bg-mp-200 { background-color: var(--mp-200); }
.bg-mp-300 { background-color: var(--mp-300); }
.bg-mp-400 { background-color: var(--mp-400); }
.bg-mp-500 { background-color: var(--mp-500); }
.bg-mp-600 { background-color: var(--mp-600); }
.bg-mp-700 { background-color: var(--mp-700); }
.bg-mp-800 { background-color: var(--mp-800); }
.bg-mp-900 { background-color: var(--mp-900); }

.text-mp-100 { color: var(--mp-100); }
.text-mp-200 { color: var(--mp-200); }
.text-mp-300 { color: var(--mp-300); }
.text-mp-400 { color: var(--mp-400); }
.text-mp-500 { color: var(--mp-500); }
.text-mp-600 { color: var(--mp-600); }
.text-mp-700 { color: var(--mp-700); }
.text-mp-800 { color: var(--mp-800); }
.text-mp-900 { color: var(--mp-900); }

/* --neutral- colors */
.bg-neutral-50 { background-color: var(--neutral-50); }
.bg-neutral-100 { background-color: var(--neutral-100); }
.bg-neutral-200 { background-color: var(--neutral-200); }
.bg-neutral-300 { background-color: var(--neutral-300); }
.bg-neutral-400 { background-color: var(--neutral-400); }
.bg-neutral-500 { background-color: var(--neutral-500); }
.bg-neutral-600 { background-color: var(--neutral-600); }
.bg-neutral-700 { background-color: var(--neutral-700); }
.bg-neutral-800 { background-color: var(--neutral-800); }
.bg-neutral-900 { background-color: var(--neutral-900); }

.text-neutral-50 { color: var(--neutral-50); }
.text-neutral-100 { color: var(--neutral-100); }
.text-neutral-200 { color: var(--neutral-200); }
.text-neutral-300 { color: var(--neutral-300); }
.text-neutral-400 { color: var(--neutral-400); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-800 { color: var(--neutral-800); }
.text-neutral-900 { color: var(--neutral-900); }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Spacing */
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.pl-1 { padding-left: var(--spacing-1); }
.pr-1 { padding-right: var(--spacing-1); }
.pl-2 { padding-left: var(--spacing-2); }
.pr-2 { padding-right: var(--spacing-2); }


.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }

/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ============================================================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ============================================================================ */
/* Mobile Small - 320px */
@media (max-width: 374px) {
  :root {
    --font-size: 14px;
    --radius: 0.375rem;
  }
}
/* Mobile - 375px to 767px */
@media (min-width: 375px) and (max-width: 767px) {
  :root {
    --font-size: 15px;
  } 
  .bottom-nav {
    display: flex;
  }
}
/* Tablet - 768px to 1023px *//*--------------------------------------------ver bien-------*/
@media (min-width: 768px) {
  :root {
    --font-size: 16px;
    --radius: 0.5rem;
  }
  .bottom-nav {
    display: none;
  }
  .grid-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Desktop - 1024px and up */
@media (min-width: 1024px) {
  :root {
    --font-size: 16px;
    --radius: 0.625rem;
  }
  .grid-lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Large Desktop - 1440px and up */
@media (min-width: 1440px) {
  :root {
    --font-size: 15px;
  }
}
/* Android específico - Dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  :root {
    /* Aumentar contraste y tamaños para touch */
    --primary: var(--mp-600);
    --surface: var(--neutral-50);
    --on-surface: var(--neutral-900);
  }
  /*DARK*/
  .dark {
    --primary: var(--mp-400);
    --surface: var(--neutral-900);
    --on-surface: var(--neutral-50);
  }  
  /* Aumentar área de toque */
  .btn,
  .button {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
}
/* ============================================================================
   BOOTSTRAP COMPATIBILITY CLASSES
   ============================================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
  height: 100%;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-0));
  width: 100%;
}
.col {
  flex: 1;
  padding: 0 var(--spacing-3);
}
.col-12 { width: 100%; }
.col-6 { width: 50%; }
.col-4 { width: 33.333%; }
.col-3 { width: 25%; }
@media (min-width: 768px) {
  .col-md-12 { width: 100%; }
  .col-md-6 { width: 50%; }
  .col-md-4 { width: 33.333%; }
  .col-md-3 { width: 25%; }
}
@media (min-width: 1024px) {
  .col-lg-12 { width: 100%; }
  .col-lg-6 { width: 50%; }
  .col-lg-4 { width: 33.333%; }
  .col-lg-3 { width: 25%; }
}
.app-layout {
    display: flex;
          min-height: 100vh;
        }

/* =====================================================
   Todos estos estilos son los originales de tailometry
    2. LANDING / NAVBAR / INDEX
   ===================================================== */


/* Sección hero */
.hero-section {
    background: radial-gradient(circle at top left, var(--mp-cream), var(--mp-peach));
    color: var(--mp-text-main);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.12"><circle cx="200" cy="100" r="220" fill="%23ffffff"/><circle cx="900" cy="300" r="180" fill="%23ffffff"/></svg>');
    background-size: cover;
}
.hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}
.hero-subtitle {
    font-size: 1.15rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}
/* Título genérico de sección */
.section-title {
    font-size: 2.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--mp-text-main);
}
/* Tarjetas de features en landing */
.feature-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 2.3rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);
}
/* ============================================================================
   BASE STYLES
   ============================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: var(--font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-weight: var(--font-weight-normal);
  transition: background-color 0.4s ease, color 0.4s ease;
  
}
html, body { height: 100%; overflow: visible; }
.no-bullets {
  list-style-type: none;
  padding: 0; /* Optional: Removes default left padding (margin in some browsers) */
  margin: 0;  /* Optional: Removes default margin */
}
/** {
  scrollbar-width: thin; /* Opciones: auto, thin */
  scrollbar-color: #888 transparent; /* thumb | track */
/*}*/

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, .h1 {
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--foreground);
}
h2, .h2 {
  font-size: 1.875rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--foreground);
}
h3, .h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--foreground);
}
h4, .h4 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--foreground);
}
p {
  margin-bottom: 1rem;
}
/* =====================================================
   9. UTILIDADES VARIAS
   ===================================================== */
.text-muted-soft {
    color: var(--mp-text-muted);
}
.badge-status {
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: var(--font-size-small);
    font-weight: 500;
}
.badge-status--active {
    background: rgba(22,163,74,0.1);
    color: var(--mp-success);
}
.badge-status--pending {
    background: rgba(245,158,11,0.1);
    color: var(--mp-warning);
}
.badge-status--inactive {
    background: rgba(220,38,38,0.08);
    color: var(--mp-danger);
}
.bi-gear::before { /*----------------------------------------------------------*/
    content: "\f3e5";
    color: var(--neutral-50)
}
/* Mobile Menu Toggle */
.topbar-menu-toggle {
    display: block;
}
/* =====================================================
   5. SHELL GENERAL (SIDEBAR + TOPBAR) PARA APP / ADMIN
   (basado en tus mockups)
   ===================================================== */
.mp-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /*grid-template-columns: 72px minmax(0, 1fr);*/
    background: linear-gradient(90deg, var( --primary-acent), var( --secondary-acent));    
}
/* Panel derecho: topbar + contenido */
.mp-main {
    display: flex;
    flex-direction: column;
}
/* Contenedor principal de contenido interno */
.mp-content {
    padding: var(--spacing-0);
    /*background-color: var(--background);*/
}
.clients-container{
  color: var(--on-surface);
  padding: var(--spacing-0);
  display: flex;
  flex-direction: column;
  inset: 48px 0 0 0;
  width: 99%;
  height: calc(100vh - 55px);
  position: fixed;
  margin: 0 auto;
}
.sessions-container {
  color: var(--on-surface);
  padding: var(--spacing-0);
  display: flex;
  flex-direction: column;
  inset: 48px 0 0 0;
  width: 99%;
  height: calc(100vh - 55px);
  position: fixed;
  margin: 0 auto;
}
@media (max-width: 1200px) {
    .sessions-container
    .clients-container {
        position:relative;
    }
}
.patterns-container {
  color: var(--on-surface);
  padding: var(--spacing-0);
  display: flex;
  flex-direction: column;
  inset: 48px 0 0 0;
  width: 1200px;
  height: calc(100vh - 55px);
  position: relative;
  margin: 0 auto;
}
/* ==================
PANEL DE MAIN SESSON
======================*/
.pane-wraper{
  margin-top: 0 !important;
  height: calc(100vh - 97px);
}
/* Contenedor DERECHO MAIN SEASSON */
.pane-wraper-left{
  margin-top: 20px !important;
  height: calc(100vh - 155px);
  padding: 0 !important;
}
/* ============================================================================
   BOTONES - TODOS LOS ESTILOS Y VARIANTES
   ============================================================================ */
.border-bottom-color, .border-left-color, .border-top-color, .border-right-color{
    border-color: none;
}
.back .bi::before {
 font-size: 25px !important;
 font-weight: var(--font-weight-bold) !important;
 vertical-align: -.225em !important;
}
/* Ejemplo: Todos los botones que comienzan con btn- */
button[class^="btn-"], 
a[class^="btn-"] {
   white-space: nowrap;
}
/* Estilo adicional para hover */
button[class^="btn-"]:hover, 
a[class^="btn-"]:hover {
    white-space: nowrap;
}
/* Botón "Continuar con Google" (login/registro) */
.btn-google {
  background: #ffffff;
  border: 2px solid var(--border) !important;
  color: var(--mp-text-muted) !important;
  padding: 12px 30px;
  border-radius: var(--radius-full) !important;
  font-weight: 600;
  transition: all 0.18s ease;
}
.btn-google:hover {
    border-color: #4285f4 !important;
    color: #4285f4 !important;
}
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base) var(--transition-ease);
  text-decoration: none;
  outline: none;
}
.btn:focus,
.button:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/*.btn:first-child:active{
  background-color: var(--primary);
  color: var(--primary-foreground);
}*/
.btn:disabled,
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Tamaños de botones */
.btn-sm {
  height: 2rem;
  padding: 0 1rem;
  font-size: var(--font-size-base);
  border-radius: var(--radius-full);
}
.btn-md,
.btn {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: var(--font-size-base);
  border-radius: var(--radius-full);
}
.btn-lg {
  height: 3rem;
  padding: 0 2rem;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-full);
}
.btn-primary, .btn-secondary, .btn-ghost, .btn-outline, .btn-panel{
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-outline:active,
.btn-primary.active, .btn-secondary.active, .btn-ghost.active, .btn-outline.active,
.btn-panel:active, .btn-panel.active, .btn-instance:active, .btn-instance.active,
.btn-delete-instance:active, .btn-delete-instance.active,
.no-btn:active, .no-btn.active{
  transform: scale(0.95);    /* Efecto de "hundido" o pulsación */
  transition: transform 0.1s ease; /* Más rápido al presionar para dar feedback */
}
.btn-outline-danger:hover {
    /*color: var(--bs-btn-active-color);*/
    background-color: var(--primary);
    border-color: var(--primary);
    padding: 6px 12px;
}
/* Variante Primary */
.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
  border: 0px;
}
.btn-primary:hover {
  background-color: var(--primary-hover);
}
.btn-primary:active {
  background-color: var(--primary-active);
}
.btn-primary.active {
  background-color: var(--primary-active);
}
/* Variante Secondary */
.btn-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
  border: 0px;
}
.btn-secondary:hover {
  background-color: var(--secondary-hover);
}
.btn-secondary:active {
  background-color: var(--secondary-active); 
}
.btn-secondary.active {
  background-color: var(--secondary-active); 
}
/* Variante teriary */
.btn-tetriary {
  background-color: var(--tetriary);
  color: var(--on-tetriary);
  border: 0px;
}
.btn-tetriary:hover {
  background-color: var(--secondary-hover);
}
.btn-tetriary:active {
  background-color: var(--secondary-active); 
}
.btn-tetriary.active {
  background-color: var(--secondary-active); 
}
/* Variante Ghost */
.btn-ghost {
  background-color: transparent;
  color: var(--foreground);
  border: 0px;
}
.btn-ghost:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
.btn-ghost:active {
  background-color: var(--accent-hover);
}
/* Variante Outline */
.btn-outline {
  background-color: transparent;
  color: var(--foreground);
  border: 3px solid var(--border);
}
.btn-outline:hover {
  background-color: var(--accent);
  border-color: var(--primary);
}
.btn-outline:active {
  background-color: var(--accent-hover);
}
.btn-outline.active {
  background-color: var(--accent-hover);
}
.no-btn{
  background: none;
  border: none;
}
.btn-dark{
}
.btn-close{
color: var(--foreground);
}
/* Variante Destructive */
.btn-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  border: 0px;
}
.btn-destructive:hover {
  background-color: var(--destructive-hover);
}
.btn-destructive:active {
  transform: scale(0.95);
}
/* Botones de icono */
.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  background-color: var(--hover-link);
  color: var(--primary-foreground);
}
.btn-icon:hover {
  background-color: var(--primary-hover);
}
.btn-icon:active {
  transform: scale(0.95);
}
.btn-icon-sm {
  width: 2rem;
  height: 2rem;
}
.btn-icon-lg {
  width: 3rem;
  height: 3rem;
}
.btn-icon {
  /*padding: 10px;
  width: 40px;
  height: 40px;
  display: flex;*/
  align-items: center;
  justify-content: center;
}
.btn-sm {
  padding: 0px 20px;
  font-size: var(--font-size-xs);
}
.btn-link, .btn-link-destructive {
    font-weight: var(--font-weight-medium);
    color:var(--foreground);
    text-decoration: none;
}
.btn-link.active, .btn-link:active, .btn-link:hover{
  background-color: none;
  color: var(--secondary-acent-up);
}
.dark .btn-link{
  color: var(--text-gray);
}
.btn-link-destructive {
    font-weight: var(--font-weight-medium);
    color:var(--destructive);
    text-decoration: none;
}

.btn-link-destructive, .btn-link-destructive.active, .btn-link-destructive:active, .btn-link-destructive:hover {
  background-color: none;
  color: var(--destructive-hover);
}
.danger:hover {
    background-color:var(--destructive-hover) !important;
    color: var(--destructive);
}

/* ============================================================================
   CARDS
   ============================================================================ */
.card, .card-container, .card-bars, .card-elevated, .card-outlined {
  transition: border-color var(--transition-base) var(--transition-ease);
  box-shadow: var(--shadow-md);
}
.card {
  background-color: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-6);
}
.card-surface-color{
  background-color: var(--surface-container-2);
  color: var(--on-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-6);
}
.card-container{
  background-color: var(--surface-container-1);
  color: var(--on-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-1);
}

.dark .card-container {
  background-color: var(--surface-variant);
  color: var(--on-surface-variant);
}
.card-bars{
  background-color: var(--surface-container-5);
  color: var(--on-surface-variant);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2);
}
.card-elevated {
  background-color: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-lg);
}
.card-elevated:hover {
  box-shadow: var(--shadow-xl);
}
.card-outlined {
  background-color: transparent;
  color: var(--foreground);
  border: 2px solid var(--border);
  border-radius: var(--radius-2xl);
}
.card-outlined:hover {
  border-color: var(--border);
}
.card-header {
  margin-bottom: var(--spacing-1);
  height: 2.5rem;
  background-color: transparent;
  padding: var(--spacing-2) var(--spacing-2);
}
.card-title {
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}
.card-body {
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-2);
}
.card-footer {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--border);
}
/* Tarjetas de estadísticas en admin clásico */
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.stat-card:hover {
  transform: translateY(-5px);
}
/* =====================================================
   4. AUTENTICACIÓN (LOGIN / REGISTRO / VERIFICACIÓN)
   ===================================================== */
/* Fondo general de pantallas de auth */
.auth-bg {
    background: radial-gradient(circle at top left, var(--mp-cream), var(--mp-peach));
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, var( --primary-acent), var( --secondary-acent));
}
/* Tarjeta central (login / registro / verificación) */
.auth-card {
    background: var(--surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 460px;
    width: 100%;
    border: 1px solid var(--border);
}
.auth-card-register {
    background: var(--surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 660px;
    width: 100%;
    border: 1px solid var(--border);
}
/* Logo Measure+ en auth */
.brand-xl {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.mp-logo-xl{
  width: 150px;
  height: auto;
  fill: var(--secondary-acent-up);
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));
}
/* Icono para mostrar/ocultar contraseña */
.password-toggle {
    position: absolute;
    right: 15px;
    top: 55%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
}
/* Separador "o continuar con Google" */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--mp-text-muted);
    margin: 20px 0;
}
.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}
.divider::before {
    margin-right: 10px;
}
.divider::after {
    margin-left: 10px;
}
.text-divider{
  width: 100%;
  height: 1px;
  background-color: var(--border);
}
/* Barra de fortaleza de contraseña (registro) */
.password-strength {
    height: 4px;
    border-radius: 2px;
    margin-top: 5px;
    transition: all 0.3s;
}
.strength-weak {
    background: var(--mp-danger);
    width: 25%;
}
.strength-medium {
    background: var(--mp-warning);
    width: 50%;
}
.strength-strong {
    background: var(--mp-success);/*-------------------------------*/
    width: 75%;
}
/* Campo de código de verificación (Verificación.html) */
.code-input {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 15px;
    text-align: center;
    padding: 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.3s;
}
.code-input:focus {
    border-color: var(--mp-peach-strong);/*---------------------------------------*/
    box-shadow: 0 0 0 0.15rem rgba(243, 169, 122, 0.35);
    outline: none;
}
/* Timer de expiración del código */
.timer {
    font-size: 0.875rem;
    font-weight: 600;
}
.timer-expired {
    color: var(--mp-danger);
}
.timer-warning {
    color: var(--mp-warning);
}
.timer-ok {
    color: var(--mp-success);
}

/* =====================================================
   8. MODALES (Agregar cliente, etc.)
   ===================================================== */
.modal-content {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface-container-1);
    color: var(--on-surface);
}
.modal-header {
    border-bottom: 1px solid var(--border);
}
.modal-title {
    font-weight: 600;
}
/* Placeholder imagen perfil en modal */
.mp-modal-profile-placeholder {
    border-radius: var(--radius-md);
    border: 1px dashed #D1D5DB;
    background: var(--surface-variant);
    width: 140px;
    height: 140px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--on-surface-variant);
    font-size: 1.8rem;
}
/* ============================================================================
   TOOLTIP
   ============================================================================ */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}
.tooltip {
  position: absolute;
  z-index: 50;
  padding: 0.3rem 0.65rem;
  background-color: var(--popover-foreground);
  color: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base) var(--transition-ease);
  font-size: 13px;
  font-weight: 500;
}
.tooltip-wrapper:hover .tooltip {
  opacity: 1;
}
.tooltip-top {
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-bottom {
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-left {
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-right {
  left: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-top::after {
  content: " ";
  position: absolute;
  top: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color:   var(--popover-foreground) transparent transparent transparent;
}
.tooltip-bottom::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--popover-foreground) transparent;
}
.tooltip-left::after {
  content: " ";
  position: absolute;
  bottom: 35%;  /* At the top of the tooltip */
  left: 100%;
  margin-left: 0px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent var(--popover-foreground) ;
}
.tooltip-right::after {
  content: " ";
  position: absolute;
  bottom: 35%;  /* At the top of the tooltip */
  left: 0%;
  margin-left: -9px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--popover-foreground)  transparent  transparent;
}
.tooltip {
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* Evita que el tooltip interfiera con otros elementos */
    transition: opacity 0.2s;
    position: absolute;
    z-index: 1070; /* Por encima de la card (1000) */
}
.tooltip-wrapper:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/*============== chechbox pesonalizado ==================*/
/* 1. Ocultar el estilo nativo */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #474d57; /* Color de borde apagado */
  border-radius: 2px;
  background-color: transparent;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: 0.2s all;
}

/* 2. Estilo cuando está marcado */
input[type="checkbox"]:checked {
  background-color: var(--secondary-acent);
    border-color: var(--border);
    display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: 0.2s all;
}

/* 3. Crear la "tilde" (check) usando un pseudo-elemento */
input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: #181a20; /* Color de la tilde */
  /* Forma de tilde usando clip-path */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* 4. Efecto Hover */
input[type="checkbox"]:hover {
  border-color: #181a20;
}
/*========================================
              TOGGLE MENU LEFT
========================================*/              
.navbar-toggler {
  padding: 0.25rem 1rem;
  font-size: var(--font-size-sm);
  line-height: 1;
  color: var(--neutral-400);
  background-color: transparent;
  border: none;
  transition: var(--bs-navbar-toggler-transition);
  display: block !important;
}
.navbar-toggler:hover {
  color: var(--neutral-50);
}
.navbar-toggler:focus {
  color: var(--neutral-50);
  box-shadow: 0 0 0 0.10rem var(--neutral-50);
}
.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
}
.navbar-collapse {
  position: absolute;
  top: calc(100% - 0.65rem);
  left: 1.4rem;
  width: 12rem;
  background-color: var(--surface); /* Ajusta según tu modo oscuro/claro */
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 8px 0;
  border: 1px solid var(--border);
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0.13, 1), 
              transform 0.2s cubic-bezier(0.2, 0, 0.13, 1);
  pointer-events: none; /* Evita clics cuando está oculto */
 padding: 10px;
}
/* Estado Activo (Cuando Bootstrap añade la clase .show) */
.navbar-collapse.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
/* 2. Control de visibilidad estricto */
.navbar-collapse.collapse:not(.show) {
    display: none !important;
}
.navbar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3);
    color: var(--on-surface);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base) var(--transition-ease);
    cursor: pointer;
    height: 50px;
}
.navbar-link:hover {
    background-color: var(--hover-light);
}
.navbar-link .active {
  color: var(--mp-text-white);
}
.navbar-item{

}
.navbar-item:hover {
  color: var(--mp-text-white);
}

.navbar-actions-wrapper{
  height: 3rem;
}
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}
/* ============================================================================
   NAVIGATION NAVBAR OCULTA
   ============================================================================ */
.navbar {
  height: 3rem;
  top: 0;
  margin-top: 0px;
}
.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
  padding: 0 var(--spacing-4);
  margin: 0 auto;
  width: 100%;
}
.navbar-brand{
  width: 7rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
/* Marca navbar landing */
.navbar-mp-logo{
    width: 100px;
    height: auto;
    fill: var(--on-surface-variant);
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));
}
/* ===== NAVIGATION  TOPBAR ===== 
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background-color: var(--surface-container-1);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-6);
  z-index: 100;
  backdrop-filter: blur(10px);
}
/*DARK*/
.dark .topbar {
  background-color: rgba(46, 44, 45, 0.95);/*----------------------------------*/
}
/* ===== PROFILE MENU ===== */
.profile-menu-wrapper, .client-profile-wrapper, .client-center-wrapper {
    position: relative;
    display: flex;
    gap: 5px;
}
.profile-trigger, .client-profile-trigger {
   width: 2rem;
    height: 2.5rem;
    /* border-radius: var(--radius-full); */
    background: none;
    border: none;
    color:var(--text-gray);
    cursor: pointer;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    /* font-weight: var(--font-weight-semibold); */
    /* transition: all var(--transition-base) var(--transition-ease);*/
}
.profile-trigger:hover, .client-profile-trigger:hover {
    transform: scale(1.05);
    border-color: var(--primary);/*--------------------------------------------------------*/
}
.profile-menu, .client-profile {
    position: absolute;
    top: calc(100% - 1rem);
    right: 2.5rem;
    width: 14rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}
.client-profile {
    position: absolute;
    top: calc(100% - 0.5rem);
    right: 1rem;
    width: 20rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
    
}
.profile-menu.active, .client-profile.active {
    display: flex;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.profile-menu-header {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}
.profile-menu-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-acent), var(--secondary-acent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-00);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.profile-menu-info {
    flex: 1;
    overflow: hidden;
}
.profile-menu-name {
    font-weight: var(--font-weight-semibold);
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-menu-email {
    font-size: 0.75rem;
    color: var(--on-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-menu-items {
    padding: var(--spacing-2);
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    color: var(--on-surface);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base) var(--transition-ease);
    cursor: pointer;
    width: 100%;
}
.client-field{
 
}
.profile-menu-item:hover {
    background-color: var(--hover-light);
    width: 100%;
}
.profile-menu-item.danger {
    color: var(--destructive);
}

.profile-menu-footer {
    padding: var(--spacing-2);
    border-top: 1px solid var(--border);
}
/* ===== PROFILE CARD ===== */
.profile-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    max-width: 24rem;
    box-shadow: var(--shadow-lg);
}
.profile-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--spacing-6);
}
.profile-card-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-acent), var(--secondary-acent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface);
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    border: 4px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.profile-card-name {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--on-surface);
    margin-bottom: var(--spacing-1);
}
.profile-card-role {
    font-size: 0.875rem;
    color: var(--on-muted);
    margin-bottom: var(--spacing-3);
}
.profile-card-bio {
    font-size: 0.875rem;
    color: var(--foreground);
    line-height: 1.5;
}
.profile-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.profile-stat {
    text-align: center;
}
.profile-stat-value {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary);
}
.profile-stat-label {
    font-size: 0.75rem;
    color: var(--on-muted);
    margin-top: 0.25rem;
}
.profile-card-actions {
    display: flex;
    gap: var(--spacing-3);
}
/* ===== ICONOS SVG ===== */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm {
  width: 16px;
  height: 16px;
}
/* Actions */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.topbar-btn {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background-color: transparent;
    border: none;
    color: var(--on-muted);
    cursor: pointer;
    transition: all var(--transition-base) var(--transition-ease);
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar-btn:hover {
    background-color: var(--hover-link);
    color: var(--on-hover-link);
}
/* Notification Badge */
.topbar-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    border: 2px solid var(--card);
}
/* User Account */
.topbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0.25rem 0.25rem 0.25rem var(--spacing-3);
   /* background-color: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base) var(--transition-ease);*/
}
.topbar-user:hover {
   background-color: var(--hover-light);
}
.topbar-user-info, .topbar-client-info {
    display: none;
    flex-direction: column;
    align-items: flex-end;
}
.topbar-user-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: 1.2;
    padding: .5rem;
}
.topbar-client-name{
   font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: 1.2;
}
.topbar-user-email {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    line-height: 1.2;
}
.topbar-avatar {
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-acent), var(--secondary-acent-up));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-00);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    flex-shrink: 0;
    border: 1px solid var(--border);
    padding-top: 2px;
}
.profile-photo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
}

.profile-avatar {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    flex: 0 0 auto;
}

.avatar--xs {
    width: 28px;
    height: 28px;
}
.avatar--sm {
    width: 34px;
    height: 34px;
}

.avatar--md {
    width: 42px;
    height: 42px;
}

.avatar--lg {
    width: 64px;
    height: 64px;
}

.profile-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
 
.profile-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
     font-size: 0.875rem;
    color: #ffffff;
}

.profile-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-avatar-button {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}


/* Sección derecha de cliente (imagen + acciones) */
.mp-profile-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
}
/* Placeholder de foto/avatar/3D del cliente */
.mp-profile-placeholder {
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  background: var(--surface);
  width: 160px;
  height: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--on-surface);
  font-size: 2rem;
  margin: 0 auto;
}
/* ============================
        Dark/Light Switch 
   ============================ */
.theme-switch {
   display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 0.20rem;
    background-color: var(--neutral-50);
    border-radius: var(--radius-full);
    height: 25px;
    width: 55px;
}
.theme-switch-btn {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: var(--radius-full);
    background-color: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-base) var(--transition-ease);
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-switch-btn.active {
    background-color: var(--secondary-acent);
    color: var(--on-surface-variant);
}
.btn-theme-toggle{
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-00);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    flex-shrink: 0;
    border:none;
}
.btn-theme-toggle:hover{
    width: 2rem;
    height: 2rem;
    background-color: var(--hover-light);

}
.dark .btn-theme-toggle:hover{
    width: 2rem;
    height: 2rem;
    background-color: var(--on-hover-link);

}
/* Estilo base del botón */
#themeToggle {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio entre icono y texto */
  font-family: system-ui, sans-serif;
}

/* Estilo para el icono dentro del botón */
#themeToggle i {
    font-family: "bootstrap-icons";
    font-style: normal;
    vertical-align: middle;
    position: relative;
    top: -2px;
    left: 1px;
    font-size: var(--font-size-md);
    color: var(--primary);
}
.dark #themeToggle i {
    color: var(--primary);
}

/* Cambios de colores según el modo */
html.dark #themeToggle {
  color: var(--primary);
    position: relative;
    top: -1px;
    left: 1px;
    
}
/* =====================================================
   6. TABLAS Y LAYOUTS (CLIENTES, MEDIDAS, LOGS)
   ===================================================== */
   /*CSS opcional (para que se note “bloqueado”)*/
.session-menu-btn.disabled,
.session-menu-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.session-menu-btn{
background: none;
    border: none; 
}
.session-menu-btn:focus{
  border-color: var(--secondary-acent);
  box-shadow: 0 0 0 3px rgba(173, 217, 230, 0.5);
  outline: none;
}
.session-menu-btn:not(:disabled) {
  opacity: 1;
  color: var(--primary);
}
/* Eliminar de todos los dropdowns */
.dropdown-toggle::after {
    display: none !important;
}
/* Añadir uno personalizado (ejemplo con emoji o carácter) */
.dropdown-toggle::before {
    content: ' ▼'; 
    font-size: 0.8em;
    margin-right: 5px;
    display: none;
}
.dropdown-menu-end{
  position: fixed !important;
  inset: 9px 0px auto auto !important;
    margin: 0px;
    transform: translate3d(-829.6px, 154.4px, 0px);
}
.dropdown-menu.show {
   display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    padding: 5px 12px;
    z-index: 101;
}
.session-menu {
  display: none;
  position: absolute;
  right: -2px !important;
  top: -2px !important;
  background:var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 50;
  font-size: var(--font-size-base);
  text-align: left;
  width: 180px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.dropdown-item{
     display: block;
    width: 100%;
    padding: 0px 10px;
    clear: both;
    font-weight: 400;
    color: var(--text-main);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    margin: 3px 5px;
    height: 32px;
}
.dropdown-item:hover {
    background-color:var(--hover-light);
    color: var(--on-hover-link);
    width: 100%; 
}
.dropdown-item:active, .dropdown-item.active{
  background-color: var(--hover-light);
  color: var(--on-hover-link);
}
/* ========================================================
                        TABLA PRINCIPAL!
==========================================================*/
.table-controls{
  height: 2.3rem;
  z-index: 100;
  position: relative;
}
/* Resaltado para las medidas seleccionadas */
tr:has(input[type="checkbox"]:checked) {
    background-color: rgba(240, 185, 11, 0.1) !important;
    border-left: 4px solid #f0b90b;
}

/* Opcional: un pequeño badge que diga "Fijado" o un icono */
tr:has(input:checked) td:first-child::after {
  content: "";
  font-size: 0.7rem;
  margin-left: 5px;
  vertical-align: middle;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 10; /* Mayor que el de los checkboxes y filas */
  background-color: var(--hover-light);  /* Color sólido para que no trasluzca */
}
.tabla-borders{
    overflow-y: hidden;
    background: var(--surface-container-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
    height: calc(100vh - 155px);
    margin-top: 20px;
    margin-left: 0px;
}
.tabla-borders-clients{
   height: auto;
   overflow-y: hidden;
   background: var(--surface-container-3);
   box-shadow: var(--shadow-sm);
   margin-bottom: 0rem;
   margin-top: 0px;
   border-spacing: 0;
   border-collapse: separate;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
}
.mp-table-clients {
 border-spacing: 0;
 border-collapse: separate;
 border: 1px solid var(--border);
 border-style: hidden; /* hide standard table (collapsed) border */
 box-shadow: 0 0 0 1px var(--shadow-sm); /* this draws the table border  */ 
}
/* Apply a border to the right of all but the last column */
.mp-table-clients th:not(:last-child),
.mp-table-clients td:not(:last-child) {
 border-right: 1px solid var(--border);
 border-spacing: 0
}
.mp-table-clients tr:last-child td:first-child {
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-lg);
  border-spacing: 0;
}
.mp-table-clients tr:last-child td:last-child {
  border: 1px solid var(--border);
  border-bottom-right-radius: var(--radius-lg);
  border-spacing: 0;
}
.table-overflow{
  overflow-y: auto;
  max-height: 93%;
    /* 4. Estética: oculta la barra de scroll en navegadores modernos pero permite scrollear */
  
}
/* 1. Ancho de la barra de desplazamiento (total) */
.table-overflow::-webkit-scrollbar {
  width: 8px; /* Vertical */
  height: 8px; /* Horizontal */
}

/* 2. Pista o Fondo (se hace transparente) */
.table-overflow::-webkit-scrollbar-track {
  background: transparent;
}

/* 3. Thumb o Barra arrastrable (estilo visible) */
.table-overflow::-webkit-scrollbar-thumb {
  background-color: var(--secondary-acent); /* Color de la barra */
  border-radius: 8px; /* Bordes redondeados */
  border: 2px solid transparent; /* Crea un margen visual */
  background-clip: content-box; /* Aplica color solo al contenido */
}
.dark .table-overflow::-webkit-scrollbar-thumb {
  background-color: var(--neutral-700); /* Color de la barra */
}

/* 4. Hover del Thumb (opcional, para cambiar color al pasar el mouse) */
.table-overflow::-webkit-scrollbar-thumb:hover {
  background-color: var(--hover-link);
}
.mp-table {
  width: 100%;
  font-size: var(--font-size-sm);
  border-style: hidden;
  scrollbar-color: transparent;
  scrollbar-width:auto;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid var(--border);
  border-style: hidden; /* hide standard table (collapsed) border */
  box-shadow: 0 0 0 1px var(--shadow-sm); /* this draws the table border  */ 
  }
/* Apply a border to the right of all but the last column */
.mp-table th:not(:last-child),
.mp-table td:not(:last-child) {
 border-right: 1px solid var(--border);
 border-spacing: 0;
 border-top: none;
 border-bottom: 1px solid var(--border);
}
.mp-table tr:last-child td:first-child {
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-lg);
  border-spacing: 0
}
.mp-table tr:last-child td:last-child {
  /*border: 1px solid var(--mp-beig);*/
  border-bottom-right-radius: var(--radius-lg);
  border-spacing: 0;
  border-top: none;
}
.align-middle thead th {
  position: sticky; /* Makes the header "sticky" */
  top: 0; /* Sticks it to the top of its scrolling container */
  z-index: 2; /* Ensures the header stays on top of the body content */
  background: var(--primary-acent);
  padding: 10px 0;
  color: var(--on-surface-variant);
  font-weight: 500;
}
.dark .align-middle thead th {
  background: var(--neutral-800);
  padding: 10px 0;
  color: var(--on-surface-variant);
  font-weight: 500;
  border-top: 1px solid var(--border);
}
.mp-table thead{
  background: var(--surface);
 
}
.mp-table tr {
  background: var(--surface); 
}
.mp-table tr:hover {
  background: var(--hover-light); 
}
.mp-table th{
  font-weight: var(--font-weight-bold); 
}
.mp-table th,
.mp-table td {
  padding: 0.22rem 0.35rem;
  text-align: left;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  font-weight: var(--font-weight-normal);
}
.id-name th td{
  width: 50px;
}
/* ========================
   FORM ELEMENTS
   ======================== */
.form-group {
  margin-bottom: var(--spacing-4);
}
.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}
/* CELDAS TABLAS COLORES*/
.mp-form-control {
    display: block;
    width: 100%;
    padding: 0px;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--foregrpund);
    background-color:transparent;
    border:none;
    text-align: center; 
}
/* Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* VALORES ESCANEADOS */
input.source-scanner {
    color: #0275d8 !important;      /* azul */
    border-color: #0275d8 !important;
    font-weight: 500;
}
/* VALORES MANUALES INICIALES */
input.source-manual {
    color: #5cb85c !important;      /* verde */
    border-color: #5cb85c !important;
    font-weight: 500;
}
/* VALORES EDITADOS */
input.source-edited {
    color: #7b3fe4 !important;      /* rojo */
    border-color: #d9534f !important;
    font-weight: 500;
}
.session-rename-input, .client-inline-input {
  height: 30px;
}
textarea {
  min-height: 8rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  resize: vertical;
}
.form-helper-text {
  margin-top: var(--spacing-1);
  font-size: 0.875rem;
  color: var(--on-muted);
}
.form-error-text {
  margin-top: var(--spacing-1);
  font-size: 0.875rem;
  color: var(--destructive);
}

/* Campos readonly */
.dark input[readonly],
.dark textarea[readonly] {
  color:var(--text-00);
  font-weight: var(--font-weight-thin);
}

.input-detailed{
  background-color: var(--neutral-40);
}
.dark .input-detailed {
  background-color: var(--neutral-850);
}
.readonly {
    background-color:var(--primary-01);
}
.dark .readonly {
    background-color:var(--neutral-850);
  
}
/* VALORES ESCANEADOS */
.dark input.source-scanner {
    color: #0275d8 !important;      /* azul */
    border-color: #0275d8 !important;
    font-weight: 500;
}
/* VALORES MANUALES INICIALES */
.dark input.source-manual {
    color: #6eeb6e !important;      /* verde */
    border-color: #6eeb6e !important;
    font-weight: 500;
}
/* VALORES EDITADOS */
.dark input.source-edited {
    color: #59d6ff !important;      /* rojo */
    border-color: #59d6ff !important;
    font-weight: 500;
}
.border-0{
  border: 1px solid var(--border) !important;
}
.border-2{
      border: #005fcc solid 2px;
    border-color: #ff0000;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
}
/* ==============================
   NAV-RAIL - Action table
================================ */
.nav-rail {
  display: flex;
  width: 4rem;
  flex-direction: column;
  align-items: center;
  position: sticky;
  left: 5px;
  top: 0;
  padding: var(--spacing-4) 0;
  gap: var(--spacing-4);
  z-index: 30;
  margin-top: 20px;
  margin-right: 5px;
 /* height: calc(100vh - 155px);*/
}
.nav-rail-logo {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-rail-divider {
    width: 2.5rem;
    height: 1px;
    background-color: var(--border);
}
.nav-rail-nav {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-2);
}
.nav-rail-switch {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding:0 var(--spacing-3) var(--spacing-2);
    color: var(--on-muted);
    text-decoration: none;
    border-radius: var(--radius-xl);
    transition: all var(--transition-base) var(--transition-ease);
    position: relative;
}
.switch .nav-rail-label {
    font-size: 0.65rem;
    font-weight: 500;
    text-align: center;
} 
.nav-rail-link {
    width: 48px;
    width: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-0) var(--spacing-0);
    color: var(--on-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-base) var(--transition-ease);
    position: relative;
    font-weight: var(--font-weight-medium);
}
.nav-rail-link .nav-rail-icon {
  padding: 10px 14px; /* Ajusta el tamaño del recuadro */
  border-radius: var(--radius-sm); /* Controla qué tan redondeado es el recuadro */
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease; /* Transición suave para el color y fondo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.nav-rail-link .nav-rail-label{
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    color: var(--on-mute);
}  
.nav-rail-link-vertical {
    width: 48px;
    width: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-0) var(--spacing-0);
    color: var(--on-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-base) var(--transition-ease);
    position: relative;
    font-weight: var(--font-weight-normal);
    flex-flow: wrap;
    justify-content: center;
}
.nav-rail-link-vertical .nav-rail-icon {
  padding: 10px 12px; /* Ajusta el tamaño del recuadro */
  border-radius: var(--radius-sm); /* Controla qué tan redondeado es el recuadro */
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease; /* Transición suave para el color y fondo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.nav-rail-link-vertical .nav-rail-label-vertical{
  font-size: 0.55rem;
  /* font-size: var(--font-size-small);*/
  font-weight: var(--font-weight-normal);
  text-align: center;
  /*writing-mode: vertical-lr;*/
  /*transform: rotate(180deg);*/
} 
.nav-rail-link:hover .nav-rail-icon, .nav-rail-link-vertical:hover .nav-rail-icon{
  background-color: var(--hover-link);
  color: var(--on-hover-link);
  font-weight: var(--font-weight-normal);
}
.nav-rail-link:hover .nav-rail-label{
  background-color: var(--hover-link);
  color: var(--on-hover-link);
  font-weight: var(--font-weight-medium);           
}
.nav-rail-link-vertical:hover .nav-rail-label-vertical{
  color: var(--on-hover-link);
  font-weight: var(--font-weight-medium);           
}
.nav-rail-link:active .nav-rail-icon, .nav-rail-link-vertical:active .nav-rail-icon{
  background-color: var(--hover-link);
  color: var(--on-hover-link);
  transform: scale(0.95);    /* Efecto de "hundido" o pulsación */
  transition: transform 0.1s ease; /* Más rápido al presionar para dar feedback */
}
.nav-rail-link:active .nav-rail-label, .nav-rail-link-vertical:active .nav-rail-label-vertical{
  color: var(--on-hover-link);
  font-weight: var(--font-weight-medium);   
   transform: scale(0.95); 
}
.nav-rail-link.active .nav-rail-icon, .nav-rail-link-vertical.active .nav-rail-icon{
  background-color: var(--hover-link);
  color: var(--on-hover-link);
  transform: scale(0.95);    /* Efecto de "hundido" o pulsación */
  transition: transform 0.1s ease; /* Más rápido al presionar para dar feedback */
}
.nav-rail-link.active .nav-rail-label, .nav-rail-link-vertical.active .nav-rail-label-vertical{
  color: var(--on-hover-link);
  font-weight: var(--font-weight-medium);  
   transform: scale(0.95); 
}
.nav-rail-link-vertical:active .nav-rail-icon{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  width: 3rem;
}
.nav-rail-link-vertical:active .nav-rail-label-vertical{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
.nav-rail-link-vertical.active .nav-rail-icon{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
.nav-rail-link-vertical.active .nav-rail-label-vertical{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
.dark .nav-rail-link:hover .nav-rail-label, .dark .nav-rail-link-vertical .nav-rail-label-vertical{
  color: var(--text-gray);
  font-weight: var(--font-weight-medium);  
}
.nav-rail-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: var(--neutral-00);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.nav-rail-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
}
.nav-rail-footer {
    width: 100%;
    padding: 0 var(--spacing-2);
}
.nav-rail-user {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--secondary-acent), var(--neutral-500));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: transform var(--transition-fast) var(--transition-ease);
    margin: 0 auto;
}
.nav-rail-user:hover {
    transform: scale(1.1);
}
.nav-rail-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--secondary-acent), var(--neutral-500));
    border: none;
    color: var(--neutral-00);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-base) var(--transition-ease);
}
.nav-rail-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-2xl);
    color:  var(--neutral-00);
}
.nav-rail-btn:active {
    transform: scale(0.95);
    color: var(--on-hover-link);
}
.nav-rail-btn.open {
    transform: rotate(45deg);
    color: var(--on-hover-link);
}
.nav-rail-btn-sm {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--on-hover-link);
}
.edior-toolbar-divider {
    width: 1px;
    height: 1.8rem;
    background-color: var(--border);
}
/*DARK varios*/
/*.dark .nav-rail-link:hover {
    background-color: var(--neutral-500);
    color: var(--mp-text-white);
    font-weight: 700;
}*/
/* =================
         SWITCH
   ================ */
.switch {
 position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    flex-direction: column;
}
.switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch-slider {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.5rem;
  height: 1.5rem;
  background-color: var(--switch-background);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base) var(--transition-ease);
}
.switch-input:checked + .switch-slider {
  background-color: var(--primary-acent);
}
.switch-thumb {
  position: absolute;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--background);
  border-radius: var(--radius-full);
  box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-base) var(--transition-ease);
}
.switch-input:checked + .switch-slider .switch-thumb {
  transform: translateX(1rem);
  background-color:#399ABA;
  box-shadow: -3px 1px 4px rgba(0, 0, 0, 0.2);
}
.switch-input:checked + .switch-slider .switch-thumb::after {
  content: 'ON';
    color: var(--text-00);
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    
}
.switch-input:focus + .switch-slider {
  outline: 2px solid var(--secondary-acent);
  outline-offset: 2px;
}
.switch-input:disabled + .switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}
.toolbar-switch{
  padding-left: 10px;
}

/*===================================
      MEASURE+ - IMAGE VIEWER V1.0 
 ===================================*/
 .mp-viewer-card {
  background-color: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-0);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition-base) var(--transition-ease);
  position: relative;
}
.mp-viewer-stage{
  height: 640px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  cursor: grab;
  user-select:none;
}
.mp-viewer-stage:active{ cursor: grabbing; }
.mp-viewer-img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  max-width:none;
  max-height:none;
  will-change: transform;
  pointer-events:none;
}
.card-text{
  z-index: 200;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 35px;
  
}
.glass-div {
    /* Core glassmorphism properties */
  background: rgba(255, 255, 255, 0.15); /* Semi-transparent background */
  backdrop-filter: blur(10px);          /* The actual blur effect */
  -webkit-backdrop-filter: blur(10px);  /* Vendor prefix for compatibility */
  border-radius:var(--radius-lg);                /* Rounded corners */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */

} 
/*=============================================
      MEASURE+ - SLOPE CARRUSEL SVG VIWER V1.0 
 ==============================================*/
 .tab-content{
    height: 100%;
 }
 .tab-content>.active {
    display: block;
    height: 100%;
}
.slopes-carousel,
.slopes-carousel .carousel-inner,
.slopes-carousel .carousel-item {
    height: 100%;
    min-height: 0;
}

.slope-svg-frame {
    height: 100%;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding: 0.5rem;
}

.slope-svg-frame svg {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}










/* ===== TOOLBAR VERTICAL FLOTANTE ===== */
.vertical-toolbar {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 5;
  border: 1px solid var(--border);
  width: 3.5rem;
}
.toolview-divider {
    width: 2rem;
    height: 1px;
    background-color: var(--border);
    margin-left: 4px;
}
.btn-tool {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--on-muted);
  position: relative;
  z-index: 5;
}
.btn-tool:hover {
  background: var(--hover-link);
  color: var(--on-hover-link);
  border: 1px solid var(--border);
}
.btn-tool.active {
  background: var(--secondary);
  color: var(--on-secondary);
}
.tool-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.btn-group-vertical {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /*background: var(--surface-container-4);*/
    border-radius: 0.75rem;
    /*border: 1px solid var(--border);*/
}
/* --- Bordes del Bloque (Igual que antes) --- */
.btn-group-vertical .btn:first-child {
  border-radius: 0.75rem 0.75rem 0 0; 
}
.btn-group-vertical .btn:first-child:hover {
   border-radius: 0.75rem 0.75rem 0 0.75rem;
   border: 1px solid var(--border);
   background-color: var(--surface-variant);
   color: var(--on-surface-variant);
}
  .btn-group-vertical .btn:first-child .active {
   border-radius: 0.75rem 0.75rem 0 0.75rem;
   border: 1px solid var(--border);
   background-color: var(--secondary);
   color: var(--on-secondary);
   z-index: 7;
} 
.btn-group-vertical>.btn:nth-child(2):hover {
   border-radius: 0.75rem 0 0 0.75rem; 
   border: 1px solid var(--border);
   background-color: var(--secondary);
   color: var(--on-secondary);
}
.btn-group-vertical>.btn:nth-child(2) .active {
   border-radius: 0.75rem 0 0 0.75rem; 
   border: 1px solid var(--border);
   background-color: var(--secondary);
   color: var(--on-secondary);
   z-index: 7;
}
.btn-group-vertical>.btn:last-child {
   border-radius: 0 0 0.75rem 0.75rem;
}
.btn-group-vertical>.btn:last-child:hover {
   border-radius: 0.75rem 0 0.75rem 0.75rem; 
   border: 1px solid var(--border);
   background-color: var(--surface-variant);
   color: var(--on-surface-variant);
}
.btn-group-vertical>.btn:last-child .active {
   border-radius: 0.75rem 0 0.75rem 0.75rem; 
   border: 1px solid var(--border);
   background-color: var(--surface-variant);
   color: var(--on-surface-variant);
    z-index: 7;
}
/* 2. El botón debe crecer hacia la izquierda */
.btn-expand-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto pop */
 /* transition: cubic-bezier(0.34, 1.56, 0.64, 1);/* Efecto rebote */
  white-space: nowrap;
  /* IMPORTANTE: para que crezca a la izquierda */
  align-self: flex-end; 
  text-align: center;
  z-index: 7;
}
.btn-expand-left:hover {
  width: 120px; /* Se expande hacia la izquierda */
  background-color: var(--hover-link); /* Cambio de color opcional */
  border: 1px solid var(--border); 
}
.full-text {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  margin-right: 5px;
  margin-left: 5px;
}
.btn-expand-left:hover .full-text {
  opacity: 1;
}
.short-icon {
  width: 20px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  padding-top: 5px;
  padding-left: 4px;
}
.btn-expand-left:hover .short-icon {
  opacity: 0;
  max-width: 0;
}
/* Evitar que se quede expandido en móviles tras tocarlo */
.btn-expand-left:focus:not(:hover) {
  width: 48px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
/* ===========================
   3D PANEL
=========================== */
.mp-3d-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mp-3d-wrapper {
    position: relative;
    border-radius: 1.25rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    height: 320px;
    overflow: hidden;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-3d-viewport {
    position: relative;
    flex: 1;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 45%, #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-3d-placeholder {
    text-align: center;
    color: #9ca3af;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.mp-3d-placeholder span {
    background: var(--surface);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
}
/* ===== TABS SISTEMA ===== */
.tabs-divider{
  border-bottom: 1px solid var(--border)!important;
  margin-top: 10px;
}        
/* Contenedor de Tabs */
.tabs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    margin-left: 0px;
    height: 3rem;
}
.tabs-secondary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
/* Lista de Tabs */
.tabs-list {
    display: flex;
    position: relative;
}
  /* Lista de Tabs */
.tabs-secondary-list {
    display: flex;
    gap: var(--spacing-2);
    border-bottom: 2px solid var(--border);
    position: relative;
}
/* Tabs individuales */
.tabi { 
    padding: 0px 15px;
    list-style-type: none;
}
.tabi:hover{
  padding: 0px 15px;
 
}
.tabi:has(.tab.active) {
  /*color: var(--neutral-600);
  background-color: var(--neutral-100);
  border-radius:var(--radius-full);
  padding: 0px 15px;*/
}
.tab {
    padding: var(--spacing-3) var(--spacing-6);
    background: transparent;
    border: none;
    color: var(--on-muted);/*---------------------------------------------*/
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base) var(--transition-ease);
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    white-space: nowrap;
    font-size: 15px;
}
.tab:hover {
    color: var(--neutral-900); /*----------------------------------------------------*/
    background-color: var(--hover);
}
.tab.active {
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

/*===========DARK=================*/
.dark .tab.active {
    color: var(--neutral-100);
    font-weight: var(--font-weight-semibold);
}
.tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--secondary-acent);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
}
.tab-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.tab-badge {
    background-color: var(--muted);
    color: var(--on-muted);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    margin-left: auto;
}
.tab.active .tab-badge {
    background-color: var(--primary);
    color: var(--primary-foreground);
}
/* Contenido de Tabs */
.tabs-content {
    display: flex;
}
.tabs-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===== VARIANTE: UNDERLINE (SUBRAYADO) ===== */
.tabs-underline .tabs-list {
   gap: var(--spacing-4);
}
.tabs-underline .tab {
    padding: var(--spacing-3) var(--spacing-2);
    border-radius: 0;
}
.tabs-underline .tab:hover {
    background-color: transparent;
    color: var(--primary);
}
.tabs-underline .tab.active::after {
    height: 5px;
    bottom: -3px;
    width: 60%;
    margin-right: 20%;
    left:20%
}
.tab>ul {
margin-bottom: 0rem !important; 
padding-left: 0rem !important;
}
ul {
margin-bottom: 0rem !important; 
padding-left: 0rem !important;
}
.tab {
  position: relative;
  transition: color 0.2s ease;
}
.tab.editing {
  color: #f5a623;
}
.tab.dirty {
  color: #e67e22;
}
.tab.saving {
  color: #7f8c8d;
}
.tab-status-badge {
  position: static;
  top: -6px;
  right: -6px;
  background-color: #ff5252;
  color: white;
  padding: 2px 6px;
  font-size: .65rem;
  font-weight: 600;
  border-bottom-right-radius: 1em 1em;
  border-top-left-radius: 1em 1em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  display: none;
  pointer-events: none;
}
/*===CARRUSEL EN TABS====*/
#session-tabs {
    display: flex !important;
    overflow-x: scroll !important; /* Firefox a veces requiere 'scroll' en lugar de 'auto' */
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Oculta barra en Firefox */
    white-space: nowrap;
       
    min-width: 0; /* Solución para bugs de Firefox Flexbox overflow */
    scrollbar-width: none; /* Oculta barra en Firefox */
}
/* Asegúrate de que esto NO esté presente en #session-tabs o #bar */
#session-tabs {
    scroll-snap-type: none !important; 
}
/* IMPORTANTE: Evita que las tabs se achiquen en Firefox */
#bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 100%; /* Obliga a calcular el ancho total */
}
.nav-item {
    flex: 0 0 auto !important;
}
/* Fuerza a los items a no encogerse en Firefox */
#bar .nav-item {
    flex: 0 0 auto !important;
}
#session-tabs::-webkit-scrollbar {
    display: none; /* Oculta scrollbar Chrome/Safari */
}
.tabs-carousel {
    position: relative;
    display: flex;
    align-items: center;
}
/* Efecto de sombra sutil a los lados cuando hay scroll */
.tabs-carousel::before, .tabs-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* No bloquea clics */
}
.tabs-carousel::before {
  left: 40px;
  background: linear-gradient(to right, white, transparent);
}
.tabs-carousel::after {
  right: 40px;
  background: linear-gradient(to left, white, transparent);
}
/*=======SUBTAB===========*/
.nav-tabs{
  padding-top: 10px;
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {  
  border-color: transparent;
  color: var(--on-surface-variant);
  background-color: transparent;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover {  
  border-color: transparent;
  color: var(--on-surface-variant);
  background-color: transparent;
}
.nav-tabs .nav-link{
  color: var(--text-gray) !important;
}
.nav-tabs .nav-link.active{
  height: 5px;
  width: 100%;
  position: relative;
  color: var(--on-surface-variant) !important;
    }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -23px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--secondary-acent);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .tabs-list {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tabs-list::-webkit-scrollbar {
        display: none;
    }

    .tab {
        padding: var(--spacing-2) var(--spacing-4);
    }

    .tabs-vertical {
        flex-direction: column;
    }

    .tabs-vertical .tabs-list {
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid var(--border);
        min-width: auto;
    }

    .tabs-vertical .tab {
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .tabs-vertical .tab.active::after {
        left: 0;
        right: 0;
        top: auto;
        bottom: -2px;
        width: auto;
        height: 2px;
        border-radius: var(--radius) var(--radius) 0 0;
    }
}

/* ===== OVERLAY INDICATORS ===== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);/*-------------------------------------------------*/
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.overlay.active {
    display: flex;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Loading Overlay */
.overlay-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}
.overlay-spinner {
    width: 4rem;
    height: 4rem;
    border: 4px solid var(--muted);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.overlay-text {
    color: white;
    font-weight: var(--font-weight-semibold);
    font-size: 1.125rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Success Overlay */
.overlay-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}
.overlay-icon-wrapper {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn 0.3s ease;
}
@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
.overlay-icon {
    width: 3rem;
    height: 3rem;
    color: var(--primary-foreground);
}
/* Progress Overlay */
.overlay-progress {
    background-color: var(--background);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 24rem;
    width: 90%;
}
/*dark*/
.dark .overlay-progress {
    background-color: var(--surface);/*------------------------------------------*/
}
.overlay-progress-title {
    font-weight: var(--font-weight-bold);
    color: var(--foreground);
    margin-bottom: var(--spacing-2);
}
.overlay-progress-subtitle {
    color: var(--on-muted);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-6);
}
.overlay-progress-bar {
    width: 100%;
    height: 0.5rem;
    background-color: var(--muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--spacing-3);
}
.overlay-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mp-500), var(--mp-600));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}
.overlay-progress-text {
    text-align: center;
    color: var(--on-muted);
    font-size: 0.875rem;
}

/*==============================sacar de acá=========================================*/
.toolbar-btn {
    white-space: nowrap; /* Evita el salto de línea */
    overflow: hidden;    /* Opcional: evita que el texto se salga si el botón es muy pequeño */
    text-overflow: ellipsis; /* Opcional: añade "..." si el texto no cabe */
    flex-shrink: 0; /* Evita que el contenedor flex reduzca el ancho del botón */
}
.tab-toolbar-btn{
  display: block;
  width: 100%;
  height: 2.5rem;
  clear: both;
  font-weight: var(--font-weight-normal);
  background-color: transparent;
  color: var(--on-surface-variant);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-ease);
  gap: 10px;
  padding: 0px 15px;
}
.tab-toolbar-btn:hover {
    background-color: var(--hover-link);
    color: var(--on-hover-link);
}
.tab-toolbar-btn.active {
    background-color: var(--hover-link);
    color: var(--on-hover-link);
}
.tab-toolbar-divider {
    width: 1px;
    height: 2rem;
    background-color: var(--border);
    margin: 0 var(--spacing-2);
}

.toggleLeft{      /*------------------------------------------------------------------*/
font-weight: 700;
    color:var(--neutral-900);
    text-decoration: none;
}
.toggleRight{
font-weight: 700;
    color:var(--neutral-900);
    text-decoration: none;
    margin-right: 20px;
}

.ticker-market-list .left-arrow svg:hover, .ticker-market-list .right-arrow svg:hover {
    color: var(--color-TertiaryText);
}
.tab-carusel{
  position: relative;
  flex-grow: 1;
  overflow: hidden;
}
/* ===== Checklist polish ===== */

.checklist-card {
  padding: 10px 15px;
  height: 500px;
  height: calc(100vh - 265px);
  display: flex;
  flex-direction: column;
}
.task-list-scroll{
  overflow-y: auto;
  max-height: 100%;
  margin-left: 0px;
    /* 4. Estética: oculta la barra de scroll en navegadores modernos pero permite scrollear */
}
/* 1. Ancho de la barra de desplazamiento (total) */
.task-list-scroll::-webkit-scrollbar {
  width: 8px; /* Vertical */
  height: 8px; /* Horizontal */
}
/* 2. Pista o Fondo (se hace transparente) */
.task-list-scroll::-webkit-scrollbar-track {
  background: transparent;
 
}
/* 3. Thumb o Barra arrastrable (estilo visible) */
.task-list-scroll::-webkit-scrollbar-thumb {
  background-color: var(--secondary-acent); /* Color de la barra */
  border-radius: 8px; /* Bordes redondeados */
  border: 2px solid transparent; /* Crea un margen visual */
  background-clip: content-box; /* Aplica color solo al contenido */
  height: 10%;
}

/* 4. Hover del Thumb (opcional, para cambiar color al pasar el mouse) */
.task-list-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--hover-link);
}
.task-item {
  border-radius: var(--radius-md);
  padding: 0px 10px;
  transition: background-color .15s ease, transform .12s ease;
}
.task-item:hover {
  background: rgba(0,0,0,.03);/*--------------------------------------------------------------------------------------*/
}
.task-item:active {
  transform: scale(0.997);
}
.task-actions {
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.task-item:hover .task-actions,
.task-item:focus-within .task-actions {
  opacity: 1;
  transform: translateX(0);
}
.task-text {
  line-height: 1.2;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}
.task-text.done {/*---------------------------------------------------------------------------------------------*/
  color: var(--text-muted);
  text-decoration: line-through;
}
.task-empty {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.55);
  font-size: .92rem;
}
/* ===== Badge pulse ===== */
.badge-task {
  position: relative;
    transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
    
}
.badge-task.pulse {
  animation: badgePulse 260ms ease-out;
}
@keyframes badgePulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* Badge colors by state */
.badge-task.is-zero {
  background-color: #adb5bd !important; /* gray */
}
.badge-task.is-low {
  background-color: #39589b !important; /* bootstrap primary */
}
.badge-task.is-high {
  background-color: #dc3545 !important; /* bootstrap danger */
}
.empty-session-state{
  padding: 28px 18px;
}
.empty-state-card{       /*----------------------------------------------------------------*/
  max-width: 820px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 22px 22px;
}
.empty-state-illustration{
  width: 180px;
  height: 140px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.empty-state-badge{
  font-weight: 700;
  opacity: .7;
}
/*=====================================================
                  FEEDBACK
=======================================================*/
/*CAMBIAR estilos para feedback*/

.feedback-list-scroll{
  overflow-y: auto;
  margin-left: 0px;
  max-height: 300px;
  flex: 1;
  min-height: 0;
    /* 4. Estética: oculta la barra de scroll en navegadores modernos pero permite scrollear */
}
/* 1. Ancho de la barra de desplazamiento (total) */
.feedback-list-scroll::-webkit-scrollbar {
  width: 8px; /* Vertical */
  height: 8px; /* Horizontal */
}
/* 2. Pista o Fondo (se hace transparente) */
.feedback-list-scroll::-webkit-scrollbar-track {
  background: transparent;
 
}
/* 3. Thumb o Barra arrastrable (estilo visible) */
.feedback-list-scroll::-webkit-scrollbar-thumb {
  background-color: var(--secondary-acent); /* Color de la barra */
  border-radius: 8px; /* Bordes redondeados */
  border: 2px solid transparent; /* Crea un margen visual */
  background-clip: content-box; /* Aplica color solo al contenido */
  height: 10%;
}

/* 4. Hover del Thumb (opcional, para cambiar color al pasar el mouse) */
.feedback-list-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--hover-link);
}



.feedback-thread {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.open{
  background-color: #f0ffff;
}

.feedback-thread-header {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 0.5rem;

    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.feedback-thread-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-thread-state {
    font-size: 0.8rem;
    opacity: 0.7;
}

.feedback-thread-content {
    display: none;
    padding: 0 0 0.8rem 1.5rem;
}

.feedback-thread.open .feedback-thread-content {
    display: block;
}

.feedback-thread-chevron {
    transition: transform 0.2s ease;
}

.feedback-thread.open .feedback-thread-chevron {
    transform: rotate(180deg);
}

.feedback-message {
    margin-bottom: 0.8rem;
}

.feedback-message-meta {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    opacity: 0.7;
    color: #457594;
}

.feedback-message-body {
    /*white-space: pre-wrap;*/
    overflow-wrap: anywhere;
}

.feedback-send-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.55rem;
}

.feedback-status {
    min-height: 1.2rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.feedback-empty,
.feedback-error {
    padding: 0.75rem 0;
    opacity: 0.7;
}


.feedback-delete-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: 0.45;
}

.feedback-delete-btn:hover {
    opacity: 1;
    color: red;
}

.feedback-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;
    padding: 0 6px;

    margin-left: 6px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    background: #dc3545;
    color: #fff;

    vertical-align: middle;
}
.feedback-unread-badge[hidden] {
    display: none !important;
}

/* ===== Badge pulse ===== */
.badge-task {
  position: relative;
    transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
    
}
.badge-task.pulse {
  animation: badgePulse 260ms ease-out;
}
@keyframes badgePulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* Badge colors by state */
.badge-task.is-zero {
  background-color: #adb5bd !important; /* gray */
}
.badge-task.is-low {
  background-color: #39589b !important; /* bootstrap primary */
}
.badge-task.is-high {
  background-color: #dc3545 !important; /* bootstrap danger */
}
.empty-session-state{
  padding: 28px 18px;
}
.empty-state-card{       /*----------------------------------------------------------------*/
  max-width: 820px;
  margin: 0 auto;
  border-radius: 18px;
  padding: 22px 22px;
}
.empty-state-illustration{
  width: 180px;
  height: 140px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.empty-state-badge{
  font-weight: 700;
  opacity: .7;
}
/*---------------------------------------------------*/
/*-----------------BUILDER STYLES---------------------*/
/*----------------------------------------------------*/
   /* ===== LAYOUT PRINCIPAL ===== */

  .editor-container{
  display: grid;
  grid-template-columns: 1fr 270px;
  position: fixed;
  inset: 48px 0 0 0;   /* si tu navbar mide 48px */
  width: 100%;
  height: calc(100vh - 48px);
}
.canvas-wrapper{
  position: relative;
}
/* ===== CANVAS WORKSPACE ===== */
.canvas-workspace{
  background: var(--surface-canvas);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* ✅ importante: no scroll aquí */
  min-height: 0;      /* ✅ CLAVE: permite que el hijo scrolleable funcione */
}
#canvasArea{
  flex: 1 1 auto;     /* ocupa el resto debajo del topbar */
  min-height: 0;      /* ✅ CLAVE en flex */
  overflow: auto;     /* ✅ único scroll */
  position: relative;
  padding: 24px;      /* opcional */
}
/* 1. Ancho de la barra de desplazamiento (total) */
.canvas-wrapper::-webkit-scrollbar {
  width: 8px; /* Vertical */
  height: 8px; /* Horizontal */
}

/* 2. Pista o Fondo (se hace transparente) */
.canvas-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* 3. Thumb o Barra arrastrable (estilo visible) */
.canvas-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--secondary-acent); /* Color de la barra */
  border-radius: 8px; /* Bordes redondeados */
  border: 2px solid transparent; /* Crea un margen visual */
  background-clip: content-box; /* Aplica color solo al contenido */
}


/* 4. Hover del Thumb (opcional, para cambiar color al pasar el mouse) */
.canvas-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--hover-link);
}
.dark .canvas-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--neutral-600); /* Color de la barra */
}
.dark .canvas-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-700);
}
#pageFrame{
  position: relative;
  margin: 20px auto;     
}
.page-container {
  background: var(--neutral-00);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 8px;
  position: relative;
  transition: all 0.3s;
  margin: 0 auto 30px;
}
.page-container.selected {
  outline: 3px solid var(--secondary-acent);
  outline-offset: 4px;
}
.page-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.canvas-element {
  position: absolute;
  cursor: move;
  user-select: none;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.canvas-element.selected {
  border: 2px solid var(--secondary-acent);
}
.canvas-element:hover {
  border-color: var(--hover-link);
}
.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  cursor: nwse-resize;
  right: -5px;
  bottom: -5px;
  display: none;
}
.canvas-element.selected .resize-handle {
  display: block;
}

/* ========================
   BUILDER EDITOR TOOLBAR
   ======================== */
   
.tooleditor-builder {
  position: sticky;
  background: var(--surface-container-1);
  padding: 0px;
  gap: 16px;
    z-index: 110;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 3rem;
}
.dark .tooleditor-builder {
  background: var(--surface-container-5);
}
/* Menu */
.tooleditor-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-0);
    flex: 1;
    height: 3rem;
    
}
.tooleditor-item {
    padding: var(--spacing-2) var(--spacing-2);
    color: var(--on-muted);
    text-decoration: none;
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    letter-spacing: 1px;
    font-size: var(--font-size-xs);
}
.tooleditor-name{
  display: block;
  padding-left: 0px;
}
/*======== CUSTOM SELECT ================*/
.tooleditor-input {
  padding: 5px 12px;
  width: 160px;
  margin-bottom: 8px;
  margin-top: 8px;
  height: 30px;
  background-color: var(--background);
  font-size: var(--font-size-xs);
  color: var(--foreground);
  border: 1px solid var(--border);
}
.tooleditor-input
select.tooleditor-input, select,
::picker(select) {
  appearance: base-select;
  font: -webkit-small-control;
}

select, select.tooleditor-input selectedcontent {
  background-color: var(--background);
  color: var(--foreground);
  font-size: var(--font-size-xs);
}

select.tooleditor-input::picker-icon {
content: "\F282";
  font-family: "bootstrap-icons";
  margin-left: 0.5rem;
  color: #495057;
  transition: 0.4s transfrom;
  position: absolute;
  right: 0;
  left: 130px;
  top: 15px;
  font-weight: var(--font-weight-bold);
  }
select.tooleditor-input:open::picker-icon {
  content: "\F286";
  font-family: "bootstrap-icons";
  margin-left: 0.5rem;
  color: #495057;
  transition: 0.4s transfrom;
  position: absolute;
  right: 0;
  left: 130px;
  top: 15px;
  font-weight: var(--font-weight-bold);

}
::picker(select) {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-xs);
  color: var(--foreground);
}
select.tooleditor-input option {
  padding: 8px;
  margin: 5px;
  font-size: var(--font-size-xs);
  background-color: var(--background);
  color: var(--foreground);
}
select.tooleditor-input option:hover {
  background-color: var(--hover-light);
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--foreground);
}
select.tooleditor-input option:checked {
  background-color: var(--hover-light);
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--foreground);
}
select.tooleditor-input option::checkmark {
  display: none;
}
select.form-select:hover, select.tooleditor-input:focus {
  border-color: var(--secondary-acent); /* Your desired border color */
  box-shadow: 0 0 0 3px rgba(173, 217, 230, 0.5); 
   outline: none; 
}
.dark select.form-select:hover, .dark select.tooleditor-input:focus {
  border-color: var(--primary-300); /* Your desired border color */
}
.hidden{ display:none; }
/* hoja / frame */
.mp-page{
  position: relative;
  margin: 0 auto;
  background: var(--neutral-00);
  /*border: 1px solid var(--border-light);*/
  box-shadow: 0 8px 30px rgba(0,0,0,.06); 
  overflow: hidden;
}
.contenedor-puntos {
  /* Fondo base claro con puntos oscuros */
  background-image: radial-gradient(#444 10%, transparent 10%);
  background-size: 20px 20px; /* Tamaño de la cuadrícula de puntos */
  background-color: #f0f0f0; /* Color de fondo opcional */
  width: 100%;
  height: 300px; /* Altura para visualizar */
}
/* formatos */
.mp-a4-portrait  { 
  width: 210mm;
  min-height: 297mm;
 /* Fondo base claro con puntos oscuros */
  background-image: radial-gradient(#eee 4%, transparent 10%);
  background-size: 37.8px 37.8px; /* Tamaño de la cuadrícula de puntos */
  /* background-color: #f0f0f0; Color de fondo opcional */
  /*width: 100%;
  height: 300px;  Altura para visualizar */
}
.mp-a4-landscape { width: 297mm; min-height: 210mm; 
  background-image: radial-gradient(#eee 4%, transparent 10%);
  background-size: 37.8px 37.8px;}
.mp-a5-portrait  { width: 148mm; min-height: 210mm;
  background-image: radial-gradient(#eee 4%, transparent 10%);
  background-size: 37.8px 37.8px; }
.mp-a5-landscape { width: 210mm; min-height: 148mm;
  background-image: radial-gradient(#eee 4%, transparent 10%);
  background-size: 37.8px 37.8px; }
.mp-legal-portrait  { width: 216mm; min-height: 356mm; 
  background-image: radial-gradient(#eee 4%, transparent 10%);
  background-size: 37.8px 37.8px;}
.mp-legal-landscape { width: 356mm; min-height: 216mm; 
  background-image: radial-gradient(#eee 4%, transparent 10%);
  background-size: 37.8px 37.8px;}
.mp-free {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
}
/*=============ZOOM==================*/
.zoom-control{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.zoom-chip{
  background: var(--background);
  color: var(--foreground);
  border-radius: 8px;
  padding: 4px 14px;
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: var(--font-size-xs);
}
.zoom-menu{
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
  padding: 8px;
  min-width: 140px;
  z-index: 3000;
  font-size: var(--font-size-xs);
}
.zoom-chip:hover, .zoom-chip:focus {
  border-color: var(--secondary-acent); /* Your desired border color */
  box-shadow: 0 0 0 3px rgba(173, 217, 230, 0.5); 
}
.zoom-menu button{
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--text-main);
}
.zoom-menu button:hover{
  background: var(--hover-light);
  border-radius: var(--radius-sm);
}
.zoom-divider{
  height: 1px;
  background: var(--border-light);  
  margin: 6px 0;
}
/*============Undo/Redo=============*/
.btn-tooleditor-wraper{
  padding-top: 6px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.btn-tooleditor{
  width: 38px;
  height: 35px;
  gap: 0.25rem;
  padding: 0 0;
  color: var(--on-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base) var(--transition-ease);
  position: relative;
  font-weight: var(--font-weight-medium);
}
.btn-tooleditor:hover{
  background-color: var(--hover-link);
}
.btn-tooleditor:active, .btn-tooleditor.active{
transform: scale(0.95);    /* Efecto de "hundido" o pulsación */
transition: transform 0.1s ease; /* Más rápido al presionar para dar feedback */
}
.btn-tooleditor .undo, .btn-tooleditor .redo{
    padding: 5px 5px;
    fill: var(--text-muted);
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    width: 30px;
    height: 30px;
    margin-left:3px;
}
.btn-tooleditor .undo:hover, .btn-tooleditor .redo:hover{
background-color: var(--hover-link);
fill: var(--on-hover-link);
}
.btn-tooleditor .undo:active, .btn-tooleditor .redo:active, .btn-tooleditor .undo.active, .btn-tooleditor .redo.active {
 fill: var(--on-hover-link);
}
/*====== ABRIR Y CERRAR PANEL editor ====*/
.toggle-panel-btn {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    transition: all var(--transition-base) var(--transition-ease);
    position: relative;
    font-weight: 500;
    border: none;
    background: none;
    color: var(--text-muted);
}
.toggle-panel-btn .toggle-panel-icon {
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.toggle-panel-btn .toggle-panel-icon:hover{
  background-color: var(--hover-link);
  color: var(--on-hover-link);
  font-weight: var(--font-weight-normal);
}
.toggle-panel-btn .toggle-panel-icon:active, .toggle-panel-btn .toggle-panel-icon.active{
  background-color: var(--hover-link);
  color: var(--on-hover-link);
  transform: scale(0.95);    /* Efecto de "hundido" o pulsación */
  transition: transform 0.1s ease; /* Más rápido al presionar para dar feedback */
}
.toggle-panel-btn{
      display: none;
    }
.tooledior-divider {
    width: 1px;
    height: 1.8rem;
    background-color: var(--border);
}
/*===============ruleres===========*/
.rulers{ 
  position:absolute;
  inset:0; 
  pointer-events:none;
  top: 48px;
  z-index: 100;
}
.ruler{ position:absolute;
   background:var(--surface); 
   border:1px solid var(--border); 
}
.dark .ruler{ 
   background:var(--surface-inverse); 
   border:1px solid var(--border); 
}
.ruler-top{ left:25px;
  right:0;
   top:0; 
   height:25px; }
.ruler-left{ 
  top:25px; 
  bottom:0; 
  left:0; 
  width:25px;
 }
.ruler .tick{
  position:absolute;
  width:1px; height:100%;
  background:#bbb;
}
.ruler-top .tick span{
  position:absolute;
  top:2px;
  left:4px;
  font-size:10px; color:#666;
}
.ruler-left .tick{
  width:100%; height:1px;
}
.ruler-left .tick span{
  position:absolute;
  left:2px; 
  top:0x;
  font-size:10px;
  color:#666;
}
#close:hover {
    background: var(--hover);
    color: var(--x-dialog-close-button-hover-color);
}
#close {/*----------------------------------------------------------------------*/
    align-items: center;
    background-color: var(--x-dialog-close-button-background);
    border: 0px;
    border-radius: 100%;
    color: var(--x-dialog-close-button-color);
    cursor: pointer;
    display: flex;
    filter: var(--x-dialog-close-button-filter);
    height: var(--x-dialog-close-button-size);
    inset-block-start: var(--x-dialog-close-button-inset);
    inset-inline-end: var(--x-dialog-close-button-inset);
    justify-content: center;
    position: absolute;
    width: var(--x-dialog-close-button-size);
    z-index: 1;
}
/*=============================
           Acordeón 
=============================*/
/* ===== PANEL LATERAL DERECHO ===== */
.right-panel {
  position: sticky;
  right: 0;
  top: 48px;
  width: 100%;
  height: calc(100vh - 48px);
  background-color: var(--surface-container-1);
  border-left: 1px solid var(--border);
  overflow-y: hidden;
}
.panel-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.accordion {
  border-bottom: 1px solid var(--border);
}
.accordion-header {
  padding: 16px 20px;
  background: var(--surface-container-1);
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  transition: all 0.2s;
  color: var(--on-surface-variant);
  font-size: var(--font-size-base);
}
.accordion-header:hover {
  background-color: var(--hover-light);
}
.dark .accordion-header:hover, .dark .accordion-header.active {
  background-color: var(--hover-link);
}
.accordion-header.active {
  background-color: var(--background);
  color: var(--on-hover-link);
}
.accordion-icon {
  transition: transform 0.3s;
}
.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.accordion-content.active {
  /* 1. Alto dinámico: máximo el 70% de la altura de la pantalla actual */
  max-height: 45vh; 
  
  /* 2. Permite que crezca según el contenido, pero sin pasarse del máximo */
  display: block; 
  
  /* 3. Scroll inteligente: solo aparece si el contenido supera el max-height */
  overflow-y: auto; 
  
  /* 4. Estética: oculta la barra de scroll en navegadores modernos pero permite scrollear */
  scrollbar-width: thin; /* Para Firefox */
}
/* Opcional: Ocultar la barra de scroll visualmente en Chrome/Safari (WebKit) */
.accordion-content.active::-webkit-scrollbar {
  width: 6px;
}
.accordion-content.active::-webkit-scrollbar-thumb {
  background: var(--surface);
  border-radius: 10px;
}
.accordion-body {
  padding: 16px 20px;
  background-color: var(--surface-gray);
}
.pagesList{
  display: flex;
    flex-direction: column;
    width: 100%;
}
.pageslist-item{
     text-wrap-mode: nowrap;
    width: 100%;
    display: flex !important;
    flex-direction: row;
    gap: 0px;
    padding-bottom: 0px;
}
/* Templates Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.template-item {    
  aspect-ratio: 1;
  background-color: var(--surface-container-2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--on-surface-variant);
}
.dark .template-item {    
  background-color: var(--neutral-100);
  color: var(--surface-variant);
}
.front_static-svg-bg {
    background-image: url('/static/img/editor/thumbnails/front_static.svg');
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image */
    background-size: contain; /* Scales the image to cover the entire container */
}
.back_static-svg-bg {
    background-image: url('/static/img/editor/thumbnails/back_static.svg');
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image */
    background-size: contain; /* Scales the image to cover the entire container */
}
.side_static-svg-bg {
    background-image: url('/static/img/editor/thumbnails/side_static.svg');
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image */
    background-size: contain; /* Scales the image to cover the entire container */
}
.front_motion-svg-bg {
    background-image: url('/static/img/editor/thumbnails/front_motion.svg');
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image */
    background-size: contain; /* Scales the image to cover the entire container */
}
.back_motion-svg-bg {
    background-image: url('/static/img/editor/thumbnails/back_motion.svg');
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image */
    background-size: contain; /* Scales the image to cover the entire container */
}
.side_motion-svg-bg {
    background-image: url('/static/img/editor/thumbnails/side_motion.svg');
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image */
    background-size: contain; /* Scales the image to cover the entire container */
}
.template-item:hover { /*-------------------------------------------------------------------*/
  border-color: var(--border);
  transform: scale(1.05);
}
.btn-panel{
    width: 100%;
    border-radius: var(--radius-sm);
    height: 2rem;
    border: 2px solid var(--border);
    margin-bottom: 5px;
    font-size: var(--font-size-xs);
    background-color: var(--surface);
    color: var(--on-surface)
}
.btn-panel:hover{
    width: 100%;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background-color: var(--hover-light);
    color: var(--on-hover-light);
}
.dark .btn-panel:hover{
  background-color: var(--neutral-500);
}
.btn-instance{
    width: 100%;
    border: none;
    border-radius: var(--radius-full);
    height: 2rem;
    background-color: var(--surface-container-2);
    margin-bottom: 5px;
    font-size: var(--font-size-xs);
    padding: 0 10px 0 10px;
    color: var(--on-surface-container); 
}
.dark .btn-instance{
    background-color: var(--neutral-500);
}
.btn-instance:hover{
    width: 100%;  
    background-color: var(--hover-light);
    color: var(--on-hover-light);
}
.btn-delete-instance{
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 5px;
}
.btn-delete-instance:hover{
  color: var(--on-surface-variant);
}
.btn-delete-instance:hover{
  color: var(--destructive);
}
.dark .right-panel, .dark .panel-header{
  background-color: var(--surface-container-5);
}
.dark .accordion-header {
 background-color: var(--surface-container-5);
}
/* =========================
   Placement base
========================= */
/* Base */
.mp-placement { position:absolute; overflow:hidden; user-select:none; cursor:move; }
.mp-placement-inner { width:100%; }
/* ✅ CROQUIS: contenido llena la caja fija */
.mp-placement.is-croquis .mp-placement-inner,
.mp-placement.is-croquis .croquis-frame,
.mp-placement.is-croquis .croquis-inline {
  width:100%;
  height:100%;
}
.mp-placement.is-croquis .croquis-inline svg {
  width:100%;
  height:100%;
  display:block;
}
/* ✅ SLOPES: ancho fijo del placement, alto auto */
.mp-placement.is-slope { overflow:visible; } /* opcional si querés ver todo */
.mp-placement.is-slope .mp-placement-inner { width:100%; height:auto; }
.mp-placement.mp-scaling { cursor: nwse-resize !important; }
.mp-placement.is-slope .slope-inline {
  width:100%;
  height:auto;
  display:block; /* no flex para no “estirar” */
}
.mp-placement.is-slope .slope-inline svg {
  width:100%;
  height:auto;
  display:block;
}
.mp-placement:active{
  cursor: grabbing;
}
/* Inner ocupa todo */
.mp-placement-inner,
.croquis-frame,
.croquis-inline,
.slope-inline {
  width: 100%;
  height: 100%;
}
/* Centering */
.croquis-frame,
.croquis-inline,
.slope-inline{
  display:flex;
  align-items:center;
  justify-content:center;
}
/* SVG se adapta al contenedor */
.croquis-inline svg,
.slope-inline svg{
  width: 100%;
  height: 100%;
  display:block;
}
/* ✅ TECHSHEET: flow normal */
.mp-placement.is-techsheet { overflow:visible; cursor:grab; } /* overflow hidden acá suele “cortar” páginas */
.mp-placement.is-techsheet .mp-placement-inner {
  width:100%;
  height:auto;
}
.mp-scale-badge{
  position:absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(20,20,20,.78);
  color: var(--text-00);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease;
}
.mp-scale-badge.is-show{
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   Selection UI
========================= */
.mp-placement.is-selected{
  outline: 2px dashed var(--secondary-acent);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(80,140,255,.12);
}
.slope-inline{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: none; /* tu fondo blanco */
}
/* Export Options */
.export-option {   
  padding: 12px;
  background-color: var(--surface-container-2);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.dark .export-option {   
  background-color: var(--neutral-100);
}
.export-option:hover {
  background: var(--surface-container-2);
  border-color: var(--border);
}
/* ===== RESPONSIVE ===== */
/* Escritorio: El panel se ve siempre por el Grid */
@media (min-width: 1025px) {
    .right-panel {
        transform: none !important; /* Fuerza a que se vea sin importar la clase */
    }
}
/* Móvil: Se oculta por defecto a menos que tenga .show */
@media (max-width: 124px) {
    .right-panel {
        transform: translateX(100%); /* Estado oculto */
    }
    .right-panel.show {
        transform: translateX(0); /* Estado visible */
    }
    .toggle-panel-btn{
      display: flex;
    }
}
@media (max-width: 1024px) {
  .right-panel {
    width: 270px;
  }
  
  .canvas-workspace {
    margin-right: 0px;
  }
  
  .vertical-toolbar {
    left: 12px;
  }
}
@media (max-width: 1024px) {
  .right-panel {
    transform: translateX(100%);
    transition: transform 0.3s;
  }
  .right-panel.open {
    transform: translateX(0);
  }
  .canvas-workspace {
    margin-right: 0;
  }
  .vertical-toolbar {
    left: 8px;
    padding: 8px;
  }
  .tool-btn {
    width: 40px;
    height: 40px;
  }
  .toggle-panel-btn{
      display: flex;
    }
}
@media (max-width: 1024px) {
    .editor-container {
        /* Pasamos de dos columnas a una sola */
        grid-template-columns: 1fr; 
    }
    .right-panel {
        position: fixed; /* Cambiamos a fixed para que flote sobre el contenido */
        z-index: 100;
        width: 270px; /* Ancho fijo para el menú lateral en móvil */
        transform: translateX(100%); /* Escondido a la derecha */
        transition: transform 0.3s ease;
    }
    /* Clase para mostrar el panel (la activarás con JS) */
    .right-panel.open {
        transform: translateX(0);
    }
}
/* Oculto en escritorio */
.panel-mobile-header { display: none; }
@media (max-width: 1024px) {
    .panel-mobile-header {
        display: inline-block;
        justify-content: flex-end;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .btn-close-panel { /*-----------------------------------------------------*/
      background: #f0f0f0;
        border: none;
        font-size: 20px;
        width: 25px;
        height: 25px;
        border-radius: var(--radius-full);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    .btn-close-panel:hover { 
      background: var(--hover-link); }
    .right-panel {
        position: fixed;
        right: 0;
        top: 48px;
        width: 85%; /* Deja un 15% del canvas visible a la izquierda */
        max-width: 320px;
        height: calc(100vh - 48px);
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2000;
    }
    .right-panel.show {
        transform: translateX(0);
    }
}
/* Responsive */
@media (min-width: 768px) {
    .tooleditor-name {
        display: none !important;
    }

  
    .topbar-menu-toggle {
        display: block;
    }
}
@media (min-width: 1024px) {
    .topbar-user-info, .topbar-client-info {
        display: flex;
        display: flex;
        flex-direction: row;
        align-items: center;
    } 
    .topbar-menu-toggle {
        display: none;
    }
    .tooleditor-name {
        display: block !important;
    }
}
@media (max-width: 768px) {
    .tooleditor-name {
        display: none !important;
    }
    .tooleditor-item {
    padding: var(--spacing-2) var(--spacing-2);
  }
}
/* ===== DOCKED TOOLBAR (Anclada) ===== */
.toolbar-docked {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background-color: var(--surface-container-5);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-6);
    z-index: 50;
    backdrop-filter: blur(10px);
}
/*===========DARK==========*/
.dark .toolbar-docked {
    background-color: var(--surface-variant); /*---------------------------------------------*/
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.toolbar-btn {
    width: auto;
    height: 2.5rem;
    border-radius: var(--radius-xl);
    background-color: transparent;
    border: none;
    color: var(--on-muted);
    cursor: pointer;
    transition: all var(--transition-base) var(--transition-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
}
.toolbar-btn:hover {/*----------------------------------------------------------------------------------------*/
    background-color: var(--hover);
    color: var(--accent-foreground);
}
.toolbar-btn.active {
    background-color: var(--primary);
    color: var(--primary-foreground);
}
.toolbar-btn a {
    color: rgba(var(--mp-100), var(--bs-link-opacity, 1));
    text-decoration: underline;
}
/* ===== FLOATING TOOLBAR (Flotante Horizontal) ===== */
.toolbar-floating {
    position: sticky;
    bottom: 0.5rem;
    left: 30%;
    transform: translateX(0%);
    background-color: var(--surface-container-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    z-index: 50;
    backdrop-filter: blur(10px);
    width: 60%;
}
/*DARK*/
.dark .toolbar-floating {
    background-color: var(--surface-variant);/*----------------------------*/
}
/* ===== VERTICAL FLOATING TOOLBAR ===== */
.toolbar-vertical {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--spacing-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    z-index: 50;
    backdrop-filter: blur(10px);
}
/*dark*/
.dark .toolbar-vertical {/*----------------------------------------------------------*/
    background-color: var(--surface);
}

/* ===== FLOATING TOOLBAR WITH FAB ===== */
.toolbar-fab-container {
    position:relative;
    bottom: 0;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-3);
    z-index: 50;
}
.toolbar-fab-menu {
    background-color: var(--surface-container-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--spacing-2);
    display: none;
    flex-direction: column;
    gap: var(--spacing-1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: scale(0.8) translateY(1rem);
    transition: all var(--transition-base) var(--transition-ease);
}
/*dark*/
.dark .toolbar-fab-menu {
    background-color: var(--surface-variant);/*--------------------------------------------*/
}
.toolbar-fab-menu.active {
    display: flex;
    opacity: 1;
    transform: scale(1) translateY(0);
}
.fab-btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-acent), var(--secondary-acent));
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-base) var(--transition-ease);
}
.fab-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-2xl);
    color: white;
}
.fab-btn:active {
    transform: scale(0.95);
    color: white;/*----------------------------*/
}
.fab-btn.open {
    transform: rotate(45deg);
    color: white;
}
.fab-btn-sm {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--pirimary);
    color: var(--on-pirimary);
}
/* ===== COMMENTS ===== */
.comments-container {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    max-width: 48rem;
}
.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border);
}
.comments-title {
    font-weight: var(--font-weight-bold);
    color: var(--foreground);
}
.comments-count {
    font-size: 0.875rem;
    color: var(--on-muted);
}
.comment {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}
.comment-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-acent), var(--secondary-acent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.comment-content {
    flex: 1;
}
.comment-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}
.comment-author {
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
}
.comment-time {
    font-size: 0.75rem;
    color: var(--on-muted);
}
.comment-badge {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: var(--font-weight-semibold);
}
.comment-text {
    color: var(--foreground);
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
}
.comment-actions {
    display: flex;
    gap: var(--spacing-4);
}
.comment-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--on-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color var(--transition-base) var(--transition-ease);
    background: none;
    border: none;
}
.comment-action:hover {
    color: var(--hover-light);
}

.comment-action.liked {
    color: var(--primary);
}
.comment-replies {
    margin-top: var(--spacing-4);
    padding-left: var(--spacing-8);
    border-left: 2px solid var(--border);
}
.comment-input {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border);
}
.comment-input-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-acent), var(--secondary-acent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.comment-input-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .toolbar-docked {
        padding: 0 var(--spacing-4);
    }

    .toolbar-floating {
        left: var(--spacing-4);
        right: var(--spacing-4);
        transform: none;
    }

    .toolbar-vertical {
        right: 1rem;
    }

    .toolbar-fab-container {
        right: 1rem;
        bottom: 1rem;
    }

    .profile-card {
        max-width: 100%;
    }

    .comments-container {
        max-width: 100%;
    }

    .comment-replies {
        padding-left: var(--spacing-4);
    }
}
/* ============================================================================
   SLIDER (RANGE INPUT)
   ============================================================================ */
.slider {
  width: 100%;
}
.slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}
.slider-value {
  font-size: 0.875rem;
  color: var(--on-muted);
}
.slider-input {
  -webkit-appearance: none;
  width: 100%;
  height: 0.5rem;
  background: var(--muted);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast) var(--transition-ease);
}
.slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.slider-input::-webkit-slider-thumb:active {
  transform: scale(0.95);
}
.slider-input::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast) var(--transition-ease);
}
.slider-input::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.slider-input::-moz-range-thumb:active {
  transform: scale(0.95);
}
/* ============================================================================
   SEARCH BAR
   ============================================================================ */
.search-wrapper{
  color: var(--text-gray);
  border-radius: var(--radius-sm);
  position: relative;
  width: 300px;
}
   .search-wrapper .clear-icon {
    position: absolute;
    right: 12px;
    top: 60%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    z-index: 4;
    transition: color 0.2s;
    width: 14px;
    height: 14px;
}

.search-wrapper .clear-icon:hover {
    color: #333;
}

/* Ajuste para el Modo Oscuro */
html.dark .search-wrapper .clear-icon:hover {
    color: #fff;
    
}


/* Evita que el texto largo se meta debajo de la X */
.search-wrapper input {
    background-color: transparent;
    padding-right: 35px !important;
    height: 1.6rem;
    margin-top: 10px;
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: var(--radius-sm);
    padding-left: 25px;
    font-size: var(--font-size-xs);
    width: 100%;
}
.search-wrapper input:focus{
  color: var(--foreground);
  background-color: transparent;
  border: 1px solid var(--border);
  outline:0;
 box-shadow: 0 0 0 .25rem rgba(173, 217, 230, .25);
 outline-color: var(--secondary-acent);
}
.search-wrapper .search-icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    z-index: 4;
    transition: color 0.2s;
    width: 10px;
    height: 10px;
    font-size: var(--font-size-xs);
}
.clients-btn-wrapper{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================================================
   CALCULADORA DE MEDIDAS
   ============================================================================ */
.calc-measure-wrapper {
    position: relative;
    display: flex;
    gap: 5px;
}
.calc-widget {
 position: absolute;
    top: calc(100% - 46rem);
    left: 46%;
    width: 19rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
    height: 450px;
    padding: var(--spacing-4);
    z-index: 1060; /* Por encima de todo */
}
.calc-widget.active {
    display: flex;
    animation: slideDown 0.2s ease;
}
.btn-calculator{
  width: 40px;
  height: 40px;
  z-index: 1000;
  position: relative;
}
/* Modo Oscuro para la calculadora */
html.dark #calcResultContainer {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
    color: #fff;
}
html.dark #calcResultContainer:hover {
    background-color: #383838 !important;
}
/* Estilo para cuando se copia correctamente */
.bg-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
}
/* Soporte Modo Oscuro */
html.dark .calc-widget {
    background-color: #202630;
    color: white;
    border: 1px solid #333;
}
html.dark #calcResultContainer {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
}
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 200px;
    overflow-y: auto;
}
.autocomplete-item {
    cursor: pointer;
    padding: 8px 12px;
}
/* Modo Oscuro */
html.dark .autocomplete-item {
    background-color: #202630;
    color: white;
    border-color: #444;/*----------------------------------------------------------------------------------*/
}
html.dark .autocomplete-item:hover {
    background-color: #3d3d3d;
}
#calcResult {
    transition: transform 0.1s ease-in-out;
    display: inline-block; /* Necesario para que el scale funcione */
}
/* Estilo cuando el usuario llega con la tecla TAB */
.result-box:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: var(--bs-primary) !important;
}

/* Ajuste para modo oscuro */
html.dark .result-box:focus {
    background-color: #202630;
    outline-color: var(--secondary-acent-up);
    border-color: var(--secondary-acent-up) !important;
}
/* Ajuste para que el textarea se vea bien en modo oscuro */
html.dark textarea[id^="formulaInput-"] {
    background-color: #202630;
    color: #fff;
    border-color: #444;
}

/* Scrollbar sutil para el autocompletado */
.autocomplete-suggestions::-webkit-scrollbar {
    width: 6px;
}
.autocomplete-suggestions::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
textarea.form-control {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 5));
    font-size: 15px;
    padding-right: 5px !important;
}


/* ============================================================================
   LOADING INDICATORS
   ============================================================================ */
.spinner {
  position: relative;
  width: 2rem;
  height: 2rem;
}
.spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 4px solid var(--muted);
}
.spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 4px solid var(--primary);
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}
.spinner-sm {
  width: 1rem;
  height: 1rem;
}
.spinner-lg {
  width: 3rem;
  height: 3rem;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.dots-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--primary);
  border-radius: var(--radius-full);
  animation: bounce 1.4s ease-in-out infinite;
}
.dot:nth-child(1) {
  animation-delay: 0ms;
}
.dot:nth-child(2) {
  animation-delay: 150ms;
}
.dot:nth-child(3) {
  animation-delay: 300ms;
}
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.progress-bar {
  width: 100%;
  height: 0.5rem;
  background-color: var(--muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: var(--primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow) var(--transition-ease);
}
/* Sliders */
.mp-3d-slider-vertical {
    position: absolute;
    top: 0.75rem;
    bottom: 2.5rem;
    right: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.mp-3d-slider-horizontal {
    position: absolute;
    left: 0.75rem;
    right: 2.5rem;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mp-3d-range {
    width: 100%;
}
.mp-3d-range--vertical {
    transform: rotate(-90deg);
    width: 140px;
}
.mp-3d-slider-icon {
    font-size: 0.85rem;
    color: #9ca3af;
}
/* Notes */
.mp-notes-textarea {
    resize: vertical;
    min-height: 120px;
}
/*==================================================
                       ADMIN PANEL
====================================================*/
.admin-container{
display: flex;
/*grid-template-columns: max-content 1fr;*/
gap: 1rem;
position: fixed;
inset: 48px 0 0 0;   /* si tu navbar mide 48px */
width: 100%;
height: calc(100vh - 48px);
}
@media (max-width: 1200px) {
    .sessions-container {
        position:relative;
    }
}
/*==========================
=====SIDEBAR ADMIN PANEL=======
============================*/
.sidebar {
  width: auto;
  height: calc(100vh - 48px);
  background-color: var(--surface-container-5);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.sidebar-header {
  padding: var(--spacing-6);
}
.sidebar-nav {
  padding: 0 var(--spacing-3);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  color: var(--on-surface-variant);
  text-decoration: none;
  border-radius: var(--radius-xl);
  transition: all var(--transition-base) var(--transition-ease);
  margin-bottom: var(--spacing-1);
}
.sidebar-link:hover {
  background-color: var(--hover-link);
  color: var(--on-hover-link);
}
.sidebar-link.active {
  background-color: var(--hover-link);
  color: var(--on-hover-link);
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 4rem;
  background-color: var(--surface-container-5);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--spacing-2);
}
/* =====================================================
   7. PANELES ESPECÍFICOS EXISTENTES (COMPATIBILIDAD)
   ===================================================== */

/* Panel de usuario anterior (app.html) */
.user-panel {
  background: radial-gradient(circle at top left, var(--primary-acent), var(--secondary-acent));
  min-height: 100vh;
  padding: 20px;
}
.user-card {
  background: var(--surface);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
/* Panel Admin legacy (admin-sidebar y stat-card) */
.admin-sidebar {
  background: var(--surface-container-5);
  min-height: 100vh;
  transition: all 0.3s;
}
.admin-sidebar .nav-link {
  color:var(--on-surface-variant);
  padding: 12px 20px;
  margin: 5px 0;
  border-radius: var(--radius-md);
  transition: all 0.3s;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  background: #3498db;
  color: white;
}
.content-section {
  margin-top: 20px;
}
/*==========DARK============*/
.dark .bottom-nav {
  background-color: rgba(46, 44, 45, 0.95);/*-----------------------------------------------------*/
}
.bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--spacing-2);
  color: var(--on-muted);
  text-decoration: none;
  border-radius: var(--radius-xl);
  transition: all var(--transition-base) var(--transition-ease);
  flex: 1;
}
.bottom-nav-link:hover,
.bottom-nav-link.active {
  background-color: var(--surface-container-5);
  color: var(--on-surface-variant);
}
.bottom-nav-link span {
  font-size: var(--font-size-small);
}
/* ============================================================================
   BOTTOM SHEET (ANDROID)
   ============================================================================ */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(0, 0, 0, 0.5); /*-----------------------------------------------------*/
  animation: fadeIn var(--transition-base) var(--transition-ease);
}
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 90vh;
  background-color: var(--surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-2xl);
  animation: slideUp var(--transition-slow) var(--transition-ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bottom-sheet-handle {
  display: flex;
  justify-content: center;
  padding: var(--spacing-3) 0;
}
.bottom-sheet-handle-bar {
  width: 3rem;
  height: 0.375rem;
  background-color: var(--muted);/*---------------------------------------------------*/
  border-radius: var(--radius-full);
}
.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-6) var(--spacing-4);
}
.bottom-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--spacing-6) var(--spacing-6);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}           
.sheet-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sheet-watermark img {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 110px;
  opacity: 0.10;
}
.sheet-brand {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.75;
}

.sheet-brand img {
  width: 90px;
  height: auto;
  display: block;
}

/*================Session Slope==============*/
.session-slopes-panel {
  height: 100%;
  min-height: 520px;
}

.session-slopes-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
}

.slopes-preview-frame {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  background: #fff;
}

.slopes-floating-menu {
  position: absolute;
  right: 12px;
  top: 18px;
  z-index: 5;

  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 10px 8px;
  border-radius: 18px;
  background: rgba(223, 238, 247, 0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(6px);
}

.slopes-floating-menu button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #27495a;
  font-weight: 700;
  cursor: pointer;
}

.slopes-floating-menu button:hover {
  background: rgba(255,255,255,.65);
}

.slopes-menu-separator {
  height: 1px;
  background: rgba(39,73,90,.25);
  margin: 4px 2px;
}