/* ==========================================================================
   Tinta
   La identidad propia del portal, encima de todo lo anterior. Minimal y sin
   la estética de plantilla: negros con un toque azul, un solo acento
   (#0052ff) para lo que se toca, estados como un punto con texto en vez de
   píldoras de colores, esquinas rectas y cifras en monoespaciada.

   Para ajustar un tono se cambia la variable y nada más.
   ========================================================================== */
:root {
    /* Superficies, de la más honda a la más alta */
    --tinta-fondo:   #05060a;
    --tinta-hundido: #07080b;
    --tinta-campo:   #0a0c10;
    --tinta-sup:     #0d0f14;
    --tinta-sup2:    #131620;

    /* Líneas */
    --tinta-borde:         #1a1e27;
    --tinta-borde-fuerte:  #262b36;
    --tinta-borde-marcado: #3a404d;

    /* Texto, del más fuerte al más apagado */
    --tinta-texto-fuerte: #ffffff;
    --tinta-texto:   #eef1f6;
    --tinta-texto-2: #dde1e8;
    --tinta-texto-3: #b4bac6;
    --tinta-suave:   #8990a0;
    --tinta-apagado: #6e7585;

    /* El acento: lo que se toca */
    --tinta-acento:       #0052ff;
    --tinta-acento-hover: #1f66ff;
    --tinta-acento-claro: #7ea8ff;
    --tinta-sobre-acento: #ffffff;

    /* Estados */
    --tinta-ok:     #3ddc97;
    --tinta-alerta: #ffb020;
    --tinta-mal:    #ff5c5c;

    /* Los mismos colores como "R G B", para las transparencias:
       rgb(var(--tinta-acento-rgb) / 0.2). `vela` es el color que se le pone
       por encima a una superficie para levantarla: blanco en oscuro, tinta en claro. */
    --tinta-acento-rgb:       0 82 255;
    --tinta-acento-claro-rgb: 126 168 255;
    --tinta-ok-rgb:           61 220 151;
    --tinta-alerta-rgb:       255 176 32;
    --tinta-mal-rgb:          255 92 92;
    --tinta-vela-rgb:         255 255 255;
    --tinta-rejilla-rgb:      150 175 255;
    --tinta-sup-rgb:          13 15 20;
    --tinta-sup2-rgb:         19 22 32;
    --tinta-apagado-rgb:      110 117 133;
    --tinta-fondo-rgb:        5 6 10;

    --tinta-esquema: dark;
    --tinta-logo-inv: 1;   /* el lobo animado: 1 lo pinta de blanco, 0 de negro */
}

::selection {
    background: rgb(var(--tinta-acento-rgb) / 0.45);
    color: var(--tinta-texto-fuerte);
}

/* Estados: un punto y el texto, sin caja ni borde. */
.raver-badge,
.raver-badge-active,
.raver-badge-warning,
.raver-badge-expired,
.raver-badge-disabled,
.raver-badge-scheduled {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--tinta-texto) !important;
    font-family: var(--raver-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.raver-badge::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tinta-apagado);
}

.raver-badge-active::before    { background: var(--tinta-ok); }
.raver-badge-warning::before   { background: var(--tinta-alerta); }
.raver-badge-expired::before   { background: var(--tinta-mal); }
.raver-badge-scheduled::before { background: var(--tinta-acento); }
.raver-badge-disabled          { color: var(--tinta-suave) !important; }

/* Los días que faltan: solo el color del texto. */
.raver-days-pill {
    padding: 0 !important;
    background: transparent !important;
    font-family: var(--raver-mono);
    font-weight: 500;
    margin-top: 3px;
}

/* El estado de un cobro trae su color en línea: se queda con el color del
   texto y pierde la caja. */
.raver-cobro-estado {
    background: transparent !important;
    padding: 0 !important;
    font-family: var(--raver-mono);
    font-weight: 500;
    font-size: 11px;
}

/* Cifras, fechas y rótulos en monoespaciada: el toque técnico. */
.raver-cost-text,
.raver-cobro-monto,
.raver-price-amount,
.raver-stat-number,
.raver-cobro-periodo,
.raver-spec-label,
.raver-price-label,
.raver-services-table thead th,
.raver-logs-table th,
.raver-scheduled-orden,
.raver-proyecto-rotulo,
.raver-resumen-cobros span {
    font-family: var(--raver-mono) !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em;
}

.raver-cost-text,
.raver-cobro-monto,
.raver-price-amount {
    color: var(--tinta-texto) !important;
    letter-spacing: 0;
}

/* Íconos de cabecera: el dibujo solo, sin el cuadrado de color detrás. */
.raver-admin-header-icon {
    background: transparent !important;
    border: 1px solid var(--tinta-borde);
    border-radius: 4px;
    color: var(--tinta-suave) !important;
}

/* Botón principal: plano, sin sombra de color. */
.raver-btn-primary,
.raver-btn-action:not(.raver-btn-secondary) {
    box-shadow: none !important;
}

/* Las tablas: solo la caja redondeada que las envuelve y una línea entre
   filas. El tema les pone borde a la tabla y a cada celda, y un margen
   debajo: dentro de la caja se veía un segundo marco y una franja vacía. */
.raver-table-responsive {
    box-shadow: none !important;
}

.raver-services-table,
.raver-services-table th,
.raver-services-table td {
    border: 0 !important;
}

.raver-services-table {
    margin: 0 !important;
    background: transparent !important;
}

.raver-services-table thead th {
    border-bottom: 1px solid var(--tinta-borde) !important;
}

.raver-services-table tbody tr {
    border-bottom: 1px solid var(--tinta-borde);
}

.raver-services-table tbody tr:last-child {
    border-bottom: 0;
}

.raver-services-table tbody tr,
.raver-services-table tbody tr:nth-child(odd),
.raver-services-table tbody tr:nth-child(even) {
    background-color: transparent;
}

.raver-services-table tbody tr:hover {
    background-color: rgb(var(--tinta-rejilla-rgb) / 0.03);
}

.raver-services-table tbody tr > td {
    background-color: transparent !important;
}