/**
 * Tool Area Calculator Styles - SIMPLIFIED VERSION
 * Estilos directos y naturales para calculadora de área
 * Siguiendo el patrón establecido de tool-buffer.css
 */

/* ===== VARIABLES PROFESIONALES COMPLETAS ===== */
:root {
  /* Colores directos - sin dependencias */
  --color-primary: #0056b3;
  --color-primary-500: #0056b3;
  --color-primary-400: #0d6efd;
  --color-primary-600: #004085;
  --color-primary-700: #003366;
  --color-surface: #ffffff;
  --color-text: #212529;
  --color-muted: #6c757d;
  --color-success: #198754;
  --color-success-500: #198754;
  --color-success-400: #20c997;
  --color-success-700: #146c43;
  --color-warning: #ffc107;
  --color-warning-500: #ffc107;
  --color-warning-700: #d39e00;
  --color-error-500: #dc3545;
  --color-error-700: #b02a37;
  --color-info: #0dcaf0;
  --color-info-500: #0dcaf0;
  --color-info-700: #087990;

  /* Colores de superficie y texto */
  --color-on-surface: #212529;
  --color-on-surface-variant: #6c757d;
  --color-on-primary: #ffffff;
  --color-on-success: #ffffff;
  --color-outline-variant: #dee2e6;

  /* Espaciado */
  --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;

  /* Tipografía */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --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-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-family-mono: 'Consolas', 'Monaco', monospace;
  --letter-spacing-wide: 0.05em;

  /* Radio de bordes */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Animaciones */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Z-index */
  --z-debug: 9999;

  /* Variables específicas de area calculator */
  --color-white: #ffffff;
  --area-primary: #0056b3;
  --area-primary-hover: #004085;
  --area-surface: #e3f2fd;
  --area-border: #bbdefb;
  --area-on-primary: #ffffff;
  --area-step-size: 60px;
  --area-map-height: 400px;
  --area-animation-duration: 0.5s;
}

/* ===== TOOL AREA CALCULATOR HERO ===== */
.tool-area-calculator-hero {
  background: linear-gradient(
    135deg,
    var(--area-primary),
    var(--area-primary-hover)
  );
  color: var(--area-on-primary);
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

.tool-area-calculator-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: float var(--area-animation-duration) ease-in-out infinite alternate;
}

@keyframes float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

/* Hero Content */
.tool-area-calculator-hero h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tool-area-calculator-hero p {
  font-size: var(--font-size-xl);
  opacity: 0.95;
  margin-bottom: var(--space-8);
}

/* ===== HERO SECTION OVERRIDE ===== */
.bg-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--area-primary),
    var(--area-primary-hover)
  );
}

/* ===== MAIN CONTAINER ===== */
.area-calculator-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* ===== AREA CALCULATOR PANEL ===== */
.area-calculator-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}

.area-calculator-panel .card-header {
  background: var(--area-surface);
  border-bottom: 1px solid var(--area-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
}

.area-calculator-panel .card-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--area-primary);
}

/* Form Styles */
.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  display: block;
  color: var(--color-text);
}

.form-control,
.form-select {
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  transition: border-color var(--duration-fast) var(--easing-standard);
  background: var(--color-surface);
  color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--area-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
  outline: none;
}

/* Map Container */
.map-container {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.map-container .card-header {
  background: var(--color-success-500);
  color: var(--color-on-success);
  padding: var(--space-4);
  border: none;
}

#map {
  height: var(--area-map-height);
  width: 100%;
}

/* Results Section */
.results-section {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.area-result {
  background: var(--color-success-500);
  color: var(--color-on-success);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  text-align: center;
}

.area-result .result-label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  margin-bottom: var(--space-1);
}

.area-result .result-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
}

/* Export Controls */
.export-controls {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-6);
}

.btn-tool-primary {
  background: var(--area-primary);
  color: var(--area-on-primary);
  border: 1px solid var(--area-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--duration-fast) var(--easing-standard);
  cursor: pointer;
}

.btn-tool-primary:hover {
  background: var(--area-primary-hover);
  border-color: var(--area-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--area-on-primary);
  text-decoration: none;
}

.btn-tool-secondary {
  background: var(--color-warning-500);
  color: var(--color-on-success);
  border: 1px solid var(--color-warning-500);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--duration-fast) var(--easing-standard);
  cursor: pointer;
}

.btn-tool-secondary:hover {
  background: var(--color-warning-700);
  border-color: var(--color-warning-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--color-on-success);
  text-decoration: none;
}

/* Loading and Error States */
.area-calculator-loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-muted);
}

.area-calculator-error {
  background: var(--color-error-500);
  color: var(--color-on-primary);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  margin: var(--space-4) 0;
}

/* Info Cards */
.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.info-card .card-header {
  background: var(--color-info-500);
  color: var(--color-on-primary);
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .area-calculator-container {
    padding: var(--space-4) var(--space-2);
  }

  .tool-area-calculator-hero h1 {
    font-size: var(--font-size-3xl);
  }

  .tool-area-calculator-hero p {
    font-size: var(--font-size-lg);
  }

  #map {
    height: 300px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-tool-primary,
  .btn-tool-secondary {
    justify-content: center;
  }
}

/* ===== DARK MODE ===== */
[data-bs-theme="dark"] {
  --area-primary: #4dabf7;
  --area-primary-hover: #339af0;
  --area-surface: #1a1d20;
  --area-border: #343a40;
}

/* ===== PRINT STYLES ===== */
@media print {
  .tool-area-calculator-hero {
    background: white;
    color: black;
    padding: var(--space-4) 0;
  }

  .tool-area-calculator-hero::before {
    display: none;
  }

  .area-calculator-panel,
  .map-container,
  .results-section,
  .export-controls,
  .info-card {
    border: 1px solid black;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .area-calculator-panel:hover,
  .map-container:hover {
    transform: none;
  }

  .area-result {
    background: white;
    color: black;
    border: 1px solid black;
    print-color-adjust: exact;
  }

  .btn-tool-primary,
  .btn-tool-secondary {
    background: white;
    color: black;
    border: 1px solid black;
  }

  #map {
    height: 250px;
  }
}