/* ══════════════════════════════════════════════════════════════════════════════
    Soft Neumorphism Theme - High Contrast & Enhanced Readability
    Version: 1.1
    Author: Web Design Expert (AI Assisted)
    Date: 2025-10-12
    
    Features:
    - Soft Neumorphic design with enhanced contrast
    - Monochromatic palette with a vibrant lime accent
    - Tactile microinteractions and spring transitions
    - Larger base font size for improved readability
    - Responsive 5-column tool grid
═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
    DESIGN TOKENS & CSS CUSTOM PROPERTIES
═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Main Color & Accent Palette (Light Monochromatic + Lime Accent) ── */
  --color-base: #e0e5ec; /* Color base del fondo y los elementos */
  --color-accent: #32ff84; /* Verde Lima Eléctrico */
  --color-accent-dark: #28cc6a;
  
  /* Paleta de Texto para Contraste (Versión Mejorada) */
  --text-primary: #486581;   /* Un azul-gris más oscuro y legible */
  --text-secondary: #8b9aaf; /* Un gris más oscuro para texto secundario */
  --text-accent: var(--color-accent);
  --text-on-accent: #051e0e; /* Texto oscuro para botones de acento */

  /* Sombras para el efecto Neumórfico (Versión Mejorada) */
  --shadow-light: #ffffff;
  --shadow-dark: #97a7c0;   /* Sombra más oscura para mayor profundidad */

  /* Colores Semánticos */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;

  /* ── Background System ── */
  --bg-primary: var(--color-base);
  
  /* Texturas sutiles */
  --bg-texture: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%2397a7c0" fill-opacity="0.05" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H5z"/%3E%3C/g%3E%3C/svg%3E');

  /* ── Neumorphism Shadows ── */
  --shadow-neumorphic: 
    -7px -7px 15px var(--shadow-light), 
    7px 7px 15px var(--shadow-dark);
  --shadow-neumorphic-inset: 
    inset -5px -5px 10px var(--shadow-light), 
    inset 5px 5px 10px var(--shadow-dark);
  --shadow-neumorphic-pressed:
    inset -2px -2px 5px var(--shadow-light), 
    inset 2px 2px 5px var(--shadow-dark);
    
  /* ── Transitions (con efecto elástico) ── */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-spring: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* El resto de tokens (Spacing, Typography, etc.) se mantienen, son una buena base */
  --font-family-primary: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px;
  --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; --font-size-7xl: 4.5rem;
  --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900;
  --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2;
}
/* ═══════════════════════════════════════════════════════════════════════════
    ESTILOS PARA LA PÁGINA DE LOGIN (VERSIÓN REDISEÑADA)
═══════════════════════════════════════════════════════════════════════════ */

.login-container {
  max-width: 420px; /* Un poco más estrecho para un look más vertical */
  margin: 10vh auto; /* Centrado horizontal y más margen superior */
  padding: var(--space-8);
  background: var(--color-base);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-neumorphic);
  text-align: center;
}

.login-container h2 {
  margin-bottom: var(--space-8);
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.neumorphic-form .form-group {
  margin-bottom: var(--space-6);
  text-align: left;
  position: relative; /* Necesario para los iconos */
}

/* Rediseño de las etiquetas */
.neumorphic-form .form-label {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding-left: 28px; /* Espacio para el icono */
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left center;
}

/* Iconos para cada etiqueta */
.form-label[for="username"] {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b9aaf"%3E%3Cpath d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/%3E%3C/svg%3E');
}
.form-label[for="password"] {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b9aaf"%3E%3Cpath d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/%3E%3C/svg%3E');
}

/* Rediseño de los campos de texto */
.neumorphic-form .form-control {
  background: var(--color-base);
  padding: var(--space-4);
  /* El resto de estilos (.form-control) ya están definidos y son correctos */
}

/* Clase de utilidad para botones de ancho completo */
.btn-block {
  width: 100%;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-size: 1.1rem;
  margin-top: var(--space-4); /* Espacio extra antes del botón */
}
/* ═══════════════════════════════════════════════════════════════════════════
    RESET & BASE STYLES
═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px; /* Aumentamos el tamaño base (puedes probar con 18px si lo quieres aún más grande) */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-primary);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-image: var(--bg-texture);
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
    TYPOGRAPHY SYSTEM
═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
p { margin-bottom: var(--space-4); color: var(--text-secondary); line-height: 1.7; }
a {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--text-accent); }
a.active-link { color: var(--text-accent); }
code, pre { font-family: var(--font-family-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
    COMPONENTES NEUMÓRFICOS
═══════════════════════════════════════════════════════════════════════════ */

/* ── Contenedores y Tarjetas ── */
.container, .layout-section, .card, .form-control, .table-container {
  background: var(--color-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neumorphic);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

header {
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
footer {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--text-secondary);
  font-size: 0.9em;
}

/* ── Botones ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  background: var(--color-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-neumorphic);
  transition: box-shadow var(--transition-spring), color var(--transition-fast);
}
.btn:hover {
  color: var(--text-accent);
}
.btn:active {
  box-shadow: var(--shadow-neumorphic-pressed);
  transform: translateY(1px);
}

/* Botón Primario (con color de acento) */
.btn-primary {
  background: var(--color-accent);
  color: var(--text-on-accent);
  box-shadow: 
    -5px -5px 10px var(--shadow-light), 
    5px 5px 10px var(--shadow-dark),
    inset -2px -2px 4px rgba(0,0,0,0.1),
    inset 2px 2px 4px rgba(255,255,255,0.5);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  color: var(--text-on-accent);
}
.btn-primary:active {
  box-shadow: var(--shadow-neumorphic-inset);
}


/* ── Formularios ── */
.form-group {
  margin-bottom: var(--space-6);
}
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: var(--text-secondary);
}
.form-control {
  width: 100%;
  border: none;
  padding: var(--space-4);
  font-size: 1rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-neumorphic-inset); /* Los inputs están "hundidos" */
  transition: box-shadow var(--transition-fast);
}
.form-control:focus {
  outline: none;
  box-shadow: 
    var(--shadow-neumorphic-inset),
    0 0 0 2px var(--color-accent); /* Anillo de foco con color de acento */
}
.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

/* ── Navegación ── */
nav ul {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}
nav a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-spring);
}
nav a:hover, nav a.active {
  color: var(--text-accent);
  background: var(--color-base);
  box-shadow: var(--shadow-neumorphic);
}
nav a:active {
  box-shadow: var(--shadow-neumorphic-pressed);
}

/* ── Tablas ── */
.table-container {
  padding: var(--space-4);
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  padding: var(--space-4);
  text-align: left;
}
.table th {
  color: var(--text-secondary);
  font-weight: 600;
}
.table tbody tr {
  border-top: 1px solid rgba(151, 167, 192, 0.3); /* Usando el nuevo color de sombra oscuro para el borde */
}
.table tbody tr:hover {
  background: var(--color-base);
  box-shadow: var(--shadow-neumorphic-inset);
}

/* ── Alertas y Mensajes ── */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  border: 2px solid transparent;
  box-shadow: var(--shadow-neumorphic);
  font-weight: 500;
}
.alert-success { border-color: var(--color-success); color: var(--color-success); }
.alert-warning { border-color: var(--color-warning); color: var(--color-warning); }
.alert-error { border-color: var(--color-error); color: var(--color-error); }
.alert-info { border-color: var(--color-info); color: var(--color-info); }

/* ═══════════════════════════════════════════════════════════════════════════
    CUADRÍCULA DE HERRAMIENTAS (TOOLS GRID)
═══════════════════════════════════════════════════════════════════════════ */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columnas en pantallas grandes */
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.tool-card {
  background: var(--color-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neumorphic);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-spring);
}

.tool-card:hover {
  color: var(--text-accent);
  box-shadow: 
    -9px -9px 18px var(--shadow-light), 
    9px 9px 18px var(--shadow-dark);
  transform: translateY(-2px);
}

.tool-card:active {
  box-shadow: var(--shadow-neumorphic-pressed);
  transform: translateY(1px);
  color: var(--text-accent);
}

/* --- Adaptación para pantallas más pequeñas (Responsive) --- */
@media (max-width: 1200px) {
  .tools-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en tablets y portátiles pequeños */
  }
}

@media (max-width: 992px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablets */
  }
}

@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
  }
}

@media (max-width: 480px) {
  .tools-grid {
    grid-template-columns: repeat(1, 1fr); /* 1 columna en móviles muy pequeños */
  }
}
.tool-card.disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}
.tool-card.disabled:hover {
  color: var(--text-secondary);
  box-shadow: var(--shadow-neumorphic); /* Evita que el hover cambie la sombra */
  transform: none;
}
.tool-card .lock-icon {
  opacity: 0.6;
  font-size: 0.8em;
  margin-left: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════════
    COMPONENTES ESPECIALIZADOS
═══════════════════════════════════════════════════════════════════════════ */

/* ── Cronómetro ── */
.chronometer-container {
  text-align: center;
  box-shadow: var(--shadow-neumorphic-inset); /* Contenedor hundido */
}
.chronometer-display {
  font-family: var(--font-family-mono);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-8);
  text-shadow: 
    -1px -1px 2px var(--shadow-light),
    1px 1px 2px var(--shadow-dark);
}
.chronometer-controls {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}
.start-btn, .pause-btn, .reset-btn {
  font-weight: 600;
}
.start-btn { color: var(--color-success); }
.pause-btn { color: var(--color-warning); }
.reset-btn { color: var(--color-error); }
.start-btn:hover { color: var(--color-accent); } /* Acento principal al interactuar */

/* ── Conversores y otros widgets ── */
.conversion-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neumorphic-inset);
}
.number-display, .file-upload-container, .translation-container {
  box-shadow: var(--shadow-neumorphic);
}
.file-drop-zone {
  border: 2px dashed var(--text-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.file-drop-zone:hover, .file-drop-zone.dragover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-neumorphic-inset);
}

/* ── Botón de Voz ── */
.speech-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--text-secondary);
  box-shadow: var(--shadow-neumorphic);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-spring);
}
.speech-btn:hover {
  color: var(--text-accent);
}
.speech-btn.listening {
  color: var(--color-accent);
  box-shadow: var(--shadow-neumorphic-pressed), 0 0 10px var(--color-accent);
  animation: pulse-accent 1.5s infinite;
}
@keyframes pulse-accent {
  0% { box-shadow: var(--shadow-neumorphic-pressed), 0 0 0 0 hsla(140, 100%, 60%, 0.7); }
  70% { box-shadow: var(--shadow-neumorphic-pressed), 0 0 0 15px hsla(140, 100%, 60%, 0); }
  100% { box-shadow: var(--shadow-neumorphic-pressed), 0 0 0 0 hsla(140, 100%, 60%, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
    RESPONSIVE DESIGN (Ajustes para Neumorfismo)
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --shadow-neumorphic: -5px -5px 12px var(--shadow-light), 5px 5px 12px var(--shadow-dark);
    --shadow-neumorphic-inset: inset -3px -3px 7px var(--shadow-light), inset 3px 3px 7px var(--shadow-dark);
  }
  .container, .layout-section, .card {
    padding: var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
    UTILITY CLASSES
═══════════════════════════════════════════════════════════════════════════ */
/* Las clases de utilidad existentes (hidden, flex, grid, etc.) seguirán funcionando */
/* ... (Se mantienen las mismas clases de utilidad) ... */