<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Formulario – Persona Moral</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- =====================
       CSS – Variables & Base
       ===================== -->
  <style>
    :root {
      --bg: #f4f6fb;
      --bg-card: #ffffff;
      --text: #1f2933;
      --muted: #6b7280;
      --primary: #2563eb;
      --primary-contrast: #ffffff;
      --border: #e5e7eb;
      --shadow: 0 10px 25px rgba(0,0,0,.08);
      --radius: 14px;
      --focus: 0 0 0 3px rgba(37,99,235,.35);
    }

    [data-theme="dark"] {
      --bg: #0f172a;
      --bg-card: #111827;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --primary: #38bdf8;
      --primary-contrast: #0f172a;
      --border: #1f2937;
      --shadow: 0 12px 30px rgba(0,0,0,.6);
    }

    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    a { color: var(--primary); }

    /* =====================
       Layout
       ===================== */
    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .header-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 1rem;
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .title-group h1 {
      font-size: 1.25rem;
      margin: 0;
    }

    .title-group p {
      margin: .25rem 0 0;
      font-size: .9rem;
      color: var(--muted);
    }

    main {
      max-width: 1100px;
      margin: 2rem auto;
      padding: 0 1rem 4rem;
    }

    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .card h2 {
      margin-top: 0;
      font-size: 1.1rem;
    }

    /* =====================
       Buttons & Toggles
       ===================== */
    button {
      border: none;
      border-radius: 999px;
      padding: .6rem 1rem;
      font-weight: 600;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--primary);
      color: var(--primary-contrast);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
    }

    button:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }

    .theme-controls {
      display: flex;
      gap: .5rem;
      align-items: center;
    }

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

    /* =====================
       Form
       ===================== */
    form {
      display: grid;
      gap: 1.25rem;
    }

    .field {
      display: grid;
      gap: .35rem;
    }

    label {
      font-weight: 600;
      font-size: .9rem;
    }

    input[type="text"],
    input[type="file"],
    select,
    textarea {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .6rem .7rem;
      font-size: .9rem;
    }

    input[type="file"] {
      padding: .4rem;
    }

    textarea {
      resize: vertical;
      min-height: 80px;
    }

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

    .optional {
      font-size: .75rem;
      color: var(--muted);
      font-weight: 500;
    }

    .grid-2 {
      display: grid;
      gap: 1rem;
    }

    @media (min-width: 700px) {
      .grid-2 {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* =====================
       Toast
       ===================== */
    .toast {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      padding: .75rem 1rem;
      border-radius: 10px;
      font-size: .85rem;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important;
      }
    }
  </style>
</head>

<body>
  <!-- =====================
       Header
       ===================== -->
  <header>
    <div class="header-inner">
      <div class="title-group">
        <h1>Formulario – Persona Moral</h1>
        <p>Integración de expediente legal y financiero</p>
      </div>

      <div class="theme-controls">
        <span id="modeIndicator" class="indicator">Modo: Automático</span>
        <button id="themeToggle" class="btn-secondary" aria-label="Cambiar tema">🌙</button>
        <button id="resetTheme" class="btn-secondary">Reset automático</button>
      </div>
    </div>
  </header>

  <!-- =====================
       Main
       ===================== -->
  <main>
    <div class="card">
      <h2>Documentación requerida</h2>

      <form id="personaMoralForm">
        <div class="field">
          <label>Acta constitutiva (Boleta de folio mercantil)</label>
          <input type="file" required />
        </div>

        <div class="field">
          <label>Poder del representante</label>
          <input type="file" />
          <span class="helper">Puede o no estar incluido en el acta constitutiva.</span>
        </div>

        <div class="grid-2">
          <div class="field">
            <label>Constancia de situación fiscal</label>
            <input type="file" required />
            <span class="helper">Vigencia menor a 2 meses.</span>
          </div>

          <div class="field">
            <label>Comprobante de domicilio</label>
            <input type="file" required />
            <span class="helper">Vigencia menor a 2 meses.</span>
          </div>
        </div>

        <div class="field">
          <label>
            CV de la empresa
            <span class="optional">(Opcional)</span>
          </label>
          <input type="file" />
          <span class="helper">
            Descripción de proyectos y relación de clientes, firmado por el representante legal.
          </span>
        </div>

        <div class="grid-2">
          <div class="field">
            <label>Identificación del representante legal</label>
            <input type="file" required />
          </div>

          <div class="field">
            <label>Cédula del contador público</label>
            <input type="file" required />
          </div>
        </div>

        <div class="field">
          <label>Estados financieros</label>
          <input type="file" required multiple />
          <span class="helper">
            Estados financieros al cierre del ejercicio y parciales del año en curso.
          </span>
        </div>

        <div class="grid-2">
          <div class="field">
            <label>Declaración anual (año anterior)</label>
            <input type="file" required />
          </div>

          <div class="field">
            <label>Excel de la declaración</label>
            <input type="file" required />
          </div>
        </div>

        <div class="field">
          <label>Cuestionario</label>
          <input type="file" required />
          <span class="helper">Origen: plataforma afianzadora.</span>
        </div>

        <div class="grid-2">
          <div class="field">
            <label>Buró de crédito</label>
            <input type="file" required />
            <span class="helper">Origen: plataforma afianzadora.</span>
          </div>

          <div class="field">
            <label>Contrato de afianzamiento</label>
            <input type="file" required />
            <span class="helper">Origen: plataforma afianzadora.</span>
          </div>
        </div>

        <div style="display:flex; gap:.75rem; margin-top:1rem;">
          <button type="submit" class="btn-primary">Guardar expediente</button>
          <button type="reset" class="btn-secondary">Limpiar</button>
        </div>
      </form>
    </div>
  </main>

  <!-- =====================
       Toast
       ===================== -->
  <div id="toast" class="toast" role="status" aria-live="polite">
    Información guardada correctamente
  </div>

  <!-- =====================
       JavaScript
       ===================== -->
  <script>
    const NIGHT_START = 19; // 19:00
    const NIGHT_END = 6;    // 06:59
    const STORAGE_KEY = "theme-preference";

    const toggleBtn = document.getElementById("themeToggle");
    const resetBtn = document.getElementById("resetTheme");
    const indicator = document.getElementById("modeIndicator");
    const toast = document.getElementById("toast");

    function getAutoTheme() {
      const hour = new Date().getHours();
      return (hour >= NIGHT_START || hour <= NIGHT_END) ? "dark" : "light";
    }

    function applyTheme(theme, mode = "auto") {
      document.documentElement.setAttribute("data-theme", theme);
      indicator.textContent =
        mode === "manual"
          ? "Modo: Manual"
          : "Modo: Automático (por horario)";
      toggleBtn.textContent = theme === "dark" ? "☀️" : "🌙";
    }

    function initTheme() {
      const saved = localStorage.getItem(STORAGE_KEY);
      if (saved) {
        applyTheme(saved, "manual");
      } else {
        applyTheme(getAutoTheme(), "auto");
      }
    }

    toggleBtn.addEventListener("click", () => {
      const current =
        document.documentElement.getAttribute("data-theme") ||
        getAutoTheme();
      const next = current === "dark" ? "light" : "dark";
      localStorage.setItem(STORAGE_KEY, next);
      applyTheme(next, "manual");
      showToast("Tema guardado");
    });

    resetBtn.addEventListener("click", () => {
      localStorage.removeItem(STORAGE_KEY);
      applyTheme(getAutoTheme(), "auto");
      showToast("Modo automático activado");
    });

    function autoRecalc() {
      if (!localStorage.getItem(STORAGE_KEY)) {
        applyTheme(getAutoTheme(), "auto");
      }
    }

    setInterval(autoRecalc, 60000);
    document.addEventListener("visibilitychange", autoRecalc);
    window.addEventListener("focus", autoRecalc);

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add("show");
      setTimeout(() => toast.classList.remove("show"), 2500);
    }

    document
      .getElementById("personaMoralForm")
      .addEventListener("submit", e => {
        e.preventDefault();
        showToast("Expediente guardado correctamente");
      });

    initTheme();
  </script>
</body>
</html>
