:root {
          --bg1: #663399;
          --bg2: #008b8b;
          --text: #1e1e1e;
          --label: #333;
          --accent: #663399;
          --error: #e74c3c;
          --success: #28a745;
      }

      html,
      body {
          height: 100%;
      }

      body {
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
          color: var(--text);
          background: linear-gradient(150deg, var(--bg1), var(--bg2));
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
      }

      .card {
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
          max-width: 900px;
          width: 100%;
          padding: 20px;
      }

      h1 {
          font-size: 1.25rem;
          margin: 0 0 12px;
          color: #222;
          text-align: center;
      }

      form {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
      }

      .field {
          flex: 1 1 280px;
          min-width: 240px;
          display: flex;
          flex-direction: column;
      }
      .reloj{
        text-align: end;
      }

      label {
          font-weight: 600;
          font-size: 0.92rem;
          margin-bottom: 6px;
          color: var(--label);
      }

      input[type="text"],
      input[type="date"],
      input[type="datetime-local"],
      select,
      textarea {
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 6px;
          font-size: 1rem;
          background: #fff;
      }
      .correo{
        height: 35px;
        font-size:medium;
        border-radius: 5px;
        border-color: #ccc;
        
      }

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

      .inline {
          display: flex;
          gap: 12px;
          align-items: center;
      }

      .hint {
          font-size: 0.8rem;
          color: #555;
      }

      .required {
          color: #d00;
          margin-left: 4px;
      }

      .row {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
      }

      /* File input styling (limitado por navegador) */
      input[type="file"] {
          display: block;
          margin-top: 6px;
      }

      .buttons {
          display: flex;
          gap: 12px;
          align-items: center;
          margin-top: 6px;
          flex-wrap: wrap;
      }

      button {
          padding: 12px 16px;
          border: none;
          border-radius: 6px;
          font-size: 1rem;
          cursor: pointer;
      }

      .primary {
          background: #1e88e5;
          color: #fff;
      }

      .secondary {
          background: #e0e0e0;
          color: #000;
      }

      .error {
          color: var(--error);
          font-size: 0.85rem;
      }

      @media (max-width: 700px) {
          .field {
              flex: 1 1 100%;
          }
      }