/*
  Semana 7 · Formulario con PHP
  Tema definitivo: Agendamiento de Maquillaje Profesional
  Alumna: Ángela Salcedo
  Paleta asignada: #111827 · #64748B · #F8FAFC · #0F172A · #D97706
  Fuente asignada: Trebuchet MS, Arial, sans-serif
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Trebuchet MS', Arial, sans-serif; /* Tu fuente asignada */
  color: #111827; /* Tu color oscuro principal para legibilidad */
  background: #F8FAFC; /* Tu color claro de fondo tipo estudio */
}

.encabezado {
  padding: 40px 16px; /* Espaciado interno premium */
  text-align: center;
  color: #F8FAFC; /* Texto claro para máximo contraste */
  background: #0F172A; /* Fondo oscuro profundo elegante */
  border-bottom: 4px solid #D97706; /* Detalle divisorio en ocre/dorado */
}

.encabezado h1 {
  margin: 8px 0;
  font-size: 2.6rem; /* Tamaño destacado del título */
  letter-spacing: 1px;
}

.etiqueta {
  margin: 0;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #D97706; /* Tu color de acento destacado */
}

.contenedor {
  width: min(1000px, 92%);
  margin: 32px auto;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  align-items: start;
}

.tarjeta,
.ayuda {
  background: #FFFFFF; /* Blanco puro para resaltar las secciones */
  padding: 28px; /* Espacio interno cómodo */
  border-radius: 16px; /* Esquinas curvas más suaves y estéticas */
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04); /* Sombra difuminada de alta gama */
}

.paso {
  margin: 0 0 8px;
  font-weight: bold;
  color: #D97706; /* Color de acento */
}

.intro {
  color: #64748B; /* Tu color gris secundario */
  line-height: 1.5;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  margin-top: 10px;
  font-weight: bold;
  font-size: 0.95rem;
}

input,
select,
textarea,
button {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  border-radius: 8px; /* Esquinas de campos pulidas */
}

input,
select,
textarea {
  border: 1px solid #64748B; /* Borde con tu gris secundario */
  background: #FFFFFF;
  transition: all 0.3s ease;
}

/* Corrección técnica: quitamos outline por defecto y agregamos iluminación dorada */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #D97706; /* Cambia al ocre/dorado en focus */
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15); /* Efecto difuminado de selección */
}

button,
.boton {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 20px;
  border: 0;
  border-radius: 8px;
  color: #FFFFFF; /* Texto blanco */
  background: #D97706; /* Tu color de acento llamativo */
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover,
.boton:hover {
  background: #111827; /* Cambia al tono oscuro principal en hover */
}

.flujo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.flujo span {
  padding: 10px;
  text-align: center;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.08); /* Fondo cálido sutil usando tu ocre */
  color: #0F172A; /* Texto en el tono oscuro legible */
  font-weight: bold;
  font-size: 0.9rem;
}

.nota,
.alerta {
  margin-top: 18px;
  padding: 14px;
  border-radius: 8px;
  background: #F8FAFC; /* Fondo claro limpio */
  border-left: 6px solid #D97706; /* Borde izquierdo grueso con tu acento ocre */
}

.resumen {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.dato {
  padding: 14px;
  border-radius: 8px;
  background: #F8FAFC; /* Fondo suave para la visualización en procesar.php */
  border: 1px solid rgba(100, 116, 139, 0.2); /* Borde gris sutil */
}

.dato strong {
  color: #0F172A;
}

.dato span {
  margin-top: 4px;
  color: #64748B; /* Color de texto secundario para las respuestas */
}

@media (max-width: 800px) {
  .contenedor {
    grid-template-columns: 1fr;
  }

  .encabezado h1 {
    font-size: 2rem; /* Tamaño ideal en celular */
  }
}