/* ============================================================
   evento-nuevo.css — crear un evento

   Cuatro campos. Una PANTALLA y no un modal: se crea desde el
   telefono, parado, mientras se cierra la venta, y un modal con
   el teclado abierto deja el boton debajo del teclado.

   Sin colores literales: todo sale de las fichas del design
   system.
   ============================================================ */

.cabecera-evento {
  display: flex;
  align-items: flex-start;
  gap: var(--e24);
  padding-top: var(--e32);
  padding-bottom: var(--e24);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e6);
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
}

.volver:hover { color: var(--color-text); }

/* Sin mayusculas: eliminan el perfil de la palabra y se lee peor, no mejor.
   El peso y el color ya establecen la jerarquia sin gritar. */
.rotulo-seccion {
  font-size: var(--t-etiqueta);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
  margin: 0;
}

/* Una sola columna angosta: son cuatro campos, y estirarlos al ancho del
   panel deja lineas de lectura de treinta centimetros. */
/* El ancho sale de la ficha del kit: el 520 estaba escrito aca y en ningun
   otro lado, y ahora hay tres anchos nombrados. Ver `fundamentos.css`. */
.columna-nuevo { max-width: var(--ancho-angosto); }

/* Las medidas que las capas del campo de fecha necesitan: aca el control mide
   48 y tiene 16 de relleno, contra los 2,5rem y 12 del kit. Ver field.css. */
.campo-nuevo {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
  --alto-fecha: 48px;
  --aire-fecha: var(--e8);
  --pad-fecha: var(--e16);
}

/* El texto de sin fecha, con el cuerpo de este formulario y no el del kit. */
.campo-nuevo > .fecha-vacia.is-visible { font-size: var(--t-cuerpo); }

.campo-nuevo__rotulo { font-size: var(--t-apoyo); font-weight: var(--weight-medium); }

.campo-nuevo__ayuda {
  font-size: var(--t-etiqueta);
  color: var(--color-text-subtle);
  line-height: 1.45;
  margin: 0;
}

.entrada-nuevo {
  width: 100%;
  height: 48px;
  padding: 0 var(--e16);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
  font-size: var(--t-cuerpo);
  transition: border-color var(--duration-fast) var(--ease-out);
}

/* EL PLACEHOLDER, CON EL COLOR DEL TEMA.

   No tenia regla, asi que ganaba el gris del navegador: un gris fijo, el mismo
   en los veintiocho temas, que en los claros queda demasiado presente y en los
   oscuros casi no se lee. Es la misma ficha que usa `.field__control` del kit,
   asi que los dos campos de esta pantalla se ven como los del resto.

   Las tres reglas separadas y no una lista: un selector que un navegador no
   entiende invalida la REGLA ENTERA, asi que juntar `::placeholder` con el
   `::-webkit-input-placeholder` o el `::-moz-placeholder` de un navegador viejo
   apaga tambien el que si funciona. */
.entrada-nuevo::placeholder { color: var(--color-text-subtle); }

.entrada-nuevo:hover { border-color: var(--color-border-hover); }

/* Mismo foco que el buscador: el de accion saltaba de gris oscuro a casi
   blanco, que no es un cambio de estado sino de material. */
.entrada-nuevo:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--aro-focus);
}

/* El tipo, en chips. Opciones excluyentes que se eligen una vez y no se
   vuelven a tocar: seis tarjetas grandes para eso ocupan media pantalla, y una
   chip con su glifo dice lo mismo en una fila. */