/* Diseño moderno para Sistema de Pagos CONALEP Morelos
   Solo estilos visuales: no modifica consultas, formularios ni lógica PHP. */
:root{
  --conalep:#00843d;
  --conalep-dark:#00572a;
  --lime:#78be20;
  --ink:#1f2937;
  --muted:#6b7280;
  --soft:#f3f7f4;
  --line:#dfe8e2;
  --danger:#dc2626;
  --sky:#e9f7ef;
  --white:#ffffff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:radial-gradient(circle at top left,#e7f7ec 0,#f6faf7 36%,#eef3f1 100%);
  color:var(--ink);
}
.pagos-shell{width:min(1120px,94%);margin:24px auto 40px;}
.pagos-brand{text-align:center;margin-bottom:14px;}
.pagos-brand img{max-width:520px;width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));}
#cont.pagos-card,
#cont{
  width:min(1050px,96%) !important;
  margin:0 auto !important;
  padding:24px !important;
  border:0 !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 24px 70px rgba(0,87,42,.16) !important;
  text-align:center;
  overflow:hidden;
}
.pagos-topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px;text-align:left;}
.pagos-topbar h2{margin:6px 0 0;font-size:30px;line-height:1;color:var(--conalep-dark);}
.badge-system{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#e6f5eb;color:var(--conalep-dark);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.logout-link,
a[href='logout.php']{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 16px;border-radius:999px;background:var(--conalep-dark);color:#fff !important;text-decoration:none !important;font-weight:700;box-shadow:0 8px 18px rgba(0,87,42,.25);}
.student-card{display:flex;align-items:center;gap:16px;margin:18px 0;padding:18px;border-radius:22px;background:linear-gradient(135deg,#f0fff4,#ffffff);border:1px solid #d9f0df;text-align:left;}
.student-avatar{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--conalep),var(--lime));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;box-shadow:0 14px 25px rgba(0,132,61,.25);}
.student-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.student-card h3{margin:2px 0 3px !important;font-size:22px;color:var(--ink);}
.student-card p{margin:0;font-weight:700;color:var(--conalep-dark);}
.notice-box,.steps-box{margin:12px 0;padding:14px 16px;border-radius:18px;text-align:left;font-size:14px;line-height:1.45;}
.notice-box{background:#fff1f1;border:1px solid #fecaca;color:#7f1d1d;}
.steps-box{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;}
#cont table{width:100% !important;margin:16px auto !important;border-collapse:separate !important;border-spacing:0 !important;border:1px solid var(--line) !important;border-radius:18px !important;overflow:hidden !important;background:#fff !important;box-shadow:0 10px 26px rgba(31,41,55,.06) !important;}
#cont td{padding:12px 14px !important;border-bottom:1px solid #edf2ef !important;font-size:13px !important;line-height:1.35;}
#cont tr:last-child td{border-bottom:0 !important;}
#cont td[bgcolor='#CCCCFF'],#cont td[bgcolor='#ccccff']{background:linear-gradient(135deg,var(--conalep-dark),var(--conalep)) !important;color:#fff !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.04em;font-size:11px !important;}
#cont td[bgcolor='#CCFFCC'],#cont td[bgcolor='#ccffcc']{background:#f7fff9 !important;color:var(--ink) !important;}
#cont td[bgcolor='#8DEEEE'],#cont td[bgcolor='#79CDCD']{background:#e8fbf7 !important;color:var(--conalep-dark) !important;}
#cont h4{font-size:15px !important;margin:2px 0 !important;color:var(--conalep-dark);}
#cont button{border:0;border-radius:14px;background:linear-gradient(135deg,var(--conalep),var(--lime));padding:10px 16px;min-width:62px;cursor:pointer;box-shadow:0 8px 16px rgba(0,132,61,.24);transition:transform .15s ease, box-shadow .15s ease;}
#cont button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,132,61,.28);}
#cont button img{width:30px !important;height:auto !important;filter:brightness(0) invert(1);}
#cont a:not(.logout-link){color:var(--conalep-dark) !important;font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(0,87,42,.35);}
#cont a:not(.logout-link):hover{color:var(--conalep) !important;border-bottom-color:var(--conalep);}
#cont font[color='red']{color:var(--danger) !important;font-weight:700;}
.floatstop{clear:both;}
/* Mejora visual del login sin tocar estructura */
#Centro,#Contenido_,#contenido_{max-width:1180px;margin:auto;}
input[type='text'],input[type='password']{border:1px solid #cbd5d1;border-radius:12px;padding:10px 12px;outline:none;}
input[type='text']:focus,input[type='password']:focus{border-color:var(--conalep);box-shadow:0 0 0 4px rgba(0,132,61,.12);}
input[type='submit']{border:0;border-radius:999px;background:linear-gradient(135deg,var(--conalep-dark),var(--conalep));color:#fff;font-weight:800;padding:11px 24px;cursor:pointer;box-shadow:0 12px 24px rgba(0,87,42,.24);}
@media(max-width:760px){
  .pagos-shell{width:100%;margin:0 auto 24px;}
  #cont.pagos-card,#cont{width:100% !important;border-radius:0 !important;padding:16px !important;}
  .pagos-topbar{align-items:flex-start;flex-direction:column;}
  .pagos-topbar h2{font-size:24px;}
  .student-card{align-items:flex-start;}
  #cont table,#cont tbody,#cont tr,#cont td{display:block;width:100% !important;}
  #cont td{ text-align:center !important;}
}

/* === Vista solicitada: solo dos tarjetas principales ===
   No cambia formularios ni datos; solo acomoda visualmente las tablas existentes. */
.fichas-section{
  margin:24px 0;
  border:1px solid #dcebe2;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,87,42,.10);
  text-align:left;
}
.fichas-section-head{
  padding:18px 22px;
  background:linear-gradient(135deg,var(--conalep-dark),var(--conalep));
  color:#fff;
}
.fichas-section-head span{
  display:block;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.02em;
}
.fichas-section-head p{
  margin:6px 0 0;
  font-size:13px;
  color:rgba(255,255,255,.88);
  font-weight:600;
}
.fichas-opcionales .fichas-section-head{
  background:linear-gradient(135deg,#1f2937,#4b5563);
}
.fichas-list{
  padding:8px 18px 18px;
  background:#fbfdfc;
}
#cont .fichas-section table.ficha-linea{
  width:100% !important;
  margin:10px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  border-collapse:collapse !important;
}
#cont .fichas-section table.ficha-linea tr.fila-oculta-diseno{
  display:none !important;
}
#cont .fichas-section table.ficha-linea tr{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 150px 230px;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid #e6efe9;
}
#cont .fichas-section table.ficha-linea:last-child tr:last-child{
  border-bottom:0;
}
#cont .fichas-section table.ficha-linea td{
  display:block;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
  font-size:14px !important;
  text-align:left !important;
}
#cont .fichas-section table.ficha-linea h4,
#cont .fichas-section table.ficha-linea b{
  font-size:16px !important;
  color:var(--conalep-dark) !important;
  margin:0 !important;
}
#cont .fichas-section table.ficha-linea td:nth-child(2){
  text-align:center !important;
  font-size:17px !important;
  font-weight:900 !important;
  color:#111827 !important;
}
#cont .fichas-section table.ficha-linea td:last-child{
  text-align:right !important;
}
#cont .fichas-section table.ficha-linea td:last-child table,
#cont .fichas-section table.ficha-linea td:last-child tbody,
#cont .fichas-section table.ficha-linea td:last-child tr,
#cont .fichas-section table.ficha-linea td:last-child td{
  display:inline-block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#cont .fichas-section button{
  min-width:150px;
  border-radius:999px;
  padding:11px 18px;
  color:#fff;
}
#cont .fichas-section button::after{
  content:' Generar ficha';
  color:#fff;
  font-weight:900;
  vertical-align:middle;
}
#cont .fichas-opcionales font[color='red']{
  display:block;
  margin-top:5px;
  color:#92400e !important;
  font-size:12px !important;
  font-weight:700;
}
@media(max-width:760px){
  .fichas-list{padding:6px 14px 14px;}
  #cont .fichas-section table.ficha-linea tr{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
    padding:16px 0;
  }
  #cont .fichas-section table.ficha-linea td,
  #cont .fichas-section table.ficha-linea td:nth-child(2),
  #cont .fichas-section table.ficha-linea td:last-child{
    text-align:left !important;
  }
  #cont .fichas-section button{width:100%;}
}


/* Corrección: que el acomodo de filas aplique solo a la tabla principal de cada ficha,
   sin romper tablas internas donde viene el botón de imprimir. */
#cont .fichas-section table.ficha-linea > tbody > tr,
#cont .fichas-section table.ficha-linea > tr{
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) 150px 230px;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid #e6efe9;
}
#cont .fichas-section table.ficha-linea > tbody > tr.fila-oculta-diseno,
#cont .fichas-section table.ficha-linea > tr.fila-oculta-diseno{
  display:none !important;
}
#cont .fichas-section table.ficha-linea td table tr,
#cont .fichas-section table.ficha-linea td table tbody,
#cont .fichas-section table.ficha-linea td table td{
  display:inline-block !important;
  width:auto !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}
#cont .fichas-section table.ficha-linea td table button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin-right:12px;
}