/* VARIABLES Y PALETA DE COLORES PREMIUM (HSL) - TEMA CLARO */
    :root {
      --primary: hsl(182, 80%, 35%);
      --primary-rgb: 18, 161, 161;
      --primary-hover: hsl(182, 80%, 30%);
      
      --secondary: hsl(42, 95%, 55%);
      --secondary-rgb: 245, 175, 25;
      
      --success: hsl(152, 69%, 31%);
      --success-bg: hsl(152, 70%, 95%);
      --success-border: hsl(152, 60%, 85%);
      
      --warning: hsl(42, 100%, 50%);
      --warning-bg: hsl(42, 100%, 96%);
      --warning-border: hsl(42, 90%, 88%);
      
      --danger: hsl(354, 75%, 45%);
      --danger-bg: hsl(354, 100%, 97%);
      
      --bg-app: hsl(210, 20%, 98%);
      --card-bg: hsl(0, 0%, 100%);
      --text-dark: hsl(210, 24%, 16%);
      --text-muted: hsl(210, 10%, 45%);
      --text-light: hsl(210, 14%, 70%);
      --border-color: hsl(210, 14%, 90%);
      
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 10px;
      --nav-height: 72px;
      --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
      --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.03);
      --app-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
      --body-bg: #e5edea;
      
      --input-bg: hsl(0, 0%, 100%);
    }

    /* TEMA OSCURO AUTOMÁTICO (DARK MODE) */
    @media (prefers-color-scheme: dark) {
      :root {
        --primary: hsl(182, 80%, 40%);
        --primary-hover: hsl(182, 80%, 45%);
        --secondary: hsl(42, 95%, 55%);
        
        --success: hsl(152, 60%, 45%);
        --success-bg: hsl(152, 50%, 15%);
        --success-border: hsl(152, 50%, 25%);
        
        --warning: hsl(42, 90%, 60%);
        --warning-bg: hsl(42, 50%, 15%);
        --warning-border: hsl(42, 50%, 25%);
        
        --danger: hsl(354, 75%, 60%);
        --danger-bg: hsl(354, 50%, 15%);
        
        --bg-app: hsl(210, 24%, 10%); /* Fondo general oscuro */
        --card-bg: hsl(210, 24%, 16%); /* Tarjetas un poco más claras */
        --text-dark: hsl(0, 0%, 98%); /* Texto principal blanco/gris muy claro */
        --text-muted: hsl(210, 10%, 75%); /* Texto secundario gris claro */
        --text-light: hsl(210, 14%, 50%);
        --border-color: hsl(210, 20%, 25%);
        
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
        --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.2);
        --app-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        --body-bg: #0f172a;
        
        --input-bg: hsl(210, 24%, 12%);
      }
      
      .result-card {
        background: linear-gradient(135deg, hsl(152, 40%, 15%) 0%, hsl(152, 40%, 10%) 100%) !important;
      }
      .install-banner {
        background: linear-gradient(135deg, hsl(210, 24%, 18%) 0%, hsl(210, 24%, 14%) 100%) !important;
      }
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background-color: var(--body-bg);
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      color: var(--text-dark);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      padding: 10px 10px 80px;
      transition: background-color 0.3s ease;
      overflow-x: hidden;
    }
    
    /* CONTENEDOR TIPO APLICACIÓN MÓVIL */
    .tracker-app {
      width: 100%;
      max-width: 480px;
      min-height: 580px;
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      position: relative;
      box-shadow: var(--app-shadow);
      overflow: visible;
      display: flex;
      flex-direction: column;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* HEADER */
    .header {
      background: linear-gradient(135deg, var(--primary) 0%, hsl(182, 80%, 25%) 100%);
      color: white;
      padding: 22px 24px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.15);
      z-index: 10;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .header-logo {
      width: 38px;
      height: 38px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
    }
    .header-logo svg {
      width: 22px;
      height: 22px;
      fill: white;
    }
    .header h1 {
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    
    /* BOTÓN COMPARTIR HEADER */
    .btn-share-header {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(5px);
      transition: var(--transition-base);
    }
    .btn-share-header:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
    }
    .btn-share-header svg {
      width: 20px;
      height: 20px;
      fill: white;
    }

    /* SCROLLABLE CONTENT AREA */
    .content-area {
      flex: 1;
      overflow-y: visible;
      padding: 20px 20px calc(var(--nav-height) + 20px);
      background-color: var(--bg-app);
      transition: background-color 0.3s ease;
    }

    /* TOAST DE ACTUALIZACIÓN SW */
    .toast-notification {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(-150%);
      background: var(--text-dark);
      color: var(--card-bg);
      padding: 12px 20px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 600;
      box-shadow: var(--shadow-md);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      cursor: pointer;
    }
    .toast-notification.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* BANNER PWA */
    .install-banner {
      background: linear-gradient(135deg, hsl(210, 24%, 20%) 0%, hsl(210, 24%, 12%) 100%);
      color: white;
      padding: 16px;
      border-radius: var(--radius-md);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      animation: slideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .install-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .install-icon {
      font-size: 1.8rem;
    }
    .install-text h4 {
      margin: 0;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: -0.2px;
      color: white;
    }
    .install-text p {
      margin: 2px 0 0 0;
      font-size: 0.78rem;
      color: #94A3B8;
    }
    .btn-install {
      background: var(--primary);
      color: white;
      border: none;
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
      transition: var(--transition-base);
    }
    .btn-install:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
    }

    /* PANTALLAS (SCREENS) */
    .screen {
      display: none;
      animation: fadeSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .screen.active {
      display: block;
    }
    
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ELEMENTOS DE FORMULARIO */
    .form-group {
      margin-bottom: 18px;
    }
    .form-group label {
      display: block;
      font-weight: 700;
      margin-bottom: 8px;
      font-size: 0.88rem;
      color: var(--text-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .form-control {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid var(--border-color);
      background-color: var(--input-bg);
      border-radius: var(--radius-md);
      font-size: 1rem;
      color: var(--text-dark);
      font-family: inherit;
      font-weight: 600;
      box-sizing: border-box;
      transition: var(--transition-base);
    }
    select.form-control {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 16px;
      padding-right: 40px;
    }
    .form-control:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
    }
    .form-control::placeholder {
      color: var(--text-light);
    }
    
    /* BOTONES PRINCIPALES */
    .btn-main {
      width: 100%;
      background: var(--primary);
      color: white;
      padding: 16px 20px;
      font-size: 1.05rem;
      font-weight: 700;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      margin-top: 10px;
      box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.2);
      transition: var(--transition-base);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .btn-main:hover {
      background: var(--primary-hover);
      box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.3);
      transform: translateY(-2px);
    }
    .btn-main:active {
      transform: translateY(0) scale(0.98);
    }
    .btn-main:disabled {
      background: var(--border-color) !important;
      color: var(--text-light) !important;
      box-shadow: none !important;
      cursor: not-allowed;
      transform: none !important;
    }

    /* GRID DE SELECCIÓN (CLIMA & ACTIVIDAD) */
    .section-title {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-dark);
    }
    .selection-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }
    .btn-select {
      background: var(--card-bg);
      border: 2px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 14px 6px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition-base);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-muted);
      box-shadow: var(--shadow-sm);
    }
    .btn-select:hover {
      border-color: var(--text-light);
      transform: translateY(-2px);
    }
    .btn-select.active {
      border-color: var(--primary);
      background: rgba(var(--primary-rgb), 0.08);
      color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.1);
    }
    .btn-select-icon {
      font-size: 1.6rem;
      transition: transform 0.2s;
    }
    .btn-select.active .btn-select-icon {
      transform: scale(1.15);
    }

    /* TARJETA DE RESULTADOS */
    .result-card {
      background: linear-gradient(135deg, hsl(152, 69%, 96%) 0%, hsl(152, 69%, 93%) 100%);
      border: 1px solid var(--success-border);
      border-radius: var(--radius-md);
      padding: 22px;
      margin-top: 24px;
      display: none;
      box-shadow: var(--shadow-md);
      animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes scaleIn {
      from { transform: scale(0.95); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .result-row {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .result-label {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--success);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .result-value {
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--success);
      margin: 4px 0 14px;
      letter-spacing: -1px;
    }
    .water-section {
      width: 100%;
      border-top: 1px solid rgba(46, 196, 182, 0.2);
      padding-top: 14px;
      text-align: center;
    }
    .water-label {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--secondary);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .water-value {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--secondary);
      margin-top: 4px;
      display: block;
    }

    /* MÓDULO POSTQUIRÚRGICO */
    .recovery-card {
      background: var(--card-bg);
      border-radius: var(--radius-md);
      padding: 20px;
      box-shadow: var(--shadow-md);
      margin-bottom: 20px;
      border-left: 6px solid var(--secondary);
    }
    .streak-badge {
      background: var(--warning-bg);
      color: var(--warning);
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--warning-border);
      animation: pulseStreak 2s infinite;
    }
    @keyframes pulseStreak {
      0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.2); }
      70% { box-shadow: 0 0 0 6px rgba(255, 183, 3, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0); }
    }
    .progress-container {
      width: 100%;
      background: var(--border-color);
      border-radius: 50px;
      height: 10px;
      margin: 16px 0 8px;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--secondary) 0%, #06B6D4 100%);
      border-radius: 50px;
      width: 0%;
      transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* MINI CALENDARIO DE RECUPERACIÓN */
    .recovery-calendar {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin: 12px 0 4px;
    }
    .cal-day {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 800;
      transition: transform 0.2s;
    }
    .cal-day:hover { transform: scale(1.15); }
    .cal-day.future  { background: var(--border-color); color: var(--text-light); }
    .cal-day.today   { background: var(--secondary); color: white; box-shadow: 0 2px 8px rgba(78,168,222,0.4); }
    .cal-day.done    { background: var(--success); color: white; }
    .cal-day.done.warn  { background: hsl(42,100%,50%); color: white; }
    .cal-day.done.urg   { background: var(--danger); color: white; }
    .cal-day.missed  { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }

    /* SEMÁFORO DE HERIDA */
    .wound-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 10px 0 4px;
    }
    .wound-btn {
      padding: 12px 14px;
      border-radius: var(--radius-md);
      border: 2px solid var(--border-color);
      background: var(--card-bg);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      transition: var(--transition-base);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 1.3;
    }
    .wound-btn:hover { transform: translateY(-2px); }
    .wound-btn.active-bien   { border-color: var(--success); background: var(--success-bg); color: var(--success); }
    .wound-btn.active-aten   { border-color: hsl(42,100%,50%); background: var(--warning-bg); color: hsl(42,80%,35%); }
    .wound-btn.active-urg    { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

    /* SELECTOR DE COMPORTAMIENTO */
    .mood-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin: 10px 0 4px;
    }
    .mood-btn {
      padding: 10px 4px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border-color);
      background: var(--card-bg);
      font-size: 1.3rem;
      cursor: pointer;
      text-align: center;
      transition: var(--transition-base);
    }
    .mood-btn.active { border-color: var(--secondary); background: rgba(var(--secondary-rgb),0.08); transform: scale(1.1); }

    /* INDICADOR DE TEMPERATURA */
    .temp-feedback {
      font-size: 0.82rem;
      font-weight: 700;
      margin-top: 6px;
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      display: none;
    }
    .temp-feedback.ok    { background: var(--success-bg); color: var(--success); display: block; }
    .temp-feedback.warn  { background: var(--warning-bg); color: hsl(42,80%,35%); display: block; }

    /* TARJETA ALERTA URGENTE */
    .alert-urgente {
      display: none;
      background: var(--danger-bg);
      border: 2px solid var(--danger);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin: 14px 0;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--danger);
    }

    /* TARJETA RETIRO DE PUNTOS */
    .stitch-reminder {
      display: none;
      background: rgba(var(--secondary-rgb), 0.08);
      border: 1px solid var(--secondary);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-bottom: 14px;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-dark);
    }

    /* TOGGLE SWITCH */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
    }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: var(--border-color);
      transition: .4s;
      border-radius: 24px;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 18px; width: 18px;
      left: 3px; bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    input:checked + .slider { background-color: var(--primary); }
    input:checked + .slider:before { transform: translateX(22px); }

    /* SELECTOR TIPO CIRUGÍA */
    .surgery-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 2px solid var(--border-color);
      border-radius: var(--radius-md);
      background: var(--card-bg);
      cursor: pointer;
      transition: var(--transition-base);
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--text-dark);
    }
    .surgery-option:hover { border-color: var(--secondary); transform: translateX(3px); }
    .surgery-option.selected { border-color: var(--secondary); background: rgba(var(--secondary-rgb),0.08); }
    .surgery-option .surg-days {
      margin-left: auto;
      background: var(--secondary);
      color: white;
      font-size: 0.75rem;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 50px;
    }
    
    /* CHECKLIST DE TAREAS RECOVERY */
    .checklist-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 12px;
      padding: 16px;
      background: var(--card-bg);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      transition: var(--transition-base);
    }
    .checklist-item:hover {
      border-color: var(--text-light);
    }
    .checklist-item.checked {
      background: var(--success-bg);
      border-color: var(--success-border);
      opacity: 0.85;
    }
    .checklist-item input[type="checkbox"] {
      width: 24px;
      height: 24px;
      margin-top: 1px;
      accent-color: var(--success);
      cursor: pointer;
      border-radius: 6px;
      border: 2px solid var(--border-color);
    }
    .checklist-item label {
      font-size: 0.92rem;
      line-height: 1.45;
      color: var(--text-dark);
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }

    /* GESTOR DE MEDICAMENTOS */
    .med-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      cursor: pointer;
      margin-bottom: 10px;
      box-shadow: var(--shadow-sm);
      transition: var(--transition-base);
    }
    .med-section-header:hover { border-color: var(--secondary); }
    .med-section-header h3 {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--text-dark);
    }
    .med-section-header .med-badge {
      background: var(--secondary);
      color: white;
      font-size: 0.72rem;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 50px;
    }
    .med-form-panel {
      display: none;
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-bottom: 14px;
      box-shadow: var(--shadow-sm);
    }
    .med-form-panel.open { display: block; }
    .horario-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 8px 0;
    }
    .horario-chip {
      padding: 6px 12px;
      border-radius: 50px;
      border: 2px solid var(--border-color);
      background: var(--card-bg);
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--text-muted);
      transition: var(--transition-base);
    }
    .horario-chip.selected {
      border-color: var(--secondary);
      background: rgba(var(--secondary-rgb), 0.12);
      color: var(--secondary);
    }
    .med-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      background: var(--bg-app);
      border-radius: var(--radius-sm);
      margin-bottom: 6px;
      font-size: 0.85rem;
      font-weight: 700;
    }
    .med-list-item .med-name { color: var(--text-dark); }
    .med-list-item .med-dose { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; }
    .med-delete-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      color: var(--danger);
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      transition: var(--transition-base);
    }
    .med-delete-btn:hover { background: var(--danger-bg); }

    /* TARJETAS DE TOMA DIARIA */
    .toma-card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: var(--shadow-sm);
    }
    .toma-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .toma-card-header .toma-name {
      font-size: 0.92rem;
      font-weight: 800;
      color: var(--text-dark);
    }
    .toma-card-header .toma-dose {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-muted);
    }
    .toma-progress-bar-wrap {
      width: 100%;
      height: 5px;
      background: var(--border-color);
      border-radius: 50px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .toma-progress-bar-fill {
      height: 100%;
      background: var(--success);
      border-radius: 50px;
      transition: width 0.6s ease;
    }
    .toma-horarios {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .toma-btn {
      padding: 8px 14px;
      border-radius: 50px;
      border: 2px solid var(--border-color);
      background: var(--card-bg);
      font-size: 0.78rem;
      font-weight: 800;
      cursor: pointer;
      transition: var(--transition-base);
      color: var(--text-muted);
    }
    .toma-btn:hover:not(:disabled) { transform: scale(1.05); }
    .toma-btn.pendiente {
      border-color: hsl(30,100%,55%);
      background: hsl(30,100%,97%);
      color: hsl(30,80%,35%);
      animation: pulsePendiente 2s infinite;
    }
    @media (prefers-color-scheme: dark) {
      .toma-btn.pendiente {
        background: hsl(30,50%,15%);
        color: hsl(30,90%,65%);
      }
    }
    @keyframes pulsePendiente {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,140,0,0.3); }
      50%      { box-shadow: 0 0 0 5px rgba(255,140,0,0); }
    }
    .toma-btn.dado {
      background: var(--success-bg);
      color: var(--success);
      border-color: var(--success);
      opacity: 0.8;
    }
    .toma-btn.fallida {
      background: var(--danger-bg);
      color: var(--danger);
      border-color: var(--danger);
      opacity: 0.7;
      text-decoration: line-through;
    }
    .toma-btn.dado:disabled { opacity: 1; }
    .med-global-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-muted);
    }
    .med-global-bar-wrap {
      flex: 1;
      height: 6px;
      background: var(--border-color);
      border-radius: 50px;
      overflow: hidden;
    }
    .med-global-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--success) 0%, #06B6D4 100%);
      border-radius: 50px;
      transition: width 0.6s ease;
    }

    /* MODAL DE CELEBRACIÓN DE RACHAS */
    .celebration-modal {

      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(var(--input-bg), 0.95);
      backdrop-filter: blur(5px);
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      text-align: center;
      padding: 30px;
    }
    .celebration-modal.show {
      opacity: 1;
      pointer-events: all;
    }
    .celebration-icon {
      font-size: 4.5rem;
      animation: bounce 1.2s infinite;
      margin-bottom: 20px;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-20px) scale(1.1); }
    }
    
    /* ADSENSE PLACEHOLDERS OPTIMIZADOS (ANTI-CLS) */
    .adsbygoogle-placeholder {
      display: block;
      width: 100%;
      min-height: 250px;
      background: var(--border-color);
      border-radius: var(--radius-md);
      margin: 18px 0;
      position: relative;
      overflow: hidden;
    }
    /* Estilo de fallback visible para desarrollo local cuando AdSense no carga */
    .adsbygoogle-placeholder::before {
      content: 'Espacio Publicitario';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--text-muted);
      font-weight: 600;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
      z-index: 0;
    }

    /* BARRA DE NAVEGACIÓN INFERIOR ESTILO MÓVIL NATIVO */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 480px;
      height: var(--nav-height);
      background: var(--card-bg);
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 -8px 25px rgba(0,0,0,0.04);
      z-index: 20;
    }
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      font-size: 0.72rem;
      font-weight: 700;
      width: 100%;
      height: 100%;
      cursor: pointer;
      transition: var(--transition-base);
      gap: 4px;
    }
    .nav-item:hover {
      color: var(--text-muted);
    }
    .nav-item.active {
      color: var(--primary);
    }
    .nav-item svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
      transition: transform 0.2s;
    }
    .nav-item.active svg {
      transform: translateY(-2px) scale(1.08);
    }

    /* CONFIGURACIÓN SCREEN EXTRA STYLING */
    .profile-card {
      background: var(--card-bg);
      border-radius: var(--radius-md);
      padding: 20px;
      border: 1px solid var(--border-color);
      margin-bottom: 20px;
      box-shadow: var(--shadow-sm);
    }
    .profile-stat {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--bg-app);
    }
    .profile-stat:last-child {
      border-bottom: none;
    }
    .profile-stat span:first-child {
      font-weight: 700;
      color: var(--text-muted);
    }
    .profile-stat span:last-child {
      font-weight: 800;
      color: var(--text-dark);
    }
    .action-row {
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }

    /* CONTENEDOR MULTI-MASCOTA (PET SWITCHER) */
    .pet-switcher-container {
      display: none;
      margin-bottom: 16px;
      padding: 0 4px;
    }
    .pet-switcher-scroll {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 4px 8px;
      scrollbar-width: none; /* Firefox */
    }
    .pet-switcher-scroll::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
    }
    .pet-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--card-bg);
      border: 2px solid var(--border-color);
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      transition: var(--transition-base);
      box-shadow: var(--shadow-sm);
    }
    .pet-pill:hover {
      border-color: var(--text-light);
      transform: translateY(-1px);
    }
    .pet-pill.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
      box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
    }
    .pet-pill-add {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: transparent;
      border: 2px dashed var(--border-color);
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--primary);
      cursor: pointer;
      white-space: nowrap;
      transition: var(--transition-base);
    }
    .pet-pill-add:hover {
      border-color: var(--primary);
      background: rgba(var(--primary-rgb), 0.05);
    }

    /* CONFETTI CANVAS */
    #confetti-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
      pointer-events: none;
      display: none;
    }

    /* IMPRESIÓN REPORTE CLÍNICO VETERINARIO */
    #print-report {
      display: none;
    }
    
    @media print {
      body {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      body * {
        visibility: hidden;
      }
      .tracker-app, .header, .bottom-nav, .adsbygoogle-placeholder, .install-banner, #confetti-canvas {
        display: none !important;
      }
      body.printing-diploma #print-report { display: none !important; }
      body.printing-diploma #print-diploma, body.printing-diploma #print-diploma * {
        visibility: visible;
      }
      body:not(.printing-diploma) #print-report, body:not(.printing-diploma) #print-report * {
        visibility: visible;
      }
      #print-report, #print-diploma {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block !important;
        padding: 30px;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        color: #1E293B;
      }
      #print-diploma {
        padding: 0;
      }
      .report-header {
        border-bottom: 3px solid #334155;
        padding-bottom: 16px;
        margin-bottom: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .report-title-box h2 {
        margin: 0;
        font-size: 26px;
        color: #0F172A;
        font-weight: 800;
      }
      .report-title-box p {
        margin: 4px 0 0 0;
        color: #64748B;
        font-size: 13px;
        font-weight: 500;
      }
      .report-logo-placeholder {
        font-size: 20px;
        font-weight: 800;
        color: #FF6B6B;
        border: 2px solid #FF6B6B;
        padding: 6px 12px;
        border-radius: 8px;
      }
      .report-section {
        margin-bottom: 24px;
      }
      .report-section h3 {
        border-bottom: 2px solid #E2E8F0;
        padding-bottom: 6px;
        color: #0F172A;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .report-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .report-grid-item {
        font-size: 14px;
        line-height: 1.4;
      }
      .report-grid-item strong {
        color: #475569;
        display: inline-block;
        width: 130px;
      }
      .report-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      .report-list li {
        padding: 10px 0;
        border-bottom: 1px dashed #E2E8F0;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }
      .report-list li strong {
        color: #475569;
      }
      .report-desc {
        font-size: 14px;
        line-height: 1.5;
        color: #334155;
      }
      .report-signature-space {
        margin-top: 50px;
        border-top: 1px solid #CBD5E1;
        width: 220px;
        text-align: center;
        padding-top: 8px;
        font-size: 12px;
        font-weight: 700;
        color: #64748B;
      }
      .report-footer {
        margin-top: 60px;
        border-top: 2px solid #E2E8F0;
        padding-top: 16px;
        text-align: center;
        color: #94A3B8;
        font-size: 11px;
        font-weight: 500;
      }
    }

    /* RESPONSIVE PANEL VETERINARIO (B2B) */
    .vet-container {
      max-width: 600px;
      margin: 0 auto;
      width: 100%;
      padding: 24px 16px;
      box-sizing: border-box;
    }
    .vet-patients-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .vet-grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    @media (min-width: 1024px) {
      .vet-container {
        max-width: 1100px;
        padding: 40px 32px;
      }
      .vet-patients-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .vet-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
      }
    }