/* Base compartida: tokens, reset, shell, header, navegación, badge, componentes.
   Diseño de www.ag247.cl (rama ag247web): superficies oscuras planas, verde de marca,
   Geist, escala tipográfica de Tailwind, tabla fija de espaciado y radios de Tailwind. */
:root {
  /* Superficies (paleta oscura aprobada) */
  --bg: #131209;
  --surface: #1f1f1f;
  --surface-2: #272727;
  --surface-3: #313131;
  --black: #000000;

  /* Texto y líneas */
  --text: #f4f4f1;
  --text-muted: #a6a69d;
  --text-faint: rgba(244, 244, 241, 0.3);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Marca y estados */
  --green: #439331;
  --green-hover: #52a83e;
  --green-ink: #0b0f08;
  --green-soft: rgba(67, 147, 49, 0.14);
  --danger: #f2765f;
  --danger-soft: rgba(242, 118, 95, 0.14);
  --warn: #e3b341;
  --warn-soft: rgba(227, 179, 65, 0.14);

  /* Color por módulo (chips y puntos del calendario) */
  --mod-labores: var(--green-hover);
  --mod-iot: #6cb6d9;
  --mod-parametros: var(--warn);
  --mod-documentos: #b39ddb;

  /* Espaciado */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px;
  --s-300: 24px; --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px;
  --s-800: 80px; --s-900: 96px;

  /* Radios (Tailwind) */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  /* Movimiento */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* Layout */
  --header-height: 64px;
  --bottom-nav-height: 64px;
  --fab-size: 48px;
  --gutter: var(--s-200);
  --content-max: 1280px;
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gutter: var(--s-300); } }
@media (min-width: 1024px) { :root { --gutter: var(--s-400); --header-height: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem; line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg, img { display: block; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
em, i:not(.ph), cite { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green-hover); outline-offset: 2px; border-radius: var(--r-md); }
::selection { background: var(--green); color: var(--green-ink); }
.ph { display: block; line-height: 1; }

/* ---------- Shell ---------- */
.app-shell { min-height: 100dvh; }

.app-content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-300) 0 calc(var(--bottom-nav-height) + var(--s-700) + env(safe-area-inset-bottom));
}

/* ---------- Intro de página ---------- */
.page-intro { padding: 0 var(--gutter) var(--s-300); max-width: 760px; }
.page-intro__title {
  margin: 0;
  font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffffff, #9b9b9b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-intro__text { margin: var(--s-75) 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
@media (min-width: 768px) {
  .page-intro__title { font-size: 1.875rem; line-height: 2.25rem; }
  .page-intro__text { font-size: 1rem; line-height: 1.5rem; }
}

/* ---------- Header: barra de vidrio fija ---------- */
.app-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-height);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(19, 18, 9, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.logo { height: 32px; width: auto; }
@media (min-width: 1024px) { .logo { height: 40px; } }

.menu-button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu-button:hover { background: rgba(255, 255, 255, 0.14); }
.menu-button:active { transform: scale(0.98); }

/* ---------- Badge ---------- */
.badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 var(--s-50);
  border-radius: var(--r-full);
  background: var(--green-soft);
  color: var(--green-hover);
  font-family: var(--font-mono);
  font-size: 0.75rem; line-height: 1rem; font-weight: 500;
}

/* ---------- Navegación inferior: isla de vidrio flotante ---------- */
.bottom-nav {
  position: fixed; z-index: 20;
  left: var(--s-200); right: var(--s-200);
  bottom: calc(var(--s-200) + env(safe-area-inset-bottom));
  max-width: 400px;
  margin: 0 auto;
  height: var(--bottom-nav-height);
  padding: 0 var(--s-75);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: rgba(24, 24, 24, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

.nav-item {
  position: relative;
  height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-item[aria-current="page"] { color: var(--green-hover); background: var(--green-soft); }

.fab {
  justify-self: center;
  width: var(--fab-size); height: var(--fab-size);
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--green);
  color: var(--green-ink);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab:hover { background: var(--green-hover); transform: translateY(-2px); }
.fab:active { transform: scale(0.98); }
.fab:disabled { opacity: 0.5; cursor: not-allowed; }
/* El hueco del grid queda libre: el FAB ocupa la columna central. */
.bottom-nav > span { display: none; }
.bottom-nav .fab { grid-column: 3; grid-row: 1; }
.bottom-nav .nav-item:nth-child(n + 3) { grid-row: 1; }
.bottom-nav .nav-item:nth-of-type(3) { grid-column: 4; }
.bottom-nav .nav-item:nth-of-type(4) { grid-column: 5; }

/* ---------- Componentes compartidos: tarjeta, botón, formulario ---------- */
.card {
  padding: var(--s-200);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.card__title { margin: 0 0 var(--s-100); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.empty { margin: var(--s-75) 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
@media (min-width: 768px) { .card { padding: var(--s-300); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-75);
  padding: var(--s-75) var(--s-200);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn--green { background: var(--green); color: var(--green-ink); }
.btn--green:hover { background: var(--green-hover); }
.btn--gray { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--gray:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.field { min-width: 0; margin: 0 0 var(--s-100); padding: 0; border: 0; }
.field > label, .field__label, .field legend {
  display: block; margin: 0 0 var(--s-50); padding: 0;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-muted);
}
.field legend small { color: var(--text-muted); }
.field input:not([type]), .field input[type="text"], .field input[type="number"], .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem; line-height: 1.5rem; /* 16px: evita el zoom automático de iOS */
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.24); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-hover); background: var(--surface-3); }
.field input:not([type]), .field input[type="text"], .field input[type="number"] { height: 40px; padding: 0 var(--s-100); border-radius: var(--r-xl); }
.field select { height: 40px; padding: 0 var(--s-100); border-radius: var(--r-xl); }
.field select:disabled { opacity: 0.55; }
.field textarea { display: block; padding: var(--s-100); border-radius: var(--r-xl); resize: vertical; }
.field > .check { display: flex; margin: 0; align-items: center; gap: var(--s-75); min-height: 32px; font-size: 0.875rem; line-height: 1.25rem; cursor: pointer; }
.check input, input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
.check { display: inline-flex; align-items: center; gap: var(--s-75); cursor: pointer; }

.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-75); margin-top: var(--s-200); }
.form-status { min-height: 1.25rem; margin: var(--s-100) 0 0; text-align: right; font-size: 0.875rem; line-height: 1.25rem; color: var(--green-hover); }
.form-status.is-error { color: var(--danger); }

/* ---------- Panel (tarjeta con foto + pie): configuración IoT, parámetros de equipo ---------- */
.panel {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.panel:hover { transform: translateY(-4px); border-color: var(--line-strong); }

.panel__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  margin: var(--s-75) var(--s-75) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  color: var(--text-muted);
}
.panel__photo img { width: 100%; height: 100%; object-fit: cover; }
.panel__link::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta es clicable */

.panel__overlay {
  z-index: 1;
  position: absolute; top: var(--s-200); right: var(--s-200);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text);
  transition: background-color var(--dur) var(--ease);
}
.panel__overlay:hover { background: rgba(0, 0, 0, 0.8); }
.panel__overlay--left { left: var(--s-200); right: auto; }
.panel__overlay input[type="checkbox"] { width: 16px; height: 16px; }

.panel__body { flex: 1; padding: var(--s-100) var(--s-200) var(--s-200); }
.panel__body p, .panel__body ul { margin: 0; }

/* Bloque por cliente (equipos, IoT) */
.cliente-grupo + .cliente-grupo { margin-top: var(--s-500); }
.cliente-grupo__titulo { display: flex; align-items: center; gap: var(--s-75); margin: 0 0 var(--s-200); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--text); }
.cliente-grupo__titulo .check { display: inline-flex; align-items: center; gap: var(--s-75); cursor: pointer; }
.cliente-grupo__titulo > span { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: var(--text-muted); }

.panel__foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-75);
  margin: 0 var(--s-75) var(--s-75);
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  background: var(--green-soft);
  color: var(--text-muted);
  font-size: 0.75rem; line-height: 1rem;
}

/* ---------- Desktop: rail lateral flotante en lugar de la isla inferior ---------- */
@media (min-width: 1024px) {
  :root { --rail: 72px; }
  .app-shell {
    display: grid;
    grid-template-columns: calc(var(--rail) + var(--s-400)) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .app-header { grid-column: 1 / -1; }
  .app-content { grid-column: 2; padding: var(--s-500) 0 var(--s-700); padding-left: 0; }

  .bottom-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--s-300));
    left: auto; right: auto; bottom: auto;
    grid-column: 1; grid-row: 2;
    align-self: start;
    width: var(--rail); max-width: none; height: auto;
    margin: var(--s-300) 0 0 var(--s-400);
    padding: var(--s-75);
    display: flex; flex-direction: column; align-items: stretch; gap: var(--s-75);
    border-radius: var(--r-3xl);
  }
  .nav-item { height: 56px; border-radius: var(--r-2xl); }
  .fab { order: -1; align-self: center; width: 56px; height: 56px; margin-bottom: var(--s-75); border-radius: var(--r-2xl); }
}

.avatar {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text);
  font-size: 0.75rem; line-height: 1rem; font-weight: 600;
}

/* Link "volver" de páginas de detalle. */
.back {
  display: inline-flex; align-items: center; gap: var(--s-50);
  margin-bottom: var(--s-100);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.back:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---------- Validación de campos (js/parametros-reglas.js) ---------- */
.field.is-error input, .field.is-error select, td.is-error input { border-color: var(--danger); background: var(--danger-soft); }
.field.is-warn input, .field.is-warn select, td.is-warn input { border-color: var(--warn); background: var(--warn-soft); }
.field__msg { margin: var(--s-50) 0 0; font-size: 0.75rem; line-height: 1rem; }
.field__msg:empty { display: none; }
.is-error > .field__msg { color: var(--danger); }
.is-warn > .field__msg { color: var(--warn); }
td > .field__msg { display: none; } /* en la tabla mensual basta el color; el detalle va en el resumen de la sección */
.field__msg .btn-link { margin-left: var(--s-50); padding: 0; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.avisos { margin: 0 0 var(--s-100); padding: var(--s-100) var(--s-200); border-radius: var(--r-xl); border: 1px solid var(--warn); background: var(--warn-soft); color: var(--text); font-size: 0.875rem; line-height: 1.25rem; }
.avisos.is-error { border-color: var(--danger); background: var(--danger-soft); }
.avisos ul { margin: var(--s-50) 0 0; padding-left: var(--s-300); }
.avisos:empty { display: none; }

/* Menú de usuario del header (nombre, correo, cerrar sesión) */
.user-menu { position: relative; }
.user-menu .avatar { width: 100%; height: 100%; display: grid; place-items: center; background: transparent; font-size: 0.8125rem; font-weight: 600; }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--s-75)); z-index: 30; min-width: 220px;
  display: grid; gap: var(--s-50); padding: var(--s-200);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2xl);
}
.user-menu__nombre { margin: 0; font-weight: 600; }
.user-menu__correo { margin: 0 0 var(--s-100); font-size: 0.8125rem; color: var(--text-muted); overflow-wrap: anywhere; }

/* Miniaturas de fotos: grilla de cuadrados con botón para quitar */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s-75); margin: var(--s-75) 0 0; padding: 0; list-style: none; }
.fotos:empty { display: none; }
.foto { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto__quitar {
  position: absolute; top: var(--s-50); right: var(--s-50);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foto__quitar:hover { background: var(--danger); color: var(--green-ink); }
.foto__quitar:active { transform: scale(0.98); }