/*
  Sistema de diseño Mazak — Desktop-first
  Colores, tipografía y componentes unificados para todas las páginas.
*/

/* Reset y base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
}

/* Paleta Mazak (variables) */
:root {
  --brand: #ff6a13;
  --brand-500: #ff7f36;
  --brand-600: #e86f2f;
  --brand-700: #e15b10;
  --accent: #3a7bd5;

  --bg: #f4f4f4;
  --surface: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #e5e7eb;
  --shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Header y navegación */
.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
  width: 100%;
  background-color: var(--surface);
  box-shadow: 0 2px 24px rgba(0,0,0,0.06);
  z-index: 9810;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.header-logo { display: inline-flex; align-items: center; gap: 10px; }
.header-logo img, .header-logo svg { height: 28px; }
.nav { display: inline-flex; align-items: center; gap: 18px; }
.nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
}
.nav a:hover { background: #f7f7f7; }

/* Contenido principal */
.main-content { padding-top: 96px; }
.container { width: 100%; max-width: 980px; margin: 0 auto; padding: 24px; }
.container-narrow { max-width: 720px; }

/* Tipografía */
h1 { margin: 24px 0 12px; font-size: 32px; color: var(--text); }
h2 { margin: 18px 0 8px; font-size: 24px; color: var(--text); }
.muted { color: var(--muted); }

/* Tarjetas y grillas */
.card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.section { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.requests { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .requests { grid-template-columns: 1fr 1fr; } }
.row.grid { grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; font-size: 13px; }
.row .item { background: #fafafa; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.label { color: var(--muted); font-size: 12px; }
.value { margin-top: 4px; }
.motivos { margin-top: 8px; background: #fffaf6; border: 1px solid #ffe3d0; color: #7a3e10; border-radius: 8px; padding: 8px; font-size: 13px; }
.link-btn { font-size: 12px; color: var(--brand); text-decoration: none; border: 1px solid var(--brand); border-radius: 6px; padding: 6px 10px; }
.empty { text-align: center; color: var(--muted); padding: 24px; }

/* Botones */
button, .btn { height: 48px; padding: 0 16px; font-size: 16px; border: none; border-radius: 12px; cursor: pointer; }
.btn-primary, button.primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn-primary:hover, button.primary:hover { background: var(--brand-700); }
.btn-secondary { background: var(--brand-500); color: #fff; }
.btn-secondary:hover { background: var(--brand-600); }
.btn-link { background: transparent; color: var(--accent); font-weight: 600; }
.back-btn { background: #6c757d; color: #fff; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; }
.back-btn:hover { opacity: 0.95; }

/* Logout/acciones superiores */
.logout { position: absolute; top: 20px; right: 24px; font-size: 14px; cursor: pointer; background: transparent; border: none; color: var(--muted); text-decoration: underline; }

/* Inputs y formularios */
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; }
textarea { resize: vertical; min-height: 80px; }
label { display: block; margin-bottom: 6px; font-weight: 600; color: #333; }
form { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: #f7f7f7; color: #333; }

/* Estados y utilidades */
#status, .status { margin-top: 14px; font-weight: 600; color: #333; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #334; font-size: 12px; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--accent); border-radius: 50%; width: 36px; height: 36px; margin: 1rem auto; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Modales */
.modal { display: none; position: fixed; z-index: 10; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); }
.modal-content { background: var(--surface); margin: auto; padding: 20px; border-radius: 10px; box-shadow: var(--shadow); width: 90%; max-width: 520px; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover, .close:focus { color: #000; text-decoration: none; }

/* Layouts específicos comunes */
.button-grid { display: grid; gap: 20px; justify-items: center; align-items: center; width: 100%; }
.button-grid .btn, .button-grid button { width: 100%; max-width: 320px; height: 72px; font-size: 18px; }
.button-grid button { background: var(--brand); color: #fff; border: none; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.button-grid button:hover { background: var(--brand-700); }
.btn-small { height: 60px; max-width: 260px; font-size: 16px; }

/* Responsivo básico (desktop-first) */
@media (max-width: 960px) {
  .container { padding: 16px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .button-grid .btn, .button-grid button { max-width: 100%; }
}

/* Compatibilidad con estilos previos */
.logo { width: 60px; height: auto; object-fit: contain; border-radius: 8px; }
.container-narrow .topbar { display:flex; align-items:center; justify-content:space-between; }
/* Evitar conflictos con headers no estandar */
header:not(.header) { position: absolute; top: 20px; left: 20px; }