@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --wood-dark:#1B1C1E;
  --wood-dark-2:#26282B;
  --paper:#F2F3F5;
  --paper-2:#FFFFFF;
  --ink:#1B1C1E;
  --ink-soft:#6B7280;
  --line:#E1E3E8;
  --accent:#F1E803;
  --accent-soft:#FDFAD1;
  --ok:#3F8F5C;
  --ok-soft:#E1F1E6;
  --warn:#B5842A;
  --warn-soft:#F6EAD1;
  --danger:#C24B42;
  --danger-soft:#F7E3E0;
  --radius:10px;
  --shadow:0 2px 10px rgba(20,22,25,0.06);
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:14px;}
h1,h2,h3,.brand{font-family:'Fraunces',serif;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;background:var(--wood-dark);display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--paper-2);width:380px;max-width:92vw;border-radius:16px;padding:40px 36px;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center;}
.login-card img{margin-bottom:14px;}
.login-card h2{margin:0 0 4px;}

/* ===== APP LAYOUT (sin sidebar — navegación por íconos) ===== */
.app{display:flex;min-height:100vh;}
.main{flex:1;padding:26px 30px;max-width:1100px;margin:0 auto;width:100%;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.topbar h2{margin:0;}

.icon-nav-btn{width:38px;height:38px;border-radius:10px;background:var(--wood-dark);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;flex-shrink:0;}
.icon-nav-btn:hover{filter:brightness(1.15);}
.logo-app{width:100px;height:100px;object-fit:contain;border-radius:16px;flex-shrink:0;}

/* ===== PANEL DE INICIO / CATEGORÍAS (navegación por íconos) ===== */
.icono-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;}
.icono-tile{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);text-align:center;}
.icono-tile:hover{border-color:var(--accent);}
.icono-tile.frecuente{background:var(--accent-soft);border-color:var(--accent-soft);}
.icono-tile.frecuente .icono-tile-icono{color:#705E00;}
.icono-tile-icono{font-size:26px;color:var(--ink-soft);}
.icono-tile-nombre{font-size:11.5px;font-weight:500;line-height:1.25;}
.icono-tile-estrella{position:absolute;top:8px;right:8px;font-size:14px;background:none;border:none;cursor:pointer;padding:2px;color:var(--ink-soft);}
.icono-tile-estrella.activa{color:var(--warn);}
.seccion-titulo{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:0 0 10px;font-weight:600;}

/* ===== COMPONENTES ===== */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.3px;color:var(--ink-soft);margin-bottom:5px;font-weight:500;}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:var(--paper);font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}

.btn{background:var(--accent);color:#0E2A38;border:none;border-radius:8px;padding:10px 16px;font-size:13.3px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;display:inline-block;}
.btn:hover{filter:brightness(0.96);}
.btn.secondary{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);}
.btn.danger{background:var(--danger);color:#fff;}

/* Cuando hay varios botones dentro de una misma celda de tabla, cada uno necesita su propio espacio (si no, quedan amontonados al envolver en pantallas angostas) */
td .btn, td a.btn{ margin:3px 5px 3px 0; }

.error-box{background:var(--danger-soft);color:var(--danger);padding:10px 12px;border-radius:8px;font-size:12.8px;margin-bottom:14px;}

table{width:100%;border-collapse:collapse;background:var(--paper-2);border-radius:var(--radius);overflow:hidden;}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;}
th{background:#FBFAF8;font-size:10.7px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}

.pill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;display:inline-block;}
.pill.ok{background:var(--ok-soft);color:var(--ok);}
.pill.off{background:#EEF0F3;color:#555B63;}
.pill.mp{background:var(--accent-soft);color:#705E00;}
.pill.pt{background:#F1EAF6;color:#7A4EA0;}
.pill.mix{background:var(--warn-soft);color:var(--warn);}
.miniatura-catalogo{width:50px;height:50px;object-fit:cover;border-radius:8px;cursor:zoom-in;border:1px solid var(--line);}

/* ============ RESPONSIVE: TABLET Y MÓVIL ============ */
@media (max-width: 900px) and (min-width: 641px){
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .icono-grid{ grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
}

@media (max-width: 640px){
  .main{ padding:16px 14px; }
  .topbar{ flex-wrap:wrap; gap:10px; }
  .topbar h2{ font-size:17px; }
  body [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .card{ padding:14px 16px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll table{ min-width:600px; }
.table-scroll table td:last-child{ white-space:nowrap; }
  [style*="display:flex"]{ flex-wrap:wrap !important; }
  [style*="display:flex"] > .field{ flex:1 1 100% !important; }
  .login-card{ width:92vw; padding:28px 22px; }
  .icono-grid{ grid-template-columns:repeat(3,1fr); }
  .logo-app{ width:64px; height:64px; border-radius:12px; }
  [style*="float:right"]{ float:none !important; display:inline-block !important; margin-bottom:6px !important; }
}