/* General */

html{
    background-color: white;
}

:root{
	--light-back-color:FloralWhite;
	--dark-back-color:AntiqueWhite;
	--intense-color:Brown;
	--input-color:BurlyWood;
}
:root {
  --light-back-color: WhiteSmoke;      /* Fondo general claro */
  --dark-back-color: Gainsboro;        /* Fondo de secciones / botones */
  --intense-color: DimGray;            /* Elementos destacados */
  --input-color: LightGray;            /* Inputs, sliders, etc. */
}

:root {
  --light-back-color: AliceBlue;  
  --dark-back-color: hsl(214, 41%, 90%); /* LightSteelBlue ligeramente más claro */
  --intense-color: DarkSlateGray; 
  --input-color: CadetBlue;
  --active-button-color:coral;
  }




.container{
    position:relative;
    background-color: var(--dark-back-color);
	color:var(--intense-color)!important;
    left:-30px;
    top:-20px;
    width: 800px;
	height: 700px;
	border: 10px solid var(--intense-color);
    padding: 30px;
    margin: 25px;
	font-family: "Roboto"!important;
	font-size: 14px;
	border-style:solid;
	border-width:2px;
	border-color:var(--intense-color);
}

canvas{
    border:1px solid #c3c3c3;
}

label {
  color:var(--intense-color)!important; 
  font-size: 12px;
}

input {
    border: 1px solid gray;
    border-radius: 6px;
    background: var(--input-color) ;
    color: white;
    font-size: 12px;
	text-align:right;
	padding-right:10px;
}
	
/* Boxes */

.box, .box1, .box2, .box3, .box4{
	background-color: var(--light-back-color);
	border-style:solid;
	border-width:2px;
	border-color:var(--intense-color);
	border-radius:5px;
}

.sketchHolder{
    position:absolute;
    background-color:var(--light-back-color);
    width: 300px;
    height: 200px;
    border: 2px solid var(--intense-color);
	border-radius:5px;
    padding: 30px;
    top:25px;
}

.box4{
    position:absolute;
    width: 360px;
    height:350px;
    padding: 30px;
    margin: 25px;
    left:400px;
    top:300px; 
    overflow: auto;
}


/* Botones */

button,
button[type="button"],
input[type="button"]  {
    background-color: var(--dark-back-color)!important;
    color: var(--intense-color)!important;
	font-weight:500!important;
    font-family: 'Roboto', sans-serif!important;
	font-size: 12px!important;
    border: 1px solid var(--intense-color)!important;
    border-radius: 20px;
	cursor: pointer;                 /* Cursor en modo clic */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Pequeño efecto 3D */
    transition: all 0.15s ease-in-out;     /* Animación suave */
	text-align:center;
    }

button:hover,
button[type="button"]:hover,
input[type="button"]:hover {
    background-color: var(--light-back-color) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.22);
}

button.active,
button[type="button"].active,
input[type="button"].active {
    background-color: coral !important;
    color: white !important;
	}

button:focus,
button[type="button"]:focus,
input[type="button"]:focus {
    background-color: var(--active-button-color)!important;
	color:white!important;
}


/* Sliders */

.slidecontainer{
    width:100%;
}

input[type="range"] {
	-webkit-appearance: none;
	width: 130px;
	height: 6px;
	background: var(--dark-back-color);
	border-radius: 4px;
	outline: none;
	border-color:var(--intense-color);
	cursor:pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--dark-back-color);
    border-radius: 4px;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--dark-back-color);
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: var(--active-button-color);
	border-radius: 50%;
    cursor: pointer;
    margin-top: -5px; /* centra el thumb */
	box-shadow:
		0 8px 4px rgba(0, 0, 0, 0.15),     /* sombra real */
        0 12px 6px rgba(0, 0, 0, 0.08),     /* sombra más suave */
        0 14px 10px rgba(255, 127, 80, 0.15); /* "reflejo" coral */
}



input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: var(--intense-color);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px; /* centra el thumb */
	box-shadow:
		0 8px 4px rgba(0, 0, 0, 0.15),     /* sombra real */
        0 12px 6px rgba(0, 0, 0, 0.08),     /* sombra más suave */
        0 14px 10px rgba(255, 127, 80, 0.15); /* "reflejo" coral */
}

/* Desplegables */

.dropbtn {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    border: 1px solid var(--intense-color);
    border-radius: 8px!important;
    padding: 6px 10px;
    cursor: pointer;
    text-align: center;
	border-radius:0px!important;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
    left:30px;
	}

.dropdown-content {
    display: none; /* se muestra al hover o click */
    position: absolute;
	margin-top:2px;
    min-width: 100px;
	font-size: 14px;
	border-top: 0px solid gainsboro!important;
	border-left: 1px solid gainsboro!important;
	border-right: 1px solid gainsboro!important;
	border-bottom: 1px solid black!important;
}
.show {
	display: block;
	}
.dropdown-content a {
    padding: 6px 10px;
    text-decoration: none;
    display: block;
	background-color:var(--light-back-color)!important;
	border: 1px solid gainsboro!important;
	}
.dropdown-content a:hover {
    background-color: var(--intense-color)!important;
    color: white!important;
}

















/* CSS específico para esta simulación */

.angleScroll{
    position: absolute;
    overflow-x: scroll;
    width: 60px;
    left: 200px;
    top: 80px;
}

.angleText{
    position: relative;
    width: 80px;
}

/* Caja #box1 */

.sketchHolder{
height:650px;
}

#defaultCanvas0{
	border:2px solid var(--active-button-color)!important;
	border-radius:15px;
	transform:scale(1.15);
	box-shadow:
		0 6px 10px rgba(0,0,0,0.35),     /* sombra global */
        0 0 15px rgba(255,127,80,0.25);  /* halo coral suave */
}

/* Caja #box2 */

#box2{
    position:absolute;
    width: 360px;
	height: 220px;
    padding: 30px;
    margin: 25px;
    left:400px;
    top:0px;
	height:230px;	
}

#box2 [type="button"]{
	font-size: 12px;
	width:18%;
}

#unitsButton{
	font-size:14px!important;
	width:100px;
	border-radius:5px!important;
	background-color:var(--intense-color)!important;
	color:white!important;
}
.unitsdropdown{
    position: relative;
    display: inline-block;
    left:10px;
	}
.unitsdropdown a{
    color:DimGray!important;
	}
.unitsdrodown button{
	min-width:200px!important;
	font-size:8px!important;
}

#reset{
	position:absolute;
	top:0px;
	right:10px;
	font-size:20px!important;
	color:white!important;
	background-color:red!important;
	width:60px;
	height:60px;
	border:none!important;
	border-radius:50%;
	transform:scale(0.6);
}

#box2 [type="label"]{
font-size: 14px;
width:12ch!important;
}

#box2 label:nth-of-type(1){
display:block;
margin-top:-20px;
margin-bottom:20px;
font-size: 20px;
font-weight: 700;
}

#box2 label:nth-of-type(2){
margin-left: -10px;
font-size: 16px;
font-weight: 600!important;
}

#box2 label:nth-of-type(3), #box2 label:nth-of-type(4){
position:absolute;
loat:right;
right:10px;
width:50px!important;
text-align:right;
}

#box2 label:nth-of-type(5), #box2 label:nth-of-type(9), #box2 label:nth-of-type(11){
position:relative;
float:left;
left:0%;
width:10px;
margin-top:5px;
}

#box2 label:nth-of-type(7), #box2 label:nth-of-type(10), #box2 label:nth-of-type(12){
position:relative;
float:right;
right:160px;
width:25px!important;
white-space: nowrap !important;
margin-top:5px;
}

#box2 label:nth-of-type(6){
position:relative;
float:left;
left:40px;
width:15px;
margin-top:5px;
}

#box2 label:nth-of-type(8){
position:relative;
float:right;
right:-85px;
width:15px;
margin-top:5px;
}

#liftBox, #cLiftBox, #reynoldBox{
position:relative;
float:left;
left:10%;
width:70px!important;
}

#dragBox, #cDragBox, #ratioBox{
position:relative;
float:right;
right:20px;
width:70px!important;
}


/* Caja #box3 */

#box3{
    position:absolute;
    width: 300px;
    height: 400px;
    padding: 30px;
    margin: 25px;
    top:260px;
	border-style:none;
	background-color: transparent;
	margin-left:-10px!important;
}

/* Caja #box3 Shape*/
#airfoilLabel{
	font-size:16px!important;
	font-weight: 600!important;
}

#button1{
	position:relative!important;
	font-size:14px!important;
	width:180px;
	border-radius:4px;
	background-color:var(--intense-color)!important;
	color:white!important;
}
#airfoilDropdown{
    position: absolute;
    left:50px;
	width:800px!important!;
	border: 3px solid sienna!important;
	z-index:100!important;
	}
#airfoilDropdown a{
    color:DimGray!important;
	background-color: var(--light-back-color)!important;
	border-left: 1px solid gainsboro!important;
	border-right: 1px solid gainsboro!important;
	}
#airfoilDropdown a:hover{
    background-color: var(--intense-color)!important;
    color: white!important;
	}
#airfoilDropdown a:nth-of-type(1){
    border-top: 0px solid sienna!important;
	}
#airfoilDropdown a:nth-of-type(5){
    border-bottom: 1px solid black!important;
	}
#airfoilDropdown button{
	min-width:200px!important;
	font-size:8px!important;
}
	
#buttonText1{
	margin:0px;
}

#angleLabel, #camberLabel, #thickLabel{
	width:135px!important;
	}

#angleBox, #camberBox, #thickBox{
	display:inline-block;
	position:absolute;
	left:120px;
	width:50px;
	border: 1px solid gray;
    border-radius: 6px;
    background: var(--input-color) ;
    color: white;
    font-size: 12px;
	text-align:right;
	padding-right:10px;
}

#stepDownSlider1, #stepDownSlider2, #stepUpSlider1, #stepUpSlider2{
display:none
}

#slider1, #slider2{
position:absolute!important;
left:200px!important;
margin-top:-15px;
}

#box3 [type="button"]{
font-size: 12px;
width:85px;
}

input[type="range"]#slider3{
	position:absolute!important;
	width:60px;
	left:200px!important;
}

/* Caja #box3 Flight*/

#basicLabel {
  position: relative !important;
  }
#basicLabel label:nth-of-type(1) {
	width:200px!important;
	top:50px!important;
	margin-left:30px!important;
	right: 0px!important;
	text-indent:-38px!important;
	}

input[type="text"]#slider3, input[type="text"]#symmetricButton{
	position:absolute!important;
	width:50px!important;
	left:120px!important;
}

#pressOut{
	left:127px!important;
	with:90px!important;
}
#tempOut, #viscOut{
	left:130px!important;
	with:90px!important;
}

/* Caja #box3 Analysis*/

#liftCorrection, #inducedDragLabel, #reNumCorrection, #dragOfBall, #displayLabel{
	position:relative;
	float:left;
	left:30px!important;
}

#stallModelButton, #arOnButton, #idOnButton, #reOnButton{
	position:absolute!important;
	left:150px!important;
	width:75px!important;
}

#idealFlowButton, #arOffButton, #idOffButton, #reOffButton{
	position:absolute!important;
	left:250px!important;
	width:75px!important;
}

#smoothBallButton, #roughBallButton, #golfBallButton, #streamlinesButton, #movingButton, #freezeButton, #csvButton, #twoDButton, #threeDButton{
	float:left!important;
	width:80px!important;
	margin-top:-2px!important;
}

#smoothBallButton, #streamlinesButton, #csvButton{
	left:100px!important;
}

#roughBallButton, #movingButton, #twoDButton{
	left:185px!important;
}

#golfBallButton, #freezeButton, #threeDButton{
	left:270px!important;
}

/* Caja #box3 SelectPlot*/

#selectLabel{
	font-family: 'Montserrat', sans-serif!important;
	font-size:16px!important;
	font-weight: 600!important;
	left:50px!important;
}

#surfaceLabel{
	margin-left:-50px!important;
	font-size:12px!important;
	color: DimGray!important;
	font-family: 'Montserrat', sans-serif!important;
}

#dropdown1, #dropdown2{
	background-color: var(--intense-color)!important;
	min-width:60px!important;
	border: 1px solid var(--intense-color)!important;
	border-radius: 4px;
	margin-left:-50px;
	font-size: 11px!important;
	color:White;
	padding-top: 1px!important;  
	padding-bottom:1px!important;
}

#dropdown1 option, #dropdown2 option{
	border: 1px solid var(--intense-color)!important;
	background-color:var(--light-back-color)!important;
	color:DimGray!important;
	border: 3px solid sienna!important;
}

#pressureButton, #velocityButton, #dragButton, #angleButton, #camberButton, #thicknessButton, #speedButton, #altitudeButton, #wingButton, #densityButton{
	float:left!important;
	width:80px!important;
	font-size:12px!important;
	padding-top: 1px!important;  
	padding-bottom:1px!important; 
}

#pressureButton, #angleButton, #speedButton, #densityButton{
	left:115px!important;
}

#velocityButton, #camberButton, #altitudeButton, #wingButton{
	left:200px!important;
}

#dragButton, #thicknessButton{
	left:285px!important;
}

#densityButton, #wingButton{
	top:530px!important;
}

/* Caja #box4 */
.box4{
	verflow: hidden!important;
}

.svg-container{
	margin-top:-23px!important;
	transform:scale(0.95)!important;
	background-color:hsla(0, 0%, 86%, 0.9)!important;
}

.main-svg, #textArea{
	border: 1px solid var(--dark-back-color)!important;
	box-shadow:
		0 12px 18px rgba(0,0,0,0.15);
}

#textArea{
	argin-top:-30px;
	border: 2px solid var(--light-back-color)!important;
	border-radius:5px!important;
	padding:20px!important;
	 box-shadow:
        0 2px 3px rgba(0,0,0,0.08),
        0 4px 6px rgba(0,0,0,0.10);
    font-family: Verdana, Geneva, sans-serif!important;
	font-size:14px;
}