:root{
  --bg: #D9D9D9;
  --surface: #ffffff;
  --muted: #8b8b8b;
  --text: #111111;
  --accent: #000000;
  --card-border: #ececec;
  --shadow: 0 8px 30px rgba(0,0,0,0.06);
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial;}


a {
  color:var(--accent);
  text-decoration:none;
  background-color: #8E8E8E;
  padding: 3px 8px;
  border: 1px solid #6F6F6F;
  border-radius: 5px;
  font-weight:700;
  transition: all .25s ease;

}
a:hover {
  color: white;
  background-color: #000000;
}
input[type=button], input[type=submit] {
  background-color: #8E8E8E;
  padding: 5px 20px;
  border: 1px solid #6F6F6F;
  border-radius: 5px;
  font-weight:700;
  font-size: 1rem;
  transition: all .25s ease;
}
input[type=button]:hover, input[type=submit]:hover {
  color: white;
  background-color: #000000;
}

.app{max-width:1200px;margin:20px auto;padding:18px;}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand h1{margin:0;font-size:1.1rem;font-weight:700;color:var(--accent)}
.layout{display:grid;grid-template-columns:260px 1fr;gap:18px}
@media (max-width:980px){ .layout{grid-template-columns:1fr} }
.sidebar{background:var(--surface);padding:14px;border-radius:var(--radius);border:1px solid var(--card-border);box-shadow:var(--shadow)}
.nav-item{display:block;padding:10px;border-radius:8px;color:var(--accent);font-weight:600;margin-bottom:8px}
.content{display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);padding:16px;border-radius:var(--radius);border:1px solid var(--card-border);box-shadow:var(--shadow)}
.card-title{font-weight:700;margin-bottom:8px;color:var(--accent)}
.tbl{width:100%;display:block;margin-bottom:12px;}
.tbl-head{display:block;margin-bottom:8px}
.tbl-body{display:block}
.tbl-row{display:flex;gap:12px;align-items:top;padding:5px;border-radius:10px;border:1px transparent;background:transparent}
.tbl-row + .tbl-row{margin-top:2px}
.tbl-cell{flex:1 1 220px;padding:5px 0 ;}
.tbl-cell1{flex:1 1 220px;padding:2px 2px; border: 1px solid #808080;border-radius: 8px; background-color: #ADADAD;}
.tbl-headcell{font-weight:700;color:var(--accent);font-size:0.95rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row.full{grid-column:1/-1}
label{font-size:0.9rem;color:var(--muted)}
input[type="text"],
select,
textarea,
input[type="file"],
input[type="password"]
{padding:5px;border-radius:8px;border:1px solid var(--card-border);background:#fff}
textarea{min-height:90px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid var(--card-border);background:#fff;font-weight:600}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.text-bold{font-weight:700}
.text-bolder{font-weight: bolder;font-size: 1.5em}
.text-italic{font-style:italic}
.text-underline{text-decoration:underline}
.text-center{text-align:center}
.footer{margin-top:18px;text-align:center;color:var(--muted);font-size:0.92rem}
.cuadro { width: 50%;margin: 0 auto; }



@media (max-width:720px){
  .tbl-row{flex-direction:column;align-items:stretch;padding:10px}
  .form-grid{grid-template-columns:1fr}
  .tbl-cell{flex:1 1 20px;}
  .cuadro { width: 95%; }
}

.img-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 18px !important;
    width: 100%;
    padding: 10px;
}

/* La card de imagen */
.img-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow);
    text-align: center;
}

/* Imagen */
.img-card img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Botón debajo de la imagen */
.img-action {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--accent);
}

/* IMPORTANTÍSIMO:
   Evitar que .tbl-row o contenedores flex interfieran */
.tbl-row .img-grid,
.tbl-cell .img-grid,
.text-center .img-grid,
div .img-grid {
    display: grid !important;
}
.propi {
          width: 80%;margin: 0 auto;
        }
        @media (max-width:720px){
          .propi { width: 95%; }
        }