/* css/style.css */
* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    margin: 0;
    background: #f5f5f5;
    color: #333;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    background: #004d40;
    color: #fff;
}
header h1 {
    margin: 0;
    font-size: 1.2rem;
}
a.btn {
    padding: .4rem .8rem;
    background: #ff6f00;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.btn-view {
  background-color:  #0277bd; /* Azul */
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-view:hover {
  background-color: #1976D2; /* Azul más oscuro */
}

.btn-view:active {
  background-color: #0D47A1; /* Azul aún más oscuro */
  transform: translateY(1px);
}

.btn-view:disabled {
  background-color: #ccc; /* Gris */
  color: #666;
  cursor: not-allowed;
}



#foto:disabled + .btn-view {
  background-color: #ccc; /* Gris */
  color: #666;
  cursor: not-allowed;
}






.btn_o {
    display: inline-block;
 /*   padding: 0.6rem 11.2rem;;*/
	    padding: .4rem .8rem;
    margin: 00.4rem 0;
    background: #ff6f00;   /* color principal del header */
    color: #fff;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;           /* botones ocupan todo el ancho en pantalla pequeña */
}
.btn_o:hover,
.btn_o:focus {
    background: #e65c00;
    outline: none;
}




.card {
    background: #fff;
    margin: .8rem;
    padding: .8rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.status {
    font-size: .8rem;
    padding: .2rem .5rem;
    border-radius: 3px;
}
.pendiente { background: #ffebee; color: #c62828; }
.curso { background: #e1f5fe; color: #0277bd; }
.terminada { background: #e8f5e9; color: #2e7d32; }

.upload-form input[type="file"] {
    display: none;               /* oculta el input original */
}
.upload-form label {
    cursor: pointer;             /* indica que es clicable */
    margin-bottom: .5rem;
}


  .step { margin: 8px 0; }
  .step label { display: block; font-weight: bold; margin-bottom: 4px; }
  .step select,
  .step input[type=file] { width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
  .step button { padding: 8px 12px; background:#28a745; color:#fff; border:none; border-radius:4px; cursor:pointer; }
  .step button:disabled { background:#aaa; cursor:not-allowed; }

.hero{
  background:#3498db;color:#fff;padding:2rem;text-align:center;
}
.hero h1{margin:0;font-size:2.5rem;}
.hero p{margin:.5rem 0 0;font-size:1.2rem;}

.main-menu{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
  margin:2rem auto;max-width:800px;
}
.main-menu .card{
  background:#fff;border:1px solid #ddd;border-radius:8px;
  padding:1.5rem;text-align:center;width:150px;
  text-decoration:none;color:#333;transition:.2s;
}
.main-menu .card:hover{
  box-shadow:0 4px 8px rgba(0,0,0,.2);transform:translateY(-2px);
}
.main-menu .card span{font-size:2rem;display:block;margin-bottom:.5rem;}


@media (max-width: 400px) {
    .card { margin: .5rem; padding: .5rem; }
    header h1 { font-size: 1rem; }
}