:root{
  --bg:#173F8A; --fg:#e2e8f0; --muted:#94a3b8; --card:#0176DE; --accent:#E3AE00; --err:#ef4444;
  /* Form vars */
  --input-text:#0f172a;      /* texto oscuro */
  --input-bg:#ffffff;        /* fondo input */
  --input-ph:#334155;        /* placeholder oscuro */
  --input-bd:#173F8A;        /* borde acorde a bg */
  --focus-ring:rgba(1,118,222,.35);

  /* Nuevo: altura uniforme para inputs/selects en edición */
  --control-h:44px;
}

/* Reset básico */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--fg);
  display:flex; flex-direction:column;
}

/* Contenedor general */
.container{ max-width:1060px; margin:2rem auto; padding:0 1rem; }
main.container{ flex:1 0 auto; } /* empuja el footer */

/* --- Panel admin ancho --- */
.container-wide {
  max-width: clamp(1280px, 96vw, 1800px);
}
.container-wide .card{
  padding: 1.25rem 1.5rem;
}
.container-wide .table {
  table-layout: auto;
}

/* Topbar */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem; background:#0b1220; border-bottom:1px solid #1f2937;
}
.topbar a{ color:var(--fg); text-decoration:none; }

/* Botón nav (arriba a la derecha) */
.topbar a.nav-cta {
  display: inline-block;
  padding: .55rem .95rem;
  border-radius: 10px;
  background: var(--accent);
  color: #04130b;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.topbar a.nav-cta:hover { filter: brightness(1.05); }
.topbar a.nav-cta:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Solo el título centrado */
.topbar .topbar-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* Card */
.card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:14px;
  padding:1rem;
  margin-block:1rem;
  overflow:hidden;
}

/* Tablas generales */
table.table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.table th,
.table td{
  padding:.55rem .5rem;
  border-bottom:1px solid #1f2937;
  vertical-align:top;
}
.table th{
  text-align:left;
  font-weight:700;
}
.table td input,
.table td select{
  width:100%;
  max-width:100%;
}
.table td.actions{
  width:1%;
  white-space:nowrap;
}

/* Permite usar <form> por fila sin romper la tabla */
.table .row-form{ display:contents; }

/* Scroll horizontal en móvil si no cabe */
@media (max-width:720px){
  .card .table{ display:block; overflow-x:auto; }
}

/* Formularios base */
label{ display:block; margin:.5rem 0; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"]{
  width:100%;
  padding:.7rem .8rem;
  border-radius:10px;
  border:1px solid var(--input-bd);
  background:var(--input-bg);
  color:var(--input-text);
}
input::placeholder{ color:var(--input-ph); opacity:1; }
input:focus{
  outline:none;
  border-color:#0176DE;
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* Botones */
button{
  padding:.8rem 1rem;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#04130b;
  font-weight:700;
  cursor:pointer;
}
button:hover{ filter:brightness(1.05); }
button:focus-visible{ outline:2px solid #04130b; outline-offset:2px; }

/* Alerts */
.alert{
  padding:.8rem 1rem;
  border-radius:10px;
}
.alert-error{
  background:#3c0d0d;
  border:1px solid #7f1d1d;
  color:#fecaca;
}
.alert-ok{
  background:#0d2f19;
  border:1px solid #14532d;
  color:#bbf7d0;
}

/* Perfil */
ul.profile{
  list-style:none;
  padding:0;
  margin:0;
}
ul.profile li{
  padding:.25rem 0;
  color:#fff;
}
ul.profile strong{
  color:var(--fg);
}

/* Footer */
.site-footer{
  flex-shrink:0;
  background:#9f9f9f;
  color:#fff;
  padding:15px 90px;
}
.footer-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-left{
  font-family:Roboto,system-ui,sans-serif;
  font-size:clamp(13px,1.5vw,15px);
  line-height:1.35;
  opacity:.95;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
.footer-left a{
  font-family:Roboto,system-ui,sans-serif;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.6);
}
.footer-right img{
  width:clamp(60px,20vw,160px);
  height:auto;
  object-fit:contain;
}

/* Botón flotante admin */
.btn-admin{
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  z-index:1000;
  display:inline-block;
  padding:.6rem 1rem;
  border:0;
  border-radius:10px;
  background:#d4a10d;
  color:#111;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  cursor:pointer;
}
.btn-admin:hover{ filter:brightness(1.05); }
@media (max-width:480px){
  .btn-admin{
    padding:.5rem .8rem;
    font-size:.95rem;
    top:max(10px,env(safe-area-inset-top));
    right:max(10px,env(safe-area-inset-right));
  }
}

/* Tabs admin */
.admin-tabs{
  display:flex;
  gap:.5rem;
  margin:1rem 0;
  flex-wrap:wrap;
}
.admin-tabs a{
  padding:.5rem .8rem;
  border-radius:10px;
  text-decoration:none;
  background:#0b1220;
  color:#e2e8f0;
  border:1px solid #1f2937;
}
.admin-tabs a.active{
  background:var(--accent);
  color:#04130b;
  font-weight:700;
}

/* Utilidades */
.inline{
  display:flex;
  gap:.4rem;
  align-items:center;
  flex-wrap:wrap;
}
.w-xxs{ width:70px; }
.w-xs{ width:110px; }
.w-s{  width:160px; }
.w-m{  width:220px; }
.w-l{  width:300px; }

/* Crear usuario: que los campos no se expandan a 100% dentro de la card principal */
.card form.create-user input,
.card form.create-user select,
.card form.create-user button{
  width:auto;
  max-width:none;
}

/* --- Tabla de Centros --- */
.centros-table{ table-layout:auto !important; }
.centros-table th,
.centros-table td{
  padding:.45rem .5rem;
  vertical-align:top;
  word-break:break-word;
}
.centros-table td input,
.centros-table td select{
  width:100%;
  max-width:100%;
  min-width:0;
}
.centros-table col.col-save{ width:5%; }
.centros-table col.col-del{ width:5%; }
.centros-table td.actions{
  width:1%;
  white-space:nowrap;
}

/* Columna "Activo" en Centros */
.centros-table th:nth-child(11),
.centros-table td:nth-child(11){
  text-align:center;
  white-space:nowrap;
}
.centros-table td:nth-child(11) label.inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* En móvil: scroll si no cabe */
@media (max-width:900px){
  .card .centros-table{ display:block; overflow-x:auto; }
}

/* --- Usuarios: vista lectura + modal de edición --- */
.usuarios-table{
  table-layout:auto !important;
}
.usuarios-table th,
.usuarios-table td{
  white-space:normal;
  word-break:break-word;
  line-height:1.25;
  padding:.5rem .3rem;
}

/* Solo texto en la tabla principal; form oculto */
.usuarios-table .row-form input:not([type="hidden"]),
.usuarios-table .row-form select,
.usuarios-table .row-form button{
  display:none !important;
}
.usuarios-table .cell-text{ display:block; }

/* Columna acciones compacta */
.usuarios-table td.actions{
  width:1%;
  white-space:nowrap;
}

/* Botón Editar */
.btn-edit{
  padding:.45rem .75rem;
  border-radius:8px;
  font-weight:700;
  background:#0b1220;
  color:#e2e8f0;
  border:1px solid #1f2937;
  cursor:pointer;
}
.btn-edit:hover{ filter:brightness(1.08); }

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.modal.show{ display:flex; }

.modal-card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:16px;
  width:min(920px,96vw);
  max-height:90vh;
  overflow:auto;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 25px 80px rgba(0,0,0,.45);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
}
.modal-title{
  margin:0;
  font-size:1.25rem;
}
.modal-close{
  background:transparent;
  color:#fff;
  border:0;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}

/* Mostrar campos dentro del modal */
.modal .row-form input:not([type="hidden"]),
.modal .row-form select,
.modal .row-form button{
  display:block !important;
  width:90%;
  max-width:90%;
}
.modal .cell-text{ display:none; }

.modal-body form{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(2, minmax(12,1fr));
}
.modal-body form .span-12{ grid-column:span 12; }
.modal-body form .span-6{  grid-column:span 6; }
.modal-body form .span-4{  grid-column:span 4; }
.modal-body form .span-3{  grid-column:span 3; }

@media (max-width:900px){
  .modal-body form{ grid-template-columns:1fr; }
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  margin-top:.5rem;
}

/* FIX: botones en tablas */
.table td button{
  width:auto;
  padding:.45rem .7rem;
  font-size:.95rem;
  white-space:nowrap;
  line-height:1.1;
  border-radius:8px;
}

/* --- Reporte de asistencia --- */
.reporte-table{
  border-collapse:collapse;
}
.reporte-table th,
.reporte-table td{
  border-bottom:2px solid #0c2f6f;
  padding-top:.65rem;
  padding-bottom:.65rem;
}
.reporte-table tr:last-child th,
.reporte-table tr:last-child td{
  border-bottom:0;
}

/* "Ver mapa" / enlaces reporte */
.reporte-table a,
.reporte-table a:visited{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
}
.reporte-table a:hover,
.reporte-table a:focus{
  color:#ffd24a;
  text-decoration-thickness:2px;
  outline:none;
}

/* Caja "Crear nuevo usuario" */
.create-user{
  width:100%;
  box-sizing:border-box;
  padding:1.5rem 2rem;
  margin:1rem 0 2rem;
  border:2px solid #fff;
  border-radius:0;
  background:transparent;
}
.card h2 + form.create-user{
  margin-top:.5rem;
}

/* Botones de marcar asistencia */
.btn-pair{ display:flex; gap:.75rem; flex-wrap:wrap; }
.btn.mark{
  padding:.65rem 1rem;
  border-radius:10px;
  font-weight:700;
  line-height:1.1;
  background:var(--accent);
  color:#04130b;
  border:0;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.btn.mark.outline{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--fg);
}
.btn.mark:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Toasts */
.toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:10000;
  padding:.8rem 1rem;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  white-space:pre-line;
  opacity:0;
  transform:translateY(16px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.toast-entrada{
  background:#16a34a;
  color:#fff;
  border:2px solid #22c55e;
}
.toast-salida{
  background:var(--accent);
  color:#04130b;
  border:2px solid #fcd34d;
}

/* ===================================================================== */
/* ========== NUEVO: Tarjeta de edición  ===== */
/* ===================================================================== */

<tr class="edit-row" id="edit-<?= (int)$r['id'] ?>" hidden>
  <td colspan="13">
    <div class="edit-card">
      <div class="edit-card-head">
        <strong>Editar usuario #<?= (int)$r['id'] ?></strong>
        <button type="button"
                class="btn-close"
                data-id="<?= (int)$r['id'] ?>">
          Cerrar
        </button>
      </div>

      <form method="post" class="edit-grid">
        <!-- campos tal como los tienes ahora -->
        ...
        <label>Nuevo password
          <input type="password" name="new_password" placeholder="Opcional" class="w-240">
        </label>

        <label class="switch-inline">
          <input type="checkbox" name="is_active" <?= $r['is_active'] ? 'checked' : '' ?>>
          <span>Activo</span>
        </label>

        <div class="edit-actions">
          <button type="submit" class="btn">Guardar</button>
          <button type="button"
                  class="btn btn-secondary btn-cancel"
                  data-id="<?= (int)$r['id'] ?>">
            Cancelar
          </button>
        </div>
      </form>
    </div>
  </td>
</tr>

/* Tabla de Tipos de Práctica (similar a Centros) */
.practicas-table{
  table-layout:auto !important;
}
.practicas-table th,
.practicas-table td{
  padding:.45rem .5rem;
  vertical-align:top;
  word-break:break-word;
  line-height:1.25;
}

@media (max-width:900px){
  .card .practicas-table{
    display:block;
    overflow-x:auto;
  }
}

/* Forzar anchos fijos dentro de .create-user */
.card form.create-user .w-xxs{ width:70px; }
.card form.create-user .w-xs{  width:110px; }
.card form.create-user .w-s{   width:160px; }
.card form.create-user .w-m{   width:220px; }
.card form.create-user .w-l{   width:300px; }