/* ── Base ──────────────────────────────────────────────────────────── */
body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin: 20px;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
    font-size: 20px;
    font-weight: normal;
}

.container {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow-x: auto;
}

/* ── Tabla ──────────────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

th, td {
    border: 1px solid #ccc;
    padding: 4px;
    height: 25px;
    min-width: 30px;
}

/* Cabeceras de Regiones */
.h-centro    { background-color: #87CEEB; }
.h-chontalpa { background-color: #90EE90; }
.h-sierra    { background-color: #FFDAB9; }
.h-carmen    { background-color: #FFFF00; }
.h-delicias  { background-color: #DA70D6; }
.h-norte     { background-color: #DA70D6; }
.h-allende   { background-color: #FFD700; }
.h-merida    { background-color: #FFA07A; }

/* ── Íconos ─────────────────────────────────────────────────────────── */
.square {
    width: 12px;
    height: 12px;
    display: inline-block;
}
.circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #555;
}

/* ── Paleta de colores de usuario ───────────────────────────────────── */
.bg-green       { background-color: #92D050; }
.bg-yellow      { background-color: #FFFF00; }
.bg-pink        { background-color: #ff69b4; }
.bg-peach       { background-color: #F1A983; }
.bg-blue        { background-color: #00B0F0; }
.bg-orange      { background-color: #FFC000; }
.bg-gray        { background-color: #F2CEEF; }
.bg-violet      { background-color: #D86DCD; }
.bg-lightblue   { background-color: #DAE9F8; }
.bg-m-blue      { background-color: #5bc0de; }
.bg-bluemarco   { background-color: #94DCF8; }
.bg-purple      { background-color: #D86DCD; }

/* ── Columna de Apoyo ───────────────────────────────────────────────── */
.apoyo-col {
    background-color: #1a4d6d;
    color: white;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
}

/* ── Sección de Listado Inferior ────────────────────────────────────── */
.staff-lists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.list-group h3 {
    font-size: 14px;
    color: #2e75b6;
    border-bottom: 1px solid #2e75b6;
    margin-bottom: 5px;
}

.list-item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.id-num { width: 25px; font-weight: bold; }

/* ── Colores de nombres Callcenter (sección listados) ───────────────── */
.cc-green     { background-color: #92D050; }
.cc-blue      { background-color: #5bc0de; }
.cc-bluemarco { background-color: #94DCF8; }
.cc-peach     { background-color: #F1A983; }
.cc-yellow    { background-color: #FFFF00; }
.cc-orange    { background-color: #FFC000; }
.cc-pink      { background-color: #F2CEEF; }
.cc-lightblue { background-color: #DAE9F8; }
.cc-m-blue    { background-color: #5bc0de; }
.cc-purple    { background-color: #D86DCD; }