/*
 * Categorías como etiquetas de color.
 *
 * En su propio archivo porque lo usan el PANEL y las páginas PÚBLICAS: el listado de
 * reportes y la vista de un reporte muestran las mismas categorías que las tablas del
 * panel. Estaba dentro de css/dashboard/home.css, que en público no se carga, así que
 * las etiquetas salían sin estilo.
 *
 * El número de color lo asigna components/Etiquetas.php a partir de la posición de la
 * categoría en su tabla, así que el color de cada una es SIEMPRE el mismo, en el panel
 * y en el sitio público.
 */

/* --- Categorías como etiquetas (components/Etiquetas.php) ---

   Antes era un texto corrido separado por comas. En la tabla de suscriptores hay
   filas con QUINCE categorías, y ahí no se distingue dónde acaba una y empieza la
   siguiente: «Soil & land» y «Smell/odors» ya traen espacios y signos dentro. */

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.etiqueta {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    background: #f6f7f9;
    font-size: 11px;
    line-height: 1.5;
    color: #5f6b76;
    /* Que no se parta «Heavy equipment» a mitad de etiqueta. */
    white-space: nowrap;
}

/* Un color por categoría. El número lo asigna components/Etiquetas.php a partir de
   la posición de la categoría en su tabla, así que el color de cada una es SIEMPRE
   el mismo, en todas las páginas y entre recargas.

   Fondos claros con el texto en la versión oscura del mismo tono, y no colores
   planos: son etiquetas pequeñas dentro de una tabla, y a 11 px el texto blanco
   sobre color saturado se lee peor. El borde va un paso más oscuro que el fondo
   para que la etiqueta tenga silueta propia cuando hay quince seguidas. */

.etiqueta-c0  { background: #eaf2fd; border-color: #cfe0f7; color: #2f6199; }
.etiqueta-c1  { background: #e8f6f1; border-color: #c9e8dc; color: #1e7a5c; }
.etiqueta-c2  { background: #fdf0e6; border-color: #f6dcc4; color: #9a5b1e; }
.etiqueta-c3  { background: #f3ecfb; border-color: #ded0f2; color: #63459b; }
.etiqueta-c4  { background: #fdecf1; border-color: #f7ccd9; color: #a33359; }
.etiqueta-c5  { background: #eef7e6; border-color: #d7ecc4; color: #4d7a1e; }
.etiqueta-c6  { background: #e6f6f9; border-color: #c4e6ee; color: #1c6b7d; }
.etiqueta-c7  { background: #fbf3e0; border-color: #f0e2ba; color: #8a6a15; }
.etiqueta-c8  { background: #f0eef9; border-color: #d5d0ee; color: #4a4899; }
.etiqueta-c9  { background: #fceeea; border-color: #f5d3c9; color: #a3462f; }
.etiqueta-c10 { background: #eaf4f0; border-color: #cbe4da; color: #2b6b57; }
.etiqueta-c11 { background: #f7eef7; border-color: #ead0e8; color: #8a3d84; }
.etiqueta-c12 { background: #eff1f4; border-color: #d8dde3; color: #4f5a66; }
.etiqueta-c13 { background: #f4f2e8; border-color: #e2decb; color: #6b6435; }
.etiqueta-c14 { background: #e9f0fb; border-color: #ccdcf5; color: #35528f; }
.etiqueta-c15 { background: #fdf1f0; border-color: #f6d4d1; color: #a13c36; }


/* --- Estado de un reporte (Reports::getStatus()) ---

   Antes salía como `<span style="background:red; color:#fff; padding:5px">`, con los
   colores puros del navegador a saturación completa. En la rejilla de tarjetas del
   listado, ese bloque rojo era lo más llamativo de la página y le robaba la atención al
   título del reporte. Mismo tono suave que las etiquetas de categoría.

   Está en la hoja compartida porque el estado se muestra en el panel y en público. */

.estado-pill {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.estado-pill-0 { background: #fdecec; border-color: #f5c2c2; color: #b3312d; }  /* Unresolved  */
.estado-pill-1 { background: #fff6e6; border-color: #f0d9a8; color: #8a6100; }  /* In progress */
.estado-pill-2 { background: #e8f6f1; border-color: #c3e6d8; color: #1b7d55; }  /* Resolved    */