/* Estilos globales */
:root{ --rojo:#d32f2f; --rojo-osc:#b71c1c; --gris:#f0f0f0; }
*{ box-sizing:border-box; }
body{
  margin:0; font-family:Arial, sans-serif; color:#222;
  min-height:100vh; display:flex; flex-direction:column;
  background:#ffffff;
}
header{
  display:flex; justify-content:flex-end; align-items:center;
  padding:10px 16px; background:rgba(255,255,255,.9);
  position:sticky; top:0; border-bottom:1px solid #eee; z-index:5;
}
header img{ height:48px; width:auto; object-fit:contain; }
.main{ 
  flex:1; display:flex; align-items:center; justify-content:center; 
  padding:24px; background-size:cover; background-position:center; 
}
.card{
  width:100%; max-width:460px; padding:20px; border-radius:16px;
  background:rgba(255,255,255,.92); backdrop-filter: blur(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
h1{ margin:0 0 12px; text-align:center; font-size:22px; }
.field{ margin-bottom:12px; }
.input, .select, .button{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ccc;
  font-size:16px;
}
.input, .select{ background:var(--gris); }
.button{
  background:var(--rojo); color:#fff; border:none; font-weight:700; cursor:pointer;
}
.button:hover{ background:var(--rojo-osc); }
.meta{ font-size:14px; color:#444; margin-bottom:8px; text-align:center; }

/* Tabla */
.container{ max-width:1200px; margin:0 auto; padding:20px; }
.table-wrap{ overflow:auto; background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); }
table{ width:100%; border-collapse:collapse; min-width:800px; }
th, td{ padding:10px 12px; border-bottom:1px solid #eee; text-align:center; }
thead th{ position:sticky; top:0; background:#fafafa; z-index:1; }
.badge{ padding:4px 10px; border-radius:999px; font-size:12px; color:#fff; display:inline-block; }
.verde{ background:#2e7d32; }
.amarillo{ background:#f9a825; }
.rojo{ background:#c62828; }
.row-verde{ background:#e9f7ef; }
.row-amarillo{ background:#fff8e1; }
.row-rojo{ background:#ffebee; }

.filters{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.filters select{ padding:10px 14px; border-radius:10px; border:1px solid #ccc; font-size:16px; }

.actions button{ padding:8px 12px; border-radius:8px; border:none; background:var(--rojo); color:#fff; cursor:pointer; }
.actions button:hover{ background:var(--rojo-osc); }

/* ✅ Responsive especial para móviles */
@media (max-width:600px){
  body {
    padding: 0;
    margin: 0;
  }
  .main {
    padding: 0;
    display: block; /* evita que lo centre con flex */
  }
  .card {
    width: 100%;
    max-width: none;
    min-height: 100vh; /* que ocupe toda la altura del celular */
    border-radius: 0;  /* quitar esquinas redondeadas */
    box-shadow: none;  /* quitar sombra en móvil */
    padding: 24px;
  }
  h1 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .meta {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .input, .select, .button {
    font-size: 18px;
    padding: 14px 16px;
  }
  .button {
    font-size: 20px;
    padding: 16px;
  }
}