@font-face {
  font-family: 'Miestilo';
  src: url('fonts/letra.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Aplicar globalmente */
html, body {
  font-family: 'Miestilo', sans-serif;
  margin:20px;
  background: var(--color-fondo-pagina);
}




:root{
	
  --fuente: 'Miestilo';
  --fuente-tam: clamp(13px, 4.6vw, 50px);
  --radio: 10px;
  --gap: 1rem;
  --bordes: 1px solid black;
  --fondo-editor: white;
  --color-texto: black;
  --color-botones: linear-gradient(180deg, #fff, #ddd, #ccc );
  --color-botones-texto: black;
  --color-titulo: #ff7a00;
  --color-subtitulo: #ffffff;
  --color-fondo-pagina: #ff7a00;
 
  --bg1:#ff8a33;            /* naranja base */
  --bg2:#ff7a1a;            /* naranja más oscuro */

}





.app{
  display:grid;
  padding: 1.2rem 1.2rem;
  border-radius:var(--radio);
  border:var(--bordes);
  // grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: .55rem;
  text-align: center;
  background: linear-gradient(180deg, #000000, #000000, #ff7a00);
}

.app_preview{
  display:grid;
  padding: 1.2rem 1.2rem;
  border-radius:var(--radio);
  border:var(--bordes);
  // grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: .55rem;
  text-align:left;
  background: #FFEFE0;
  //font-size: clamp(13px, 4.6vw, 50px);
}

.app_preview_encabezadoypie{
  display:grid;
  padding: 1.2rem 1.2rem;
  border-radius:var(--radio);
  border:var(--bordes);
  // grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: .55rem;
  text-align:left;
  background: linear-gradient(135deg, #ff7a00, #cccccc);
  //font-size: clamp(13px, 4.6vw, 50px);
}

.fila{
  display:flex;
  align-items: stretch;
  gap:var(--gap);
  width:100%;
  height: 100%;
  /* height: 45px; */
}

.btn{
  flex: 1 1 200px;
  //padding:.8rem .9rem;
  padding: 1rem 1.1rem; 
  font-weight:600;
  touch-action:manipulation;

  border:var(--bordes);
  border-radius:var(--radio);
  font-family: var(--fuente);
  font-size: var(--fuente-tam);
  background:var(--color-botones);
  color:var(--color-botones-texto);
}

.estado{
	flex: 1 1 200px;
	display: flex;
   align-items: center;   /* centra verticalmente */
   justify-content: center; /* opcional: centra también horizontalmente */
	font-size: 34px;
	border:var(--bordes);
	border-radius:var(--radio);
	font-family: var(--fuente);
	color: grey;
	background-color: black;
}


.onda{
  flex: 1 1 200px;
  height: 100px;    /* mismo alto que botones */
  width: 100%;
  object-fit: fill;

  //border:var(--bordes);
  //border-radius:var(--radio);
}




.titulo{
	
	color: var(--color-titulo);
	font-family: var(--fuente);
   &&font-size: 75px;
	
	
  display: flex;
  align-items: center;    /* centra verticalmente el logo y el texto */
  justify-content: center;/* centra todo el bloque en horizontal */
  gap:var(--gap);             /* espacio entre el logo y el texto */
  font-size: 4rem;
}

.subtitulo{
	
	color: var(--color-subtitulo);
	font-family: var(--fuente);
   //font-size: 75px;

  display: flex;
  align-items: center;    /* centra verticalmente el logo y el texto */
  justify-content: center;/* centra todo el bloque en horizontal */
  gap:var(--gap);             /* espacio entre el logo y el texto */
  font-size: 2.5rem;
	
}








.editor{
  
  height: 900px;
  resize: none;
  min-height: 0;     /* crucial en Grid (Safari/Chrome) */
  padding:.75rem .9rem;

  border:var(--bordes);
  border-radius:var(--radio);
  font-family: var(--fuente);
  font-size: var(--fuente-tam);  
  background:var(--fondo-editor);
  

}


.salida{
	flex: 1 1 200px;
	white-space: pre-wrap; 
	border:0px solid #ccc; 
	padding:.5rem;"


	border-radius:var(--radio);
	font-family: var(--fuente);
	font-size: var(--fuente-tam);
	color: var(--color-texto);
}

.logo{
	height: 35%
}

.volver{
	color: white;
	font-family: var(--fuente);
	font-size: var(--fuente-tam);	
}

.ingreso_de_texto{
	
  min-height: 0;     /* crucial en Grid (Safari/Chrome) */
  padding:.75rem .9rem;

  border:var(--bordes);
  border-radius:var(--radio);
  font-family: var(--fuente);
  font-size: var(--fuente-tam);  
  background:var(--fondo-editor);


}










/* ANIMACION DE TITULO */

.typing {
  color: var(--color-titulo);
  font-family: 'Miestilo';          /* estilo de máquina de escribir */
  white-space: nowrap;             /* evita salto de línea */
  overflow: hidden;                /* oculta el texto que aún "no se escribió" */
  border-right: 0px solid var(--color-titulo);   /* cursor */
  width: 0;                        /* empieza oculto */
  

  animation: typing 1s steps(25, end) forwards,
             blink 0.9s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to   { width: 60% }
}

@keyframes blink {
  50% { border-color: transparent }
}



/* Links */
a {
  //color: black;               /* color del texto del enlace */
  text-decoration: none;      /* quita el subrayado */
}
a:hover {
  text-decoration: none; /* vuelve a subrayar solo al pasar el mouse */
  color: #ff8a33;                 /* opcional: cambia color en hover */
}