/* Estilos del Sistema de Incidencias Municipales.
   Extraídos del monolito original (legacy/) sin cambios. */

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --verde: #28a745;
  --amarillo: #ffc107;
  --naranja: #fd7e14;
  --rojo: #dc3545;
  --gris: #6c757d;
  --primario: #006657;
  --primario-claro: #008f7a;
  --oscuro: #1a202c;
  --fondo: #f0f4f8;
  --borde: #e2e8f0;
}
body {
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--oscuro);
  overflow: hidden;
  height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(135deg, #006657 0%, #008f7a 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  background: #fff; border-radius: 16px;
  padding: 32px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-card h1 {
  font-size: 1.4rem; color: var(--primario); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.login-card p.sub {
  color: var(--gris); font-size: 13px; margin-bottom: 24px;
}
.login-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border-bottom: 2px solid var(--borde);
}
.login-tab {
  flex: 1; padding: 10px; border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--gris);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all .15s;
}
.login-tab.active { color: var(--primario); border-bottom-color: var(--primario); }
.login-panel { display: none; }
.login-panel.active { display: block; }
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 11px; font-weight: 700;
  color: #4a5568; text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 5px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd5e0;
  border-radius: 8px; font-size: 13px; outline: none; transition: border .15s;
  background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(0,102,87,0.12);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 18px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; transition: all .15s; white-space: nowrap;
}
.btn-block { width: 100%; }
.btn-primary { background: var(--primario); color: #fff; }
.btn-primary:hover { background: var(--primario-claro); }
.btn-success { background: var(--verde); color: #fff; }
.btn-success:hover { background: #218838; }
.btn-danger { background: var(--rojo); color: #fff; }
.btn-danger:hover { background: #c82333; }
.btn-warning { background: var(--amarillo); color: #333; }
.btn-warning:hover { background: #e0a800; }
.btn-orange { background: var(--naranja); color: #fff; }
.btn-orange:hover { background: #d35400; }
.btn-secondary { background: var(--gris); color: #fff; }
.btn-secondary:hover { background: #5a6268; }
.btn-outline {
  background: transparent; border: 1px solid #cbd5e0; color: #4a5568;
}
.btn-outline:hover { background: #edf2f7; }
.btn-sm { padding: 6px 10px; font-size: 12px; }