:root{ --green:#2e7d32; --light:#e8f5e9; --white:#fff; --accent:#66bb6a;}
*{box-sizing:border-box}
body{margin:0; font-family:'Poppins',sans-serif; background:linear-gradient(to bottom,#A5D6A7,#E8F5E9); min-height:100vh;}
a{color:inherit; text-decoration:none}
@media (max-width: 840px){
  .card .grid-2 { grid-template-columns: 1fr !important; }
}

.container{max-width:1000px; margin:0 auto; padding:1rem}
.nav{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:1rem 0}
.nav a{ color:#fff; background:linear-gradient(135deg,#66bb6a,#43a047); padding:.5rem 1rem; border-radius:24px; font-weight:600; box-shadow:0 5px 12px rgba(67,160,71,.35)}
.card{background:#fff; border-radius:20px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:1.2rem}
.grid{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center}
.btn{background:linear-gradient(135deg,#66bb6a,#43a047); color:#fff; border:none; padding:.7rem 1.2rem; border-radius:999px; font-weight:700; cursor:pointer; box-shadow:0 6px 14px rgba(67,160,71,.35); transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.input{width:100%; padding:.8rem 1rem; border-radius:14px; border:2px solid #a5d6a7; outline:none; font-size:1rem; transition:border .2s, box-shadow .2s}
.input:focus{border-color:#43a047; box-shadow:0 0 0 4px rgba(67,160,71,.15)}
.badge{display:inline-block; background:#c8e6c9; color:#1b5e20; padding:4px 10px; border-radius:999px; font-size:.85rem; font-weight:700}
.progress{width:100%; height:14px; background:#e0e0e0; border-radius:999px; overflow:hidden}
.progress > div{height:100%; background:linear-gradient(90deg,#81C784,#388E3C)}
.h1{color:#1b5e20; text-align:center}
.header{display:flex; align-items:center; justify-content:space-between; color:#1b5e20; margin-bottom:1rem}
/* Wrapper para tablas responsivas */
.table-wrap {
  width: 100%;
  overflow-x: auto;             /* Scroll horizontal si hiciera falta */
  -webkit-overflow-scrolling: touch;
}

/* Tabla base */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;           /* Deja que el navegador ajuste anchos */
}
.table th, .table td {
  padding: .6rem;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  word-break: break-word;       /* Evita que textos largos rompan el layout */
}

/* Botones compactos dentro de tablas */
.table .actions .btn,
.table .actions form {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
}

/* 🔁 Modo "cards" en móviles */
@media (max-width: 640px) {
  .table thead {
    display: none; /* Oculta cabecera */
  }
  .table, .table tbody, .table tr, .table td {
    display: block;
    width: 100%;
  }
  .table tr {
    margin-bottom: 12px;
    padding: .75rem;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.03);
    background: #fff;
  }
  .table td {
    border: 0;
    padding: .35rem 0;
  }
  .table td::before {
    content: attr(data-label);  /* Muestra el nombre de la columna */
    display: block;
    font-weight: 700;
    color: #1b5e20;
    margin-bottom: 2px;
  }
  /* Ajustes visuales en acciones para que no se desborden */
  .table .actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .25rem;
  }
  .table .actions .btn {
    padding: .45rem .7rem;
    border-radius: 12px;
  }

  #toast-root{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{min-width:280px;max-width:92vw;background:#fff;border-left:6px solid #2e7d32;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:12px 14px 12px 12px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;color:#1b5e20;pointer-events:auto;animation:toast-in .25s ease-out}
.toast .icon{width:40px;height:40px;display:grid;place-items:center;background:#e8f5e9;border-radius:50%;font-size:20px}
.toast .content .title{font-weight:800;margin:0;color:#1b5e20}
.toast .content .msg{margin:2px 0 0;color:#2e7d32;font-size:.95rem}
.toast .close{cursor:pointer;opacity:.7;font-weight:800;user-select:none}
.toast.success{border-left-color:#2e7d32}.toast.info{border-left-color:#2e7d32}.toast.error{border-left-color:#b71c1c}.toast.error .icon{background:#ffebee;color:#b71c1c}
@keyframes toast-in{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.eco-confetti{position:fixed;inset:0;pointer-events:none;z-index:9998}
.eco-leaf{position:absolute;font-size:18px;animation:fall 1.2s linear forwards}
@keyframes fall{to{transform:translateY(100vh) rotate(240deg);opacity:0}}

}