/* ============================================================
   Skycrop — Calculadora de Fertilizacion
   ============================================================ */

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

:root {
  --bg: #F2F0EB;
  --surface: #ffffff;
  --surface2: #f4f6f9;
  --border: #dce1ea;
  --accent: #22c55e;
  --accent2: #16a34a;
  --accent-glow: rgba(34, 197, 94, 0.12);
  --blue: #1d6fbf;
  --amber: #b45309;
  --red: #c0152b;
  --text: #0f172a;
  --muted: #4b5563;
  --radius: 16px;
  --shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Dashboard Layout ── */
.dashboard-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ── Sidebar ── */
.sidebar {
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 200;
}

.sidebar-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.brand-icon {
  width: 32px;
  height: 32px;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text h1 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
}

.brand-text span {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .5px;
}

.sidebar-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  display: none; /* Shows on mobile */
}

.sidebar-nav {
  flex: 1;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-item:hover {
  background: var(--surface2);
  color: var(--text);
}

.nav-item.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.btn-auth-open {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-auth-open:hover {
  background: #e2e8f0;
}

/* ── Dashboard Content ── */
.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(34, 197, 94, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}

.top-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-nav-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.module-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}

.btn-add-crop {
  background: var(--text);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: .5rem 1.1rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: .8rem;
  transition: all .2s;
}
.btn-add-crop:hover {
  background: #000;
  transform: translateY(-1px);
}

.app-module {
  flex: 1;
  padding: 1.5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius);
  margin-top: 1rem;
}

.empty-state h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
  color: var(--text);
}

.empty-state p {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  max-width: 400px;
}

/* ── Main Layout (Legacy compatibility) ── */
.main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1rem;
}

/* ── Navigation Tabs ── */
.main-tabs-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: -1rem;
}

.main-tabs {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .35rem;
  display: inline-flex;
  gap: .3rem;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}

.tab-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .6rem 1.4rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all .2s;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
  transition: border-color .3s;
}

.card:hover {
  border-color: #b0bcc8;
}

.hidden {
  display: none !important;
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.card-header>div:last-child {
  margin-left: 0;
}

.card-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.card-header p {
  font-size: .83rem;
  color: var(--muted);
  margin-top: .2rem;
}

/* ── Unit Toggle (ppm / mg·kg⁻¹) ── */
.unit-toggle-group {
  display: inline-flex;
  gap: .25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .25rem;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.unit-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  padding: .35rem .85rem;
  border-radius: 50px;
  transition: all .18s;
  white-space: nowrap;
  letter-spacing: .2px;
}

.unit-toggle-btn:hover {
  color: var(--text);
}

.unit-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.4);
}

.unit-toggle-btn.active:hover {
  background: var(--accent2);
}

.step-badge {
  background: linear-gradient(135deg, #22c55e22, #16a34a22);
  border: 1px solid #22c55e55;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Crop Grid ── */
.crop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.crop-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  cursor: pointer;
  text-align: center;
  transition: all .22s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.crop-card:hover {
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.06);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
}

.crop-card.selected {
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 8px 24px rgba(34, 197, 94, 0.15);
}

.crop-card .crop-emoji {
  font-size: 2.2rem;
  line-height: 1;
}

.crop-card .crop-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}

.crop-card.custom-tag::after {
  content: 'personalizado';
  font-size: .6rem;
  color: var(--accent);
  background: rgba(34, 197, 94, 0.12);
  border-radius: 20px;
  padding: .1rem .5rem;
}

.crop-card.modified-tag {
  border-color: #a78bfa55;
}

.crop-card.modified-tag:hover {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.06);
}

/* Edit button inside crop card */
.crop-card-inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.btn-edit-crop {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(167, 139, 250, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #a78bfa;
  border-radius: 8px;
  padding: .18rem .38rem;
  font-size: .75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s, background .18s, transform .18s;
  line-height: 1;
}

.crop-card:hover .btn-edit-crop {
  opacity: 1;
}

.btn-edit-crop:hover {
  background: rgba(167, 139, 250, 0.35);
  transform: scale(1.1);
}

/* MOD badge */
.mod-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  font-size: .5rem;
  font-weight: 800;
  border-radius: 5px;
  padding: .1rem .35rem;
  letter-spacing: .5px;
}

/* Edit modal extras */
.modal-edit {
  max-width: 640px;
}

.modal-edit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.btn-reset-defaults {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 8px;
  padding: .45rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-reset-defaults:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

.soil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1rem;
}

/* ── Nutrient Section Labels ── */
.nutrient-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem 0 .4rem;
  border-top: 1px solid var(--border);
  margin-bottom: .25rem;
  margin-top: .5rem;
}

.nutrient-section-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.nutrient-section-label.micro {
  color: #a78bfa;
}

.nutrient-section-label.micro::before {
  background: #a78bfa;
}

/* ── Per-section unit toggle ── */
.section-unit-toggle {
  display: inline-flex;
  gap: .2rem;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .18rem;
  margin-left: .3rem;
}

.s-unit-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  padding: .2rem .65rem;
  border-radius: 50px;
  transition: all .15s;
  white-space: nowrap;
  letter-spacing: .2px;
  text-transform: none;
}

.s-unit-btn:hover {
  color: var(--text);
}

.s-unit-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 6px rgba(34, 197, 94, 0.4);
}

.nutrient-section-label.micro .s-unit-btn.active {
  background: #a78bfa;
  box-shadow: 0 1px 6px rgba(167, 139, 250, 0.4);
}

/* Conversion note */
.unit-conv-note {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--muted);
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .15rem .5rem;
  margin-left: auto;
  text-transform: none;
  white-space: nowrap;
}



.input-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.input-group.full-width {
  grid-column: 1 / -1;
  max-width: 300px;
}

.input-group label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-group label span {
  font-size: .7rem;
  color: var(--accent);
  font-weight: 500;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
  padding: .1rem .4rem;
}

.input-group input {
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: inherit;
  padding: .65rem .9rem;
  border-radius: 10px;
  font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.input-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.input-group input::placeholder {
  color: #9ca3af;
}

/* ── Buttons ── */
.btn-calc {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(34, 197, 94, 0.35);
}

.btn-calc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(34, 197, 94, 0.5);
}

.btn-calc:active {
  transform: translateY(0);
}

.btn-print {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  padding: .5rem 1rem;
  border-radius: 8px;
  font-size: .82rem;
  transition: background .2s;
}

.btn-print:hover {
  background: #1e3056;
}

/* ── Result Summary ── */
.result-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.summary-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.summary-card .s-label {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}

.summary-card .s-value {
  font-size: 1.6rem;
  font-weight: 800;
}

.summary-card .s-unit {
  font-size: .75rem;
  color: var(--muted);
}

.color-green {
  color: var(--accent);
}

.color-blue {
  color: var(--blue);
}

.color-amber {
  color: var(--amber);
}

.color-red {
  color: var(--red);
}

/* ── Result Table ── */
.table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.result-table thead tr {
  background: #f0f3f7;
}

.result-table th {
  padding: .85rem .9rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
}

.result-table th small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.result-table td {
  padding: .8rem .9rem;
  border-bottom: 1px solid #e8ecf0;
  vertical-align: middle;
}

.result-table tbody tr:last-child td {
  border-bottom: none;
}

.result-table tbody tr:hover {
  background: rgba(34, 197, 94, 0.04);
}

.nutrient-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #eef1f6;
  border-radius: 8px;
  padding: .25rem .7rem;
  font-weight: 700;
  font-size: .8rem;
}

.status-ok {
  color: var(--accent);
}

.status-warn {
  color: var(--amber);
}

.status-low {
  color: var(--red);
}

/* ── Table Section Row Separator ── */
.section-row td {
  background: #eaf6ef;
  padding: .45rem .9rem;
  border-top: 1px solid #c7e8d4;
  border-bottom: 1px solid #c7e8d4;
}

.section-row span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #2d6a4f;
}

/* ── Efficiency Panel ── */
.efficiency-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1.1rem;
  cursor: pointer;
  margin-bottom: .75rem;
  margin-top: .25rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  transition: background .2s, border-color .2s;
}

.efficiency-toggle:hover {
  background: #e8ecf2;
  border-color: #b0bcc8;
}

.eff-arrow {
  color: var(--accent);
  font-size: .75rem;
  transition: transform .2s;
}

.efficiency-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  animation: fadeUp .2s ease;
}

.eff-note {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

.eff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: .85rem;
}

.eff-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.eff-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
}

.eff-pill {
  font-weight: 800;
  font-size: .75rem;
  border: 1.5px solid #fff;
  border-radius: 6px;
  padding: .1rem .5rem;
  min-width: 36px;
  text-align: center;
}

.eff-source {
  color: var(--muted);
  font-size: .75rem;
}

.eff-control {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.eff-control input[type='range'] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
  background: transparent;
}

.eff-control input[type='number'] {
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: inherit;
  padding: .3rem .5rem;
  border-radius: 8px;
  font-size: .85rem;
  width: 58px;
  outline: none;
  text-align: center;
  transition: border-color .2s;
}

.eff-control input[type='number']:focus {
  border-color: var(--accent);
}

.eff-control span {
  font-size: .8rem;
  color: var(--muted);
}


/* ── Observations ── */
.observations {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.observations h4 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .75rem;
}

.obs-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .82rem;
  color: var(--muted);
  padding: .4rem 0;
  border-bottom: 1px solid #dce1ea;
}

.obs-item:last-child {
  border-bottom: none;
}

.obs-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #ffffff;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  max-width: 580px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  animation: fadeUp .25s ease;
}

.modal h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .3rem;
}

.modal>p {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.modal-grid .input-group:first-child {
  grid-column: span 1;
}

.modal-actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: .65rem 1.25rem;
  border-radius: 10px;
  font-size: .85rem;
  transition: background .2s;
}

.btn-cancel:hover {
  background: #eef1f6;
}

.btn-save {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: .65rem 1.5rem;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-save:hover {
  transform: translateY(-1px);
}

/* ── Calendar ── */
.cal-config {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.cal-config-inner {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.cal-config-inner .input-group {
  flex: 1;
  min-width: 200px;
}

.btn-calendar {
  flex-shrink: 0;
  padding: .75rem 1.5rem !important;
  width: auto !important;
  white-space: nowrap;
  font-size: .9rem !important;
}

/* Calendar Summary */
.cal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.cal-summary-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cal-s-label {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}

.cal-s-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* Timeline Bar */
.cal-timeline-bar {
  display: flex;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cal-tbar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  transition: flex .3s ease;
  position: relative;
}

.cal-tbar-segment:first-child {
  border-radius: 10px 0 0 10px;
}

.cal-tbar-segment:last-child {
  border-radius: 0 10px 10px 0;
}

.cal-tbar-label {
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Timeline Legend */
.cal-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.5rem;
  padding: .5rem 0;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}

.cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Stage Cards */
.cal-stages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cal-stage-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.25rem;
  transition: transform .2s, box-shadow .2s;
  animation: fadeUp .3s ease;
}

.cal-stage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.cal-stage-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .85rem;
}

.cal-stage-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}

.cal-stage-info h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .15rem;
}

.cal-stage-dates {
  font-size: .75rem;
  color: var(--muted);
}

.cal-no-app {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  padding: .5rem 0;
}

/* Nutrient Grid inside stage */
.cal-nut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}

.cal-nut-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.cal-nut-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-nut-pill {
  font-weight: 800;
  font-size: .72rem;
  border: 1.5px solid;
  border-radius: 6px;
  padding: .1rem .5rem;
  min-width: 34px;
  text-align: center;
}

.cal-nut-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}

.cal-nut-bar-bg {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.cal-nut-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .6s ease;
}

.cal-nut-details {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.cal-nut-details strong {
  color: var(--text);
}

.cal-nut-total {
  color: var(--blue);
  font-weight: 600;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Print ── */
@media print {

  .header,
  .btn-calc,
  .btn-add-crop,
  .btn-print,
  #sectionCrop,
  #sectionSoil {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .result-table th,
  .result-table td {
    color: #111;
  }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 1.25rem;
  }

  .header-inner {
    flex-direction: column;
    gap: .75rem;
    align-items: flex-start;
  }
}

/* ── Fertilizer Manager ── */
.fert-manager-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .fert-manager-layout {
    grid-template-columns: 1fr;
  }
}

.fert-list {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.fert-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.fert-list-container {
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
}

.fert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
}

.fert-item-details {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.fert-item-name {
  font-weight: 600;
  color: var(--text);
}

.fert-item-comp {
  font-size: .75rem;
  color: var(--muted);
}

.btn-delete-fert {
  background: transparent;
  color: #ef4444;
  border: none;
  cursor: pointer;
  padding: .2rem;
  transition: opacity .2s;
}

.btn-delete-fert:hover {
  opacity: .7;
}

/* Table Select Dropdown */
.source-select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: .75rem;
  outline: none;
  width: 130px;
  text-overflow: ellipsis;
}

.source-select:focus {
  border-color: var(--accent);
}

.fert-item-eff {
  font-size: .65rem;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  padding: .15rem .45rem;
  border-radius: 6px;
  margin-left: .5rem;
  font-weight: 700;
  vertical-align: middle;
}

/* -- Weather Section -- */
.weather-setup-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
}

.weather-setup-grid > .input-group {
  flex: 1;
  min-width: 250px;
}

.btn-text-small {
  background: transparent;
  border: none;
  font-size: .8rem;
  color: var(--accent);
  cursor: pointer;
}

.weather-current-card {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  border: none;
  margin-top: 1rem;
}

.weather-current-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.wc-location {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
}

.wc-date {
  font-size: .85rem;
  opacity: 0.8;
}

.weather-current-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.wc-main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wc-icon {
  font-size: 4rem;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.wc-temp span {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}

.wc-desc {
  font-size: 1.1rem;
  text-transform: capitalize;
  font-weight: 500;
  margin-top: .2rem;
  opacity: 0.9;
}

.wc-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
  border-radius: 12px;
  flex-grow: 1;
  max-width: 400px;
}

.wc-detail-item {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
}

.wc-detail-item span {
  opacity: 0.8;
}

.wc-detail-item strong {
  font-weight: 600;
}

.forecast-grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.forecast-card {
  min-width: 140px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform .2s;
}

.forecast-card:hover {
  transform: translateY(-5px);
  border-color: #93c5fd;
}

.fc-date {
  font-weight: 700;
  color: var(--text);
  font-size: .9rem;
}

.fc-icon {
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

.fc-temps {
  display: flex;
  justify-content: center;
  gap: .5rem;
  font-size: .9rem;
}

.fc-temp-max {
  font-weight: 700;
  color: #ef4444;
}

/* -- Weather Section -- */

.weather-setup-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
}

.weather-setup-grid > .input-group {
  flex: 1;
  min-width: 250px;
}

.btn-text-small {
  background: transparent;
  border: none;
  font-size: .8rem;
  color: var(--accent);
  cursor: pointer;
}

.weather-current-card {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  border: none;
  margin-top: 1rem;
}

.weather-current-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.wc-location {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
}

.wc-date {
  font-size: .85rem;
  opacity: 0.8;
}

.weather-current-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.wc-main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wc-icon {
  font-size: 4rem;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.wc-temp span {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}

.wc-desc {
  font-size: 1.1rem;
  text-transform: capitalize;
  font-weight: 500;
  margin-top: .2rem;
  opacity: 0.9;
}

.wc-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
  border-radius: 12px;
  flex-grow: 1;
  max-width: 400px;
}

.wc-detail-item {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
}

.wc-detail-item span {
  opacity: 0.8;
}

.wc-detail-item strong {
  font-weight: 600;
}

.forecast-grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.forecast-card {
  min-width: 140px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform .2s;
}

.forecast-card:hover {
  transform: translateY(-5px);
  border-color: #93c5fd;
}

.fc-date {
  font-weight: 700;
  color: var(--text);
  font-size: .9rem;
}

.fc-icon {
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

.fc-temps {
  display: flex;
  justify-content: center;
  gap: .5rem;
  font-size: .9rem;
}

.fc-temp-max {
  font-weight: 700;
  color: #ef4444;
}

.fc-temp-min {
  font-weight: 600;
  color: #3b82f6;
}

.fc-desc {
  font-size: .75rem;
  color: var(--muted);
  text-transform: capitalize;
}

/* ── Auth Modal ── */
#authModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

#authModalOverlay.hidden {
  display: none !important;
}

.modal-auth {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  animation: fadeUp .25s ease;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.auth-logo h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

.auth-tabs {
  display: flex;
  gap: .35rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .3rem;
  margin-bottom: 1.75rem;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  color: var(--muted);
  padding: .55rem 1rem;
  border-radius: 50px;
  transition: all .2s;
}

.auth-tab:hover {
  color: var(--text);
}

.auth-tab.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-error {
  font-size: .8rem;
  color: var(--red);
  background: rgba(192, 21, 43, 0.08);
  border: 1px solid rgba(192, 21, 43, 0.2);
  border-radius: 8px;
  padding: .5rem .85rem;
  margin-bottom: .75rem;
  display: none;
}

.auth-error:not(:empty) {
  display: block;
}

.auth-switch {
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  margin-top: 1rem;
}

.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* ── Header Auth Elements ── */
.btn-auth-open {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: .45rem 1rem;
  border-radius: 50px;
  font-family: inherit;
  font-size: .83rem;
  font-weight: 600;
  transition: all .2s;
}

.btn-auth-open:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .38rem .85rem .38rem .6rem;
}

.user-avatar {
  font-size: 1.1rem;
  line-height: 1;
}

.user-name {
  font-size: .83rem;
  font-weight: 600;
  color: var(--text);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-logout {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  cursor: pointer;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 50px;
  transition: background .2s, border-color .2s;
}

.btn-logout:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

/* ════════════════════════════════════════════════════════════
   MAQUINARIA MODULE
════════════════════════════════════════════════════════════ */

/* -- Color tokens -- */
:root {
  --maq-green: #16a34a;
  --maq-green-soft: rgba(22, 163, 74, 0.12);
  --maq-amber: #b45309;
  --maq-amber-soft: rgba(180, 83, 9, 0.12);
  --maq-blue: #1d6fbf;
  --maq-blue-soft: rgba(29, 111, 191, 0.12);
  --maq-red: #dc2626;
  --maq-red-soft: rgba(220, 38, 38, 0.1);
  --maq-purple: #7c3aed;
  --maq-purple-soft: rgba(124, 58, 237, 0.1);
}

.color-maq-green { color: var(--maq-green); }
.color-maq-amber { color: var(--maq-amber); }
.color-maq-blue  { color: var(--maq-blue); }

/* -- Section header -- */
.maq-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.maq-section-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.4px;
}
.maq-section-sub {
  font-size: .82rem;
  color: var(--muted);
  margin-top: .2rem;
}

/* -- Buttons -- */
.maq-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--text);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: .6rem 1.2rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.maq-btn-primary:hover {
  background: #111;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}
.maq-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: .6rem 1.2rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s;
}
.maq-btn-secondary:hover {
  background: #e2e8f0;
}

.maq-btn-labor {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  width: 100%;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(22,163,74,0.35);
  transition: all .2s;
}
.maq-btn-labor:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(22,163,74,0.45);
}

/* -- Summary cards -- */
.maq-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.maq-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: box-shadow .2s, transform .2s;
}
.maq-stat-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.maq-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}
.maq-icon-green { background: var(--maq-green-soft); color: var(--maq-green); border-color: rgba(22,163,74,.2); }
.maq-icon-amber { background: var(--maq-amber-soft); color: var(--maq-amber); border-color: rgba(180,83,9,.2); }
.maq-icon-blue  { background: var(--maq-blue-soft);  color: var(--maq-blue);  border-color: rgba(29,111,191,.2); }
.maq-stat-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.maq-stat-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.maq-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

/* -- Search and filter row -- */
.maq-search-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.maq-search-box {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .55rem .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.maq-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.maq-search-box svg { color: var(--muted); flex-shrink: 0; }
.maq-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  background: transparent;
}
.maq-search-box input::placeholder { color: #9ca3af; }
.maq-filter-select {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .55rem .85rem;
  font-family: inherit;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}
.maq-filter-select:focus { border-color: var(--accent); }

/* -- Machine cards grid -- */
.maq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.maq-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all .22s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
.maq-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--maq-green), #22c55e);
  opacity: 0;
  transition: opacity .2s;
}
.maq-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 28px rgba(34,197,94,.14);
  transform: translateY(-3px);
}
.maq-card:hover::before { opacity: 1; }

.maq-card-header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1rem;
}
.maq-card-machine-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.maq-card-titles { flex: 1; min-width: 0; }
.maq-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maq-card-sub {
  font-size: .76rem;
  color: var(--muted);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maq-card-status {
  flex-shrink: 0;
}

/* Status badges */
.maq-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  padding: .25rem .6rem;
  letter-spacing: .2px;
}
.maq-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.maq-badge-operativa  { background: var(--maq-green-soft); color: var(--maq-green); }
.maq-badge-mantenimiento { background: var(--maq-amber-soft); color: var(--maq-amber); }
.maq-badge-inactiva   { background: rgba(100,116,139,.1); color: #64748b; }

.maq-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.maq-card-metric {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.maq-card-metric-label {
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.maq-card-metric-value {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.maq-card-metric-value.color-maq-green { color: var(--maq-green); }

/* Chasis code style */
.maq-chasis-code {
  font-family: 'Courier New', monospace;
  font-size: .72rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .1rem .4rem;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maq-card-chasis {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: .5rem;
  margin-top: .25rem;
  border-top: 1px dashed var(--border);
}

/* -- Empty state -- */
.maq-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 16px;
}
.maq-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: #cbd5e1;
}
.maq-empty-state h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem;
}
.maq-empty-state p {
  font-size: .85rem;
  max-width: 360px;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* -- Modals -- */
.maq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: maqFadeIn .18s ease;
}
.maq-modal-overlay.hidden { display: none !important; }

@keyframes maqFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.maq-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  animation: maqSlideUp .22s cubic-bezier(0.2,0.8,0.2,1);
  overflow: hidden;
}

@keyframes maqSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.maq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.maq-modal-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.maq-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all .15s;
}
.maq-modal-close:hover {
  background: var(--maq-red-soft);
  border-color: rgba(220,38,38,.3);
  color: var(--maq-red);
}
.maq-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.maq-modal-footer {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* -- Form grid -- */
.maq-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.maq-form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.maq-full-col { grid-column: 1 / -1; }
.maq-form-group label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.maq-form-group input,
.maq-form-group select,
.maq-form-group textarea {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .6rem .85rem;
  font-family: inherit;
  font-size: .88rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  resize: none;
}
.maq-form-group input:focus,
.maq-form-group select:focus,
.maq-form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
  background: #fff;
}
.maq-form-group input::placeholder,
.maq-form-group textarea::placeholder { color: #9ca3af; }

/* -- Detail modal -- */
.maq-modal-detalle {
  max-width: 660px;
}
.maq-detalle-title-row {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.maq-detalle-machine-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.maq-estado-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: .25rem .65rem;
  margin-top: .25rem;
}
.maq-estado-badge.operativa    { background: var(--maq-green-soft); color: var(--maq-green); }
.maq-estado-badge.mantenimiento{ background: var(--maq-amber-soft); color: var(--maq-amber); }
.maq-estado-badge.inactiva     { background: rgba(100,116,139,.1); color: #64748b; }

/* Detalle tabs */
.maq-detalle-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  background: var(--surface2);
  flex-shrink: 0;
}
.maq-det-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  padding: .8rem 1rem;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: color .18s, border-color .18s;
  white-space: nowrap;
}
.maq-det-tab:hover { color: var(--text); }
.maq-det-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.maq-detalle-body { padding: 1.25rem 1.5rem; }
.maq-det-panel { display: none; }
.maq-det-panel.active { display: block; }

/* Info grid */
.maq-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.maq-info-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .9rem;
}
.maq-info-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.maq-info-value {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.maq-mono { font-family: 'Courier New', monospace; font-size: .82rem; }
.maq-conductor-highlight {
  color: var(--maq-green);
  font-weight: 700;
}

/* Hours summary */
.maq-hours-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .5rem;
}
.maq-hours-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
}
.maq-hours-today {
  background: var(--maq-green-soft);
  border-color: rgba(22,163,74,.2);
  color: var(--maq-green);
}
.maq-hours-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: .1rem;
  color: inherit;
  opacity: .75;
}
.maq-hours-val {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.maq-hours-val.color-maq-green { color: var(--maq-green); }

/* Session / fuel / maintenance list items */
.maq-empty-text {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
  font-size: .85rem;
}

.maq-session-item,
.maq-fuel-item,
.maq-maint-item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: .6rem;
  position: relative;
}
.maq-session-item:last-child,
.maq-fuel-item:last-child,
.maq-maint-item:last-child { margin-bottom: 0; }

.maq-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.maq-item-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}
.maq-item-date {
  font-size: .72rem;
  color: var(--muted);
  flex-shrink: 0;
}
.maq-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .2rem;
}
.maq-item-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 6px;
  background: var(--maq-blue-soft);
  color: var(--maq-blue);
}
.maq-item-chip.green-chip { background: var(--maq-green-soft); color: var(--maq-green); }
.maq-item-chip.amber-chip { background: var(--maq-amber-soft); color: var(--maq-amber); }
.maq-item-notes {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: .15rem;
}

/* -- Labor modal -- */
.maq-modal-labor {
  max-width: 520px;
}

/* ════════════════════════════════════════════════════════════
   MANEJO SANITARIO MODULE
   ════════════════════════════════════════════════════════════ */

.san-module { display:flex; flex-direction:column; gap:1.25rem; }

/* Filter bar */
.san-filter-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.san-filter-group { display:flex; flex-direction:column; gap:.35rem; min-width:160px; flex:1; }
.san-filter-group label { font-size:.73rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.san-filter-group select,
.san-filter-group input[type="date"] {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: .87rem;
  padding: .55rem .8rem;
  border-radius: 9px;
  outline: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.san-filter-group select:focus,
.san-filter-group input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

/* Tabs row */
.san-tabs-row { display:flex; }
.san-tabs {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .3rem;
  gap: .25rem;
}
.san-tab {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  padding: .55rem 1.3rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all .2s;
}
.san-tab:hover { color: var(--text); }
.san-tab.active { background:#fff; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.08); }

/* Panels */
.san-panel-content { display:flex; flex-direction:column; gap:1.25rem; }

/* Two-column layout */
.san-layout-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width:900px) { .san-layout-two { grid-template-columns:1fr; } }

/* Cards */
.san-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.san-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.san-card-header h3 {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

/* Buttons */
.san-btn-primary {
  background: var(--text);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.san-btn-primary:hover { background:#16a34a; transform:translateY(-1px); }

.san-btn-secondary {
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background .2s;
}
.san-btn-secondary:hover { background: #e2e8f0; }

.san-del-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: .95rem;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: background .2s;
  line-height: 1;
}
.san-del-btn:hover { background: rgba(239,68,68,.1); }

/* ── Calendar ── */
.san-cal-card { min-height: 400px; }
.san-cal-nav { display:flex; gap:.4rem; }
.san-nav-btn {
  width:30px; height:30px;
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.san-nav-btn:hover { background:var(--bg); }

.san-cal-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 2px;
}
.san-cal-day-hdr {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: .3rem 0;
  letter-spacing: .4px;
}
.san-cal-cell {
  min-height: 52px;
  border-radius: 8px;
  padding: .25rem .3rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  transition: background .15s;
  position: relative;
  cursor: default;
}
.san-cal-cell:hover { background: var(--surface2); }
.san-cal-num {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.san-cal-other { opacity: .35; }
.san-cal-today { background: rgba(34,197,94,.08); }
.san-cal-today .san-cal-num {
  background: var(--accent);
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: .7rem;
}
.san-cal-event {
  font-size: .6rem;
  font-weight: 600;
  color: #fff;
  border-radius: 4px;
  padding: .1rem .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  cursor: pointer;
}
.san-cal-more {
  font-size: .58rem;
  color: var(--muted);
  font-style: italic;
}

.san-legend, .san-legend-inline {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.san-leg-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Upcoming list ── */
.san-schedule-card { min-height: 400px; }
.san-upcoming-list { display:flex; flex-direction:column; gap:.6rem; overflow-y:auto; max-height:350px; }
.san-upcoming-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: border-color .2s;
}
.san-upcoming-item:hover { border-color: var(--accent); }
.san-upcoming-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: .25rem;
  flex-shrink: 0;
}
.san-upcoming-info { flex:1; display:flex; flex-direction:column; gap:.18rem; }
.san-upcoming-tipo { font-size:.78rem; font-weight:700; }
.san-upcoming-lote { font-size:.78rem; color:var(--text); font-weight:500; }
.san-upcoming-date { font-size:.73rem; color:var(--muted); }
.san-upcoming-workers { font-size:.71rem; color:var(--muted); }
.san-empty-note { font-size:.82rem; color:var(--muted); text-align:center; padding:.75rem; }

/* ── Charts ── */
.san-chart-wrap { position:relative; height:220px; width:100%; }
.san-threshold-note { font-size:.72rem; color:#f87171; font-weight:500; }

/* ── Tables ── */
.san-table-card { overflow:hidden; }
.san-table-wrap { overflow-x:auto; margin-top:.25rem; }
.san-table {
  width:100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.san-table thead th {
  background: var(--surface2);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.san-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.san-table tbody tr:hover { background: var(--surface2); }
.san-table tbody td { padding: .65rem .85rem; vertical-align:middle; }
.san-table tbody tr:last-child { border-bottom: none; }

.san-rec-cell { max-width:220px; font-size:.78rem; color:var(--muted); }

/* Diagnosis badges */
.san-diag-badge {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .73rem;
  font-weight: 700;
}
.san-diag-bajo  { background:rgba(74,222,128,.15); color:#16a34a; }
.san-diag-medio { background:rgba(245,158,11,.15); color:#b45309; }
.san-diag-alto  { background:rgba(248,113,113,.15); color:#dc2626; }

/* Tipo badge */
.san-tipo-badge {
  display:inline-block;
  padding:.2rem .65rem;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
}

/* Incidencia bar */
.san-incidencia-bar {
  display:flex; align-items:center; gap:.5rem;
}
.san-incidencia-bar span {
  height:6px; border-radius:3px; display:inline-block; min-width:4px; max-width:80px;
  transition:width .3s;
}
.san-incidencia-bar b { font-size:.78rem; font-weight:700; color:var(--text); white-space:nowrap; }

/* ── Modals ── */
.san-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: sanFadeIn .2s ease;
}
@keyframes sanFadeIn { from{opacity:0} to{opacity:1} }

.san-modal {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: sanSlideUp .25s ease;
}
@keyframes sanSlideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

.san-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.san-modal-header h3 { font-size:1rem; font-weight:700; }
.san-modal-close {
  background:none; border:none; font-size:1.1rem; color:var(--muted); cursor:pointer;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:6px; transition:background .15s;
}
.san-modal-close:hover { background:var(--surface2); }
.san-modal-body { padding: 1.25rem 1.5rem; }
.san-modal-footer {
  display:flex; justify-content:flex-end; gap:.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

.san-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.san-form-group { display:flex; flex-direction:column; gap:.35rem; }
.san-form-group.san-full-col { grid-column:1/-1; }
.san-form-group label { font-size:.76rem; font-weight:600; color:var(--muted); }
.san-form-group input,
.san-form-group select,
.san-form-group textarea {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  padding: .6rem .85rem;
  border-radius: 9px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.san-form-group input:focus,
.san-form-group select:focus,
.san-form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}