/**
 * TDEA Accessibility Widget - Estilos
 * Version 2.0.0 - Con soporte para 8 posiciones y modos modal/sidebar
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --tdea-acc-primary: #2563eb;
    --tdea-acc-primary-dark: #1d4ed8;
    --tdea-acc-reset-color: #ef4444;
    --tdea-acc-reset-color-dark: #dc2626;
    --tdea-acc-white: #ffffff;
    --tdea-acc-gray-100: #f3f4f6;
    --tdea-acc-gray-200: #e5e7eb;
    --tdea-acc-gray-300: #d1d5db;
    --tdea-acc-gray-600: #4b5563;
    --tdea-acc-gray-700: #374151;
    --tdea-acc-gray-800: #1f2937;
    --tdea-acc-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --tdea-acc-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --tdea-acc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --tdea-acc-panel-width: 320px;
    --tdea-acc-panel-max-height: 480px;
    /* --tdea-acc-toggle-size se inyecta dinámicamente desde PHP */
    --tdea-acc-toggle-size: 56px; /* valor por defecto, será sobrescrito por PHP */
    --tdea-acc-spacing: 16px;
    --tdea-acc-border-radius: 16px;
}

/* ==========================================================================
   Widget Container - Base
   ========================================================================== */
.tdea-acc-widget {
    position: fixed;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.tdea-acc-widget *,
.tdea-acc-widget *::before,
.tdea-acc-widget *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Position Classes (top-right, middle-right, bottom-right)
   ========================================================================== */
/* Top Right */
.tdea-acc-top-right {
    top: var(--tdea-acc-spacing);
    right: var(--tdea-acc-spacing);
}

/* Middle Right */
.tdea-acc-middle-right {
    top: 50%;
    right: var(--tdea-acc-spacing);
}

.tdea-acc-middle-right .tdea-acc-toggle {
    transform: translateY(-50%);
}

.tdea-acc-middle-right .tdea-acc-toggle:hover {
    transform: translateY(-50%) scale(1.1);
}

.tdea-acc-middle-right .tdea-acc-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

/* Bottom Right */
.tdea-acc-bottom-right {
    bottom: var(--tdea-acc-spacing);
    right: var(--tdea-acc-spacing);
}

/* ==========================================================================
   Toggle Button (FAB)
   ========================================================================== */
.tdea-acc-toggle {
    width: var(--tdea-acc-toggle-size);
    height: var(--tdea-acc-toggle-size);
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tdea-acc-primary) 0%, var(--tdea-acc-primary-dark) 100%);
    color: var(--tdea-acc-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tdea-acc-shadow);
    transition: var(--tdea-acc-transition);
    position: relative;
    overflow: hidden;
}

.tdea-acc-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    border-radius: 50%;
}

.tdea-acc-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--tdea-acc-shadow-lg);
}

.tdea-acc-toggle:focus {
    outline: 3px solid rgba(37, 99, 235, 0.5);
    outline-offset: 3px;
}

.tdea-acc-toggle:active {
    transform: scale(0.95);
}

.tdea-acc-toggle svg {
    width: 28px !important;
    height: 28px !important;
    position: relative;
    z-index: 1;
    fill: currentColor;
    stroke: currentColor;
    display: block;
    flex: 0 0 auto;
}

/* Ocultar toggle cuando panel esta abierto */
.tdea-acc-widget.tdea-acc-open .tdea-acc-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}

/* ==========================================================================
     Panel Base Styles - Modal Mode (default)
     ========================================================================== */
  .tdea-acc-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      background: var(--tdea-acc-white);
      border-radius: var(--tdea-acc-border-radius);
      box-shadow: var(--tdea-acc-shadow-lg);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: var(--tdea-acc-transition);
      display: flex;
      flex-direction: column;
      width: var(--tdea-acc-panel-width);
      max-width: 100vw;
      max-height: var(--tdea-acc-panel-max-height);
      z-index: 1000000;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

/* Panel abierto - Modal centrado */
.tdea-acc-mode-modal.tdea-acc-open .tdea-acc-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* ==========================================================================
   Sidebar Mode - Panel desde el lateral derecho
   ========================================================================== */
.tdea-acc-mode-sidebar .tdea-acc-panel {
    top: 0;
    left: auto;
    right: 0;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    transform: translateX(100%);
}

.tdea-acc-mode-sidebar.tdea-acc-open .tdea-acc-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ==========================================================================
   Panel Header
   ========================================================================== */
.tdea-acc-panel-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: 16px;
     background: linear-gradient(135deg, var(--tdea-acc-primary) 0%, var(--tdea-acc-primary-dark) 100%);
     color: var(--tdea-acc-white);
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
}

.tdea-acc-header-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     flex: 1;
     gap: 8px;
     text-align: center;
     min-width: 0;
     overflow: hidden;
}

.tdea-acc-header-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
}

.tdea-acc-panel-header h3 {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     word-break: break-word;
     overflow-wrap: break-word;
}

.tdea-acc-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
    padding-bottom: 2px;
    flex-shrink: 0;
}

.tdea-acc-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.tdea-acc-close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* ==========================================================================
    Panel Content
    ========================================================================== */
 .tdea-acc-panel-content {
     padding: 12px;
     overflow-y: auto;
     overflow-x: hidden;
     flex: 1;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 8px;
     min-width: 0;
 }

/* Dynamic grid adjustment based on number of options */
.tdea-acc-panel-content:has(.tdea-acc-option:nth-child(3):last-child),
.tdea-acc-panel-content:has(.tdea-acc-option:nth-child(2):last-child),
.tdea-acc-panel-content:has(.tdea-acc-option:nth-child(1):last-child) {
    grid-template-columns: 1fr;
}

/* ==========================================================================
    Scrollbar Customization for Modal Content
    ========================================================================== */
.tdea-acc-panel-content {
    scrollbar-width: thin;
    scrollbar-color: var(--tdea-acc-scrollbar-thumb, var(--tdea-acc-primary)) var(--tdea-acc-scrollbar-track, var(--tdea-acc-gray-100));
}

/* For WebKit browsers */
.tdea-acc-panel-content::-webkit-scrollbar {
    width: var(--tdea-acc-scrollbar-width, 8px);
    height: var(--tdea-acc-scrollbar-height, 8px);
}

.tdea-acc-panel-content::-webkit-scrollbar-thumb {
    background: var(--tdea-acc-scrollbar-thumb, var(--tdea-acc-primary));
    border-radius: var(--tdea-acc-scrollbar-radius, 4px);
    border: var(--tdea-acc-scrollbar-border-width, 1px) solid var(--tdea-acc-scrollbar-border-color, transparent);
}

.tdea-acc-panel-content::-webkit-scrollbar-track {
    background: var(--tdea-acc-scrollbar-track, var(--tdea-acc-gray-100));
}
.tdea-acc-option {
     width: 100%;
     box-sizing: border-box;
     min-width: 0;
}

.tdea-acc-btn {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 8px;
      border: 2px solid var(--tdea-acc-gray-200);
      border-radius: 12px;
      background: var(--tdea-acc-white);
      color: var(--tdea-acc-gray-700);
      cursor: pointer;
      transition: var(--tdea-acc-transition);
      min-height: 80px;
      box-sizing: border-box;
      min-width: 0;
      overflow: hidden;
  }

  .tdea-acc-label {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
  }

.tdea-acc-btn:hover {
    border-color: var(--tdea-acc-primary);
    background: rgba(37, 99, 235, 0.05);
}

.tdea-acc-btn:focus {
    outline: none;
    border-color: var(--tdea-acc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.tdea-acc-btn.active {
    border-color: var(--tdea-acc-primary);
    background: linear-gradient(135deg, var(--tdea-acc-primary) 0%, var(--tdea-acc-primary-dark) 100%);
    color: var(--tdea-acc-white);
}

.tdea-acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.tdea-acc-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.tdea-acc-label {
      font-size: 11px;
      font-weight: 500;
      text-align: center;
      line-height: 1.2;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
  }

 /* ==========================================================================
    Control Unificado de Tamaño de Texto
    ========================================================================== */
  .tdea-acc-text-size-control {
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
  }

  .tdea-acc-text-size-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 16px 12px;
      border: 2px solid var(--tdea-acc-gray-200);
      border-radius: 12px;
      background: var(--tdea-acc-white);
      transition: var(--tdea-acc-transition);
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
  }

 .tdea-acc-text-size-container:hover {
     border-color: var(--tdea-acc-primary);
     background: rgba(37, 99, 235, 0.05);
 }

 .tdea-acc-text-size-container:focus-within {
     outline: none;
     border-color: var(--tdea-acc-primary);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }

  .tdea-acc-text-size-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 2px solid var(--tdea-acc-gray-200);
      border-radius: 8px;
      background: var(--tdea-acc-white);
      color: var(--tdea-acc-gray-700);
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
      transition: var(--tdea-acc-transition);
      padding: 0;
      flex-shrink: 0;
  }

  .tdea-acc-text-size-btn:hover:not(:disabled) {
     border-color: var(--tdea-acc-primary);
     background: rgba(37, 99, 235, 0.05);
     color: var(--tdea-acc-primary);
 }

 .tdea-acc-text-size-btn:focus {
     outline: none;
     border-color: var(--tdea-acc-primary);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }

 .tdea-acc-text-size-btn:active:not(:disabled) {
     transform: scale(0.95);
 }

 .tdea-acc-text-size-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     border-color: var(--tdea-acc-gray-200);
     color: var(--tdea-acc-gray-400);
 }

 .tdea-acc-text-size-btn:disabled:hover {
     background: var(--tdea-acc-white);
     color: var(--tdea-acc-gray-400);
 }

 .tdea-acc-text-size-minus,
 .tdea-acc-text-size-plus {
     line-height: 1;
     display: block;
 }

  .tdea-acc-text-size-display {
      flex: 1;
      text-align: center;
      min-width: 80px;
      box-sizing: border-box;
  }

  .tdea-acc-text-size-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--tdea-acc-gray-700);
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

 .tdea-acc-text-size-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
 }

 .tdea-acc-text-size-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--tdea-acc-gray-300);
     transition: var(--tdea-acc-transition);
 }

 .tdea-acc-text-size-dot.active {
     background: var(--tdea-acc-primary);
     width: 8px;
     height: 8px;
 }

 /* ==========================================================================
    Panel Footer & Reset Button
    ========================================================================== */
.tdea-acc-panel-footer {
     padding: 12px;
     border-top: 1px solid var(--tdea-acc-gray-200);
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
}

.tdea-acc-reset {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 16px;
     border: none;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--tdea-acc-reset-color) 0%, var(--tdea-acc-reset-color-dark) 100%);
     color: var(--tdea-acc-white);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--tdea-acc-transition);
     position: relative;
     overflow: hidden;
     box-sizing: border-box;
}

.tdea-acc-reset::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.tdea-acc-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tdea-acc-reset-color) 40%, transparent);
}

.tdea-acc-reset:hover::before {
    left: 100%;
}

.tdea-acc-reset:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdea-acc-reset-color) 30%, transparent);
}

.tdea-acc-reset:active {
    transform: translateY(0);
}

.tdea-acc-reset svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ==========================================================================
   Accessibility Features - Body Classes
   ========================================================================== */

/* High Contrast */
.tdea-acc-high-contrast {
    filter: contrast(1.5);
}

/* Highlight Links */
.tdea-acc-highlight-links a {
    outline: 2px solid #ff0 !important;
    background-color: #ff0 !important;
    color: #000 !important;
}

/* Bigger Text - Level 1 (110%) */
.tdea-acc-bigger-text-1 {
    font-size: 110% !important;
}

.tdea-acc-bigger-text-1 * {
    font-size: inherit;
}

/* Bigger Text - Level 2 (125%) */
.tdea-acc-bigger-text-2 {
    font-size: 125% !important;
}

.tdea-acc-bigger-text-2 * {
    font-size: inherit;
}

/* Incremental Text Size - Levels 1-5 */
.tdea-acc-text-size-1 {
    font-size: 125% !important;
}

.tdea-acc-text-size-1 * {
    font-size: inherit;
}

.tdea-acc-text-size-2 {
    font-size: 150% !important;
}

.tdea-acc-text-size-2 * {
    font-size: inherit;
}

.tdea-acc-text-size-3 {
    font-size: 175% !important;
}

.tdea-acc-text-size-3 * {
    font-size: inherit;
}

.tdea-acc-text-size-4 {
    font-size: 200% !important;
}

.tdea-acc-text-size-4 * {
    font-size: inherit;
}

.tdea-acc-text-size-5 {
    font-size: 225% !important;
}

.tdea-acc-text-size-5 * {
    font-size: inherit;
}

/* Text Spacing - Level 1 */
.tdea-acc-text-spacing-1 {
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* Text Spacing - Level 2 */
.tdea-acc-text-spacing-2 {
    letter-spacing: 0.1em !important;
    word-spacing: 0.2em !important;
}

/* Text Spacing - Level 3 */
.tdea-acc-text-spacing-3 {
    letter-spacing: 0.15em !important;
    word-spacing: 0.3em !important;
}

/* Pause Animations */
.tdea-acc-pause-animations,
.tdea-acc-pause-animations * {
    animation: none !important;
    transition: none !important;
}

/* Hide Images */
.tdea-acc-hide-images img {
    visibility: hidden !important;
}

/* Dyslexia Friendly */
.tdea-acc-dyslexia {
    font-family: "OpenDyslexic", "Comic Sans MS", "Arial", sans-serif !important;
}

.tdea-acc-dyslexia * {
    font-family: inherit !important;
}

/* Big Cursor */
.tdea-acc-big-cursor,
.tdea-acc-big-cursor * {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23000" stroke="%23fff" stroke-width="1" d="M5 3l14 9-7 2-3 7z"/></svg>') 0 0, auto !important;
}

/* Tooltips */
.tdea-acc-tooltips [title]:hover::after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
    margin-top: 5px;
}

.tdea-acc-tooltips [title] {
    position: relative;
}

/* Line Height - Level 1 */
.tdea-acc-line-height-1 {
    line-height: 1.8 !important;
}

/* Line Height - Level 2 */
.tdea-acc-line-height-2 {
    line-height: 2.2 !important;
}

/* Line Height - Level 3 */
.tdea-acc-line-height-3 {
    line-height: 2.6 !important;
}

/* Text Align - Left */
.tdea-acc-text-align-left,
.tdea-acc-text-align-left * {
    text-align: left !important;
}

/* Text Align - Center */
.tdea-acc-text-align-center,
.tdea-acc-text-align-center * {
    text-align: center !important;
}

/* Text Align - Right */
.tdea-acc-text-align-right,
.tdea-acc-text-align-right * {
    text-align: right !important;
}

/* Saturation - Low */
.tdea-acc-saturation-low {
    filter: saturate(0.5);
}

/* Saturation - None (Grayscale) */
.tdea-acc-saturation-none {
    filter: grayscale(1);
}

/* Saturation - High */
.tdea-acc-saturation-high {
    filter: saturate(2);
}

/* ==========================================================================
     Widget Oversized Mode
     ========================================================================== */
.tdea-acc-oversized {
      --tdea-acc-toggle-size: 72px;
      --tdea-acc-panel-width: 380px;
}

.tdea-acc-oversized .tdea-acc-toggle {
     width: var(--tdea-acc-toggle-size);
     height: var(--tdea-acc-toggle-size);
}

.tdea-acc-oversized .tdea-acc-toggle svg {
     width: 36px;
     height: 36px;
}

.tdea-acc-oversized .tdea-acc-btn {
     min-height: 100px;
     padding: 16px 12px;
}

.tdea-acc-oversized .tdea-acc-icon svg {
     width: 32px;
     height: 32px;
}

.tdea-acc-oversized .tdea-acc-label {
     font-size: 13px;
}

/* El panel modal NO debe verse afectado por oversized */
.tdea-acc-mode-modal.tdea-acc-oversized .tdea-acc-panel {
     /* Mantener panel centrado en viewport */
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) scale(0.95) !important;
}

.tdea-acc-mode-modal.tdea-acc-open.tdea-acc-oversized .tdea-acc-panel {
     transform: translate(-50%, -50%) scale(1) !important;
}

.tdea-acc-mode-modal.tdea-acc-open.tdea-acc-oversized .tdea-acc-panel {
    transform: translate(-50%, -50%) scale(1) !important;
}

.tdea-acc-oversized .tdea-acc-toggle {
    width: var(--tdea-acc-toggle-size);
    height: var(--tdea-acc-toggle-size);
}

.tdea-acc-oversized .tdea-acc-toggle svg {
    width: 36px;
    height: 36px;
}

.tdea-acc-oversized .tdea-acc-btn {
    min-height: 100px;
    padding: 16px 12px;
}

.tdea-acc-oversized .tdea-acc-icon svg {
    width: 32px;
    height: 32px;
}

.tdea-acc-oversized .tdea-acc-label {
    font-size: 13px;
}

/* ==========================================================================
    Responsive Design - Tablet (max-width: 768px)
    ========================================================================== */
@media (max-width: 768px) {
    :root {
        --tdea-acc-panel-width: calc(100vw - 48px);
        --tdea-acc-spacing: 14px;
    }
    
    .tdea-acc-widget {
        bottom: 12px;
        right: 12px;
    }
    
    .tdea-acc-panel-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .tdea-acc-btn {
        min-height: 70px;
        padding: 10px 6px;
        gap: 4px;
    }
    
    .tdea-acc-label {
        font-size: 10px;
    }
    
    .tdea-acc-text-size-container {
        padding: 12px 10px;
        gap: 6px;
    }
    
    .tdea-acc-text-size-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .tdea-acc-text-size-label {
        font-size: 11px;
        margin-bottom: 3px;
    }
    
    .tdea-acc-text-size-indicator {
        gap: 4px;
    }
    
    .tdea-acc-text-size-dot {
        width: 5px;
        height: 5px;
    }
    
    .tdea-acc-text-size-dot.active {
        width: 7px;
        height: 7px;
    }
    
     /* Oversized en tablet */
     .tdea-acc-oversized {
         --tdea-acc-toggle-size: 64px;
         --tdea-acc-panel-width: calc(100vw - 48px);
     }
     
     .tdea-acc-oversized .tdea-acc-btn {
         min-height: 80px;
         padding: 12px 10px;
     }
     
     .tdea-acc-oversized .tdea-acc-icon svg {
         width: 28px;
         height: 28px;
     }
     
     .tdea-acc-oversized .tdea-acc-label {
         font-size: 11px;
     }
}

/* ==========================================================================
    Responsive Design - Mobile (max-width: 480px)
    ========================================================================== */
@media (max-width: 480px) {
     :root {
         --tdea-acc-panel-width: calc(100vw - 32px);
         --tdea-acc-spacing: 12px;
         --tdea-acc-toggle-size: 48px;
     }
    
    .tdea-acc-widget {
        bottom: 8px;
        right: 8px;
    }
    
    .tdea-acc-toggle {
        width: var(--tdea-acc-toggle-size);
        height: var(--tdea-acc-toggle-size);
    }
    
    .tdea-acc-toggle svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .tdea-acc-mode-modal .tdea-acc-panel {
        max-height: calc(100vh - 80px);
    }
    
    /* Center modal on mobile for all positions */
    .tdea-acc-mode-modal.tdea-acc-top-left .tdea-acc-panel,
    .tdea-acc-mode-modal.tdea-acc-top-right .tdea-acc-panel,
    .tdea-acc-mode-modal.tdea-acc-bottom-left .tdea-acc-panel,
    .tdea-acc-mode-modal.tdea-acc-bottom-right .tdea-acc-panel {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%) scale(0.95);
    }
    
    .tdea-acc-mode-modal.tdea-acc-top-left.tdea-acc-open .tdea-acc-panel,
    .tdea-acc-mode-modal.tdea-acc-top-right.tdea-acc-open .tdea-acc-panel,
    .tdea-acc-mode-modal.tdea-acc-bottom-left.tdea-acc-open .tdea-acc-panel,
    .tdea-acc-mode-modal.tdea-acc-bottom-right.tdea-acc-open .tdea-acc-panel {
        transform: translate(-50%, -50%) scale(1);
    }
    
    .tdea-acc-panel-header {
        padding: 12px;
    }
    
    .tdea-acc-header-content {
        gap: 6px;
    }
    
    .tdea-acc-header-icon {
        width: 40px;
        height: 40px;
    }
    
    .tdea-acc-panel-header h3 {
        font-size: 14px;
    }
    
    .tdea-acc-close {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .tdea-acc-panel-content {
        padding: 8px;
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .tdea-acc-btn {
        min-height: 56px;
        padding: 8px 6px;
        gap: 3px;
    }
    
    .tdea-acc-icon {
        width: 24px;
        height: 24px;
    }
    
    .tdea-acc-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .tdea-acc-label {
        font-size: 9px;
        line-height: 1;
    }
    
    .tdea-acc-panel-footer {
        padding: 8px;
    }
    
    .tdea-acc-reset {
        padding: 10px 12px;
        font-size: 12px;
        min-height: 40px;
        gap: 4px;
    }
    
    .tdea-acc-reset svg {
        width: 16px;
        height: 16px;
    }
    
     /* Control de tamaño de texto */
     .tdea-acc-text-size-container {
         padding: 8px 6px;
         gap: 3px;
     }
     
     .tdea-acc-text-size-btn {
         width: 32px;
         height: 32px;
         font-size: 16px;
         flex-shrink: 0;
         padding: 0;
     }
     
     .tdea-acc-text-size-display {
         min-width: auto;
         flex: 1;
         min-width: 0;
     }
    
     .tdea-acc-text-size-label {
         font-size: 10px;
         margin-bottom: 2px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
    
    .tdea-acc-text-size-indicator {
        gap: 3px;
    }
    
    .tdea-acc-text-size-dot {
        width: 4px;
        height: 4px;
    }
    
    .tdea-acc-text-size-dot.active {
        width: 6px;
        height: 6px;
    }
    
     /* Modo oversized en mobile */
     .tdea-acc-oversized {
         --tdea-acc-toggle-size: 48px;
         --tdea-acc-panel-width: calc(100vw - 32px);
     }
     
     .tdea-acc-oversized .tdea-acc-toggle {
         width: var(--tdea-acc-toggle-size);
         height: var(--tdea-acc-toggle-size);
     }
     
     .tdea-acc-oversized .tdea-acc-toggle svg {
         width: 24px !important;
         height: 24px !important;
     }
     
     .tdea-acc-oversized .tdea-acc-btn {
         min-height: 60px;
         padding: 10px 6px;
     }
     
     .tdea-acc-oversized .tdea-acc-icon {
         width: 26px;
         height: 26px;
     }
     
     .tdea-acc-oversized .tdea-acc-icon svg {
         width: 20px;
         height: 20px;
     }
     
     .tdea-acc-oversized .tdea-acc-label {
         font-size: 10px;
     }
}

/* ==========================================================================
   Grid 1 columna cuando texto es MUCHO más grande (nivel 4-5)
   ========================================================================== */
.tdea-acc-text-size-4 .tdea-acc-widget .tdea-acc-panel-content,
.tdea-acc-text-size-5 .tdea-acc-widget .tdea-acc-panel-content {
     grid-template-columns: 1fr;
}

/* ==========================================================================
    Print Styles
    ========================================================================== */
@media print {
    .tdea-acc-widget {
        display: none !important;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tdea-acc-widget,
    .tdea-acc-widget * {
        transition: none !important;
        animation: none !important;
    }
}