/* Portal de Graduaciones — identidad Gorgona: blanco y negro, Playfair + Jost */
:root{
  --papel:#FBFAF8;
  --superficie:#F2EFE9;
  --tinta:#141312;
  --piedra:#6B675F;
  --linea:#E2DCD2;
  --acento:#B0701A;
  --luz:#E9A13B;
  --bien:#3F6B4A;
  --ojo:#9A5B12;
  --mal:#8C3A2E;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
}
a{color:var(--acento);text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--luz);outline-offset:2px;}

/* ---------------------------------------------------------- estructura --- */
.barra-marca{
  border-bottom:1px solid var(--linea);
  background:var(--papel);
  position:sticky;top:0;z-index:30;
}
.barra-marca .interior{
  max-width:1180px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:16px;
}
.marca{
  font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.01em;
  text-decoration:none;color:var(--tinta);
}
.marca .destello{color:var(--luz);}
.barra-marca .quien{
  margin-left:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--piedra);display:flex;gap:16px;align-items:center;
}
.contenido{max-width:1180px;margin:0 auto;padding:26px 20px 80px;}
.angosto{max-width:620px;}

h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,4vw,2.3rem);
   line-height:1.15;margin:0 0 8px;letter-spacing:-.01em;}
h2{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:0 0 12px;}
h3{font-weight:500;font-size:1rem;margin:26px 0 8px;}
p{margin:0 0 14px;}
.apunte{color:var(--piedra);font-size:.92em;}

/* ------------------------------------------------------------- cabecera --- */
.cabecera-pedido{
  display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-end;
  padding-bottom:18px;border-bottom:1px solid var(--tinta);margin-bottom:0;
}
.cabecera-pedido .dato{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--piedra);}
.cabecera-pedido .dato b{
  display:block;font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--tinta);margin-top:2px;
}
.avance{margin-left:auto;text-align:right;}
.avance .cifra{font-family:var(--serif);font-size:1.9rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;}
.avance .riel{width:190px;height:3px;background:var(--linea);margin-top:8px;}
.avance .riel span{display:block;height:100%;background:var(--luz);transition:width .3s;}

/* ----------------------------------------------------------- botonera --- */
.herramientas{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--linea);
  position:sticky;top:53px;background:var(--papel);z-index:20;
}
.boton{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--tinta);background:transparent;color:var(--tinta);
  padding:9px 15px;cursor:pointer;border-radius:0;line-height:1.2;
}
.boton:hover{background:var(--tinta);color:var(--papel);}
.boton.suave{border-color:var(--linea);color:var(--piedra);}
.boton.suave:hover{border-color:var(--tinta);background:transparent;color:var(--tinta);}
.boton.lleno{background:var(--tinta);color:var(--papel);}
.boton.lleno:hover{opacity:.85;}
.boton:disabled{opacity:.4;cursor:not-allowed;}
.boton.chico{padding:5px 10px;font-size:10.5px;}

/* --------------------------------------------------------------- tabla --- */
.envoltura-tabla{overflow-x:auto;}
table.curso{border-collapse:collapse;width:100%;margin-top:4px;}
table.curso th{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--piedra);text-align:left;padding:12px 10px;border-bottom:1px solid var(--tinta);
  position:sticky;top:106px;background:var(--papel);z-index:10;
}
table.curso td{
  padding:10px;border-bottom:1px solid var(--linea);vertical-align:top;
}
table.curso tr.rechazada td{background:rgba(140,58,46,.05);}
.col-n{width:44px;font-variant-numeric:tabular-nums;color:var(--piedra);font-size:.85em;padding-top:18px;}
.col-foto{width:96px;}
.col-estado{width:120px;}

input[type=text], textarea, input[type=email], input[type=password],
input[type=number], input[type=date], select{
  width:100%;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea);padding:8px 10px;border-radius:0;
}
input:focus, textarea:focus, select:focus{border-color:var(--tinta);outline:none;}
textarea{resize:vertical;min-height:62px;line-height:1.45;}
.campo-lleno{border-color:var(--linea);}
label.etiqueta{
  display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--piedra);margin:14px 0 5px;
}
.contador{font-size:10.5px;color:var(--piedra);text-align:right;margin-top:2px;
  font-variant-numeric:tabular-nums;}
.contador.alerta{color:var(--mal);}

/* --------------------------------------------------------------- fotos --- */
.casilla-foto{
  width:76px;height:96px;border:1px dashed var(--piedra);background:var(--superficie);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;overflow:hidden;padding:0;
}
.casilla-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.casilla-foto .mas{font-size:20px;color:var(--piedra);line-height:1;}
.casilla-foto.tiene{border:1px solid var(--linea);}
.quitar-foto{
  position:absolute;top:2px;right:2px;background:var(--papel);border:1px solid var(--linea);
  width:20px;height:20px;line-height:1;font-size:12px;cursor:pointer;padding:0;color:var(--tinta);
}
.par-fotos{display:flex;gap:6px;}

/* -------------------------------------------------------------- estado --- */
.marca-estado{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;display:block;}
.marca-estado.lista{color:var(--bien);}
.marca-estado.falta{color:var(--ojo);}
.marca-estado.rechazada{color:var(--mal);}
.aviso-fila{font-size:11.5px;color:var(--ojo);margin-top:5px;display:block;}
.aviso-fila button{
  background:none;border:none;border-bottom:1px solid currentColor;color:var(--acento);
  font-family:var(--sans);font-size:11.5px;cursor:pointer;padding:0 0 1px;margin-right:10px;
}
.frase-comun-marca{
  font-size:12px;color:var(--piedra);font-style:italic;
  display:flex;align-items:center;gap:10px;min-height:62px;
}

/* -------------------------------------------------------------- cajas --- */
.caja{background:var(--superficie);border-left:2px solid var(--luz);padding:16px 18px;margin:18px 0;}
.caja h3{margin-top:0;}
.caja p:last-child{margin-bottom:0;}
.caja.error{border-left-color:var(--mal);}

dialog{
  border:1px solid var(--tinta);background:var(--papel);color:var(--tinta);
  padding:0;max-width:620px;width:calc(100% - 32px);
}
dialog::backdrop{background:rgba(20,19,18,.55);}
dialog .cuerpo{padding:24px;}
dialog h2{margin-top:0;}
dialog .pie{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px;
  border-top:1px solid var(--linea);background:var(--superficie);}

.aviso-flotante{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--tinta);color:var(--papel);padding:11px 20px;font-size:13px;
  z-index:60;max-width:min(560px,92vw);
}
.aviso-flotante.malo{background:var(--mal);}

.lista-hallazgos{list-style:none;margin:0;padding:0;}
.lista-hallazgos li{padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px;}
.lista-hallazgos .fila{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--piedra);}

/* -------------------------------------------------------------- admin --- */
table.listado{border-collapse:collapse;width:100%;font-size:14px;}
table.listado th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--piedra);text-align:left;padding:10px 12px 10px 0;
  border-bottom:1px solid var(--tinta);}
table.listado td{padding:12px 12px 12px 0;border-bottom:1px solid var(--linea);vertical-align:top;}
.credencial{
  font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--superficie);
  border:1px solid var(--linea);padding:3px 8px;font-size:14px;
}
.formulario{display:grid;gap:2px;}
.formulario .dupla{display:grid;grid-template-columns:1fr 1fr;gap:16px;}


/* El boton "Escribir una propia" se repite en cada fila: en pantalla grande
   aparece al acercarse a la fila, para que la tabla no sea un muro de botones. */
@media (hover:hover) and (min-width:821px){
  .frase-comun-marca .boton{opacity:0;transition:opacity .15s;}
  tr:hover .frase-comun-marca .boton,
  .frase-comun-marca .boton:focus-visible{opacity:1;}
}

/* ------------------------------------------------------------- celular --- */
.recomendacion-equipo{display:none;}
@media (max-width:820px){
  .recomendacion-equipo{display:block;}
  .herramientas{position:static;}
  table.curso thead{display:none;}
  table.curso, table.curso tbody, table.curso tr, table.curso td{display:block;width:100%;}
  table.curso tr{
    border:1px solid var(--linea);margin-bottom:14px;padding:12px;position:relative;
  }
  table.curso td{border:none;padding:6px 0;}
  .col-n{position:absolute;top:12px;right:12px;padding:0;font-size:12px;}
  .col-foto{width:auto;}
  td[data-rotulo]::before{
    content:attr(data-rotulo);display:block;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--piedra);margin-bottom:4px;
  }
  .cabecera-pedido{gap:14px 24px;}
  .avance{margin-left:0;text-align:left;}
  .avance .riel{width:100%;}
  .formulario .dupla{grid-template-columns:1fr;}
}
@media print{ .herramientas,.barra-marca{display:none;} }