/* Reset / Base recomendado para empezar un proyecto limpio */

/* 1) Caja: hacer que los anchos incluyan padding/border */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2) Reset de márgenes y paddings comunes , rem = 10px*/
html, body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd, ul, ol, li, pre, fieldset {
    margin: 0;
    padding: 0;
    font-size: 62.5%; 
}

/* 3) Listas y tablas */
ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 4) Imágenes y medios: evitar overflow y mantener ratio */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 5) Formularios y controles: heredar tipografía y limpiar estilos por defecto */
 
button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none; /* opcional: prefiera :focus-visible para accesibilidad */
}

/* 6) Enlaces: control explícito de estilo */
a {
    color: inherit;
    text-decoration: none;
    
}

/* 7) Body: base tipográfica y comportamiento */
html, body {
    height: 100%;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: define tu stack en tu proyecto */
}

/* Nota de accesibilidad:
   Si eliminas outlines globalmente, reemplázalos por reglas visibles con :focus-visible para usuarios de teclado. */

   /*------------------*/
   
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      font-size: 2rem;
    }

    .main-content {
      display: grid;
      grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
      grid-template-columns: 1fr 2fr;
      grid-template-rows: auto auto 1fr auto;
      gap: 1.5rem;
      padding: 1.5rem;
    }

    header {
      grid-area: header;
      background-color: #d502ff;
      color: white;
      padding: 1rem;
      text-align: center;
    }

    nav {
      grid-area: nav;
      background-color: #e0e0e0;
      padding: 1rem;
    }

    nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      list-style-type: none ;
      padding: 10px;
      margin: 0;
    }

    nav li {
      padding: 0.5rem;
      border: 3px double red;
      border-radius: 5px;
    }

    nav a {
      text-decoration: none;
      color: #333;
    }
    .nav2 {
      grid-area: nav;
      background-color: #e0e0e0;
      padding: 1rem;
    }

    .nav2  ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      list-style-type: none ;
      padding: 10px;
      margin: 0;
    }

    .nav2  li {
      padding: 0.5rem;
      border: 3px double red;
      border-radius: 5px;
    }

    .nav2  a {
      text-decoration: none;
      color: #333;
    }

    main {
      grid-area: main;
      background-color: #ffffff;
      padding: 1rem;
    }

    aside {
      grid-area: aside;
      background-color: #f9f9f9;
      padding: 1rem;
      border-left: 4px solid #ccc;
    }
   
    footer {
      grid-area: footer;
      background-color: #222;
      color: white;
      text-align: center;
      padding: 1rem;
    } 
    /* Cajas internas, por si se usan */
    .cajas {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .cajas div {
      background-color: #ddd;
      padding: 1rem;
      text-align: center;
      border-radius: 5px;
    }

  
:root {
  --form-bg: #ede9ee;         /* Fondo del formulario */
  --input-bg: #ffeeff;        /* Fondo de los inputs */
  --accent-color: #f180e2;    /* Color principal (botón, foco) */
  --text-color: #333;         /* Color del texto */
  --font-family:  "Poppins", sans-serif;
  --input-width: 150px;       /* Ancho fijo de inputs */
  --input-height: 20px;       /* Altura base de inputs */
  --border-radius: 8px;       /* Bordes redondeados */
  --transition: 0.25s ease;
}

/* ===== FORMULARIO GENERAL ===== */
.custom-form {
  background-color: var(--form-bg);
  padding: 2rem;
  border-radius: var(--border-radius);
  border: double rgb(226, 58, 220);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-family);
  color: var(--text-color);
  max-width: 400px;
  margin: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* ===== LABELS ===== */
.custom-form label {
  align-self: flex-start;
  font-weight: 800;
  font-size: 1rem;
  font-style: oblique;
  margin-left: calc((100% - var(--input-width)) / 2);
}

/* ===== CAMPOS DE ENTRADA ===== */
.custom-form input,
.custom-form textarea {
  width: var(--input-width);
  background-color: var(--input-bg);
  border: 1.5px solid #ccc;
  border-radius: var(--border-radius);
  padding: 0.6rem 1rem;
  font-size: 1rem;
  transition: var(--transition);
  font-family: inherit;
  color: var(--text-color);
}

/* Altura específica */
.custom-form input {
  height: var(--input-height);
}

.custom-form textarea {
  height: calc(var(--input-height) * 5);
  resize: vertical; /* Permite redimensionar si se desea */
}

/* ===== PLACEHOLDERS ===== */
.custom-form input::placeholder,
.custom-form textarea::placeholder {
  color: #888;
  font-style: italic;
}

/* ===== EFECTOS DE FOCO ===== */
.custom-form input:focus,
.custom-form textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 6px rgba(0, 119, 255, 0.3);
}

/* ===== BOTÓN ===== */
.custom-form button {
  width: 25%;
  height: var(--input-height);
  text-align: center;
  background-color: var(--accent-color);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.custom-form button:hover {
  background-color: #d400c9;
  transform: scale(1.03);
}

/* ===== VALIDACIÓN ===== */
.custom-form input:invalid {
  border-color: #e63946;
}

.custom-form input:invalid:focus {
  box-shadow: 0 0 6px rgba(230, 57, 70, 0.4);
}
  /* RESPONSIVE DESIGN */
    @media (max-width: 368px) {
      .main-content {
        grid-template-areas:
          "header"
          "aside"
          "main"
          "footer";
        grid-template-columns: 1fr;
      }

      nav ul {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
      }

      nav li {
        width: 100%;
        text-align: center;
      }
    }