/*
 * Reglas horizontal y vertical del lienzo (Vista → Mostrar → Regla).
 *
 * Las dos reglas viven en una capa absoluta sobre el área de edición y se
 * desplazan con el desplazamiento del lienzo (`translate` desde `ruler.js`), de
 * modo que el cero siempre queda alineado con la diapositiva. El contenedor
 * recibe la clase `has-ruler`, que reserva su grosor con un relleno para que la
 * diapositiva no quede debajo.
 */

.has-ruler {
    padding-top: var(--ppt-ruler-h);
    padding-left: var(--ppt-ruler-h);
}

.ruler-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    pointer-events: none;
}

.ruler {
    position: absolute;
    overflow: hidden;
    background: var(--ppt-panel-bg);
    color: var(--ppt-text-muted);
    font-family: var(--ppt-font-ui);
    font-size: 9px;
    user-select: none;
    pointer-events: auto;
}

.ruler--h {
    top: 0;
    left: 0;
    right: 0;
    height: var(--ppt-ruler-h);
    border-bottom: 1px solid var(--ppt-border);
}

.ruler--v {
    top: var(--ppt-ruler-h);
    left: 0;
    bottom: 0;
    width: var(--ppt-ruler-h);
    border-right: 1px solid var(--ppt-border);
}

/* ---------- Pista: la parte de la regla que cubre la diapositiva ---------- */

.ruler__track {
    position: absolute;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--ppt-border-soft);
}

.ruler--h .ruler__track { top: 0; height: 100%; }
.ruler--v .ruler__track { left: 0; width: 100%; }

.ruler__marks {
    position: absolute;
    inset: 0;
}

/* ---------- Marcas ---------- */

.ruler__tick {
    position: absolute;
    background: var(--ppt-text-disabled);
}

.ruler--h .ruler__tick {
    bottom: 0;
    width: 1px;
    height: 4px;
}

.ruler--v .ruler__tick {
    right: 0;
    height: 1px;
    width: 4px;
}

.ruler__tick.is-major {
    background: var(--ppt-text-muted);
}

.ruler--h .ruler__tick.is-major { height: 7px; }
.ruler--v .ruler__tick.is-major { width: 7px; }

.ruler__tick.is-major[data-label]::after {
    content: attr(data-label);
    position: absolute;
    color: var(--ppt-text-2);
    line-height: 1;
    white-space: nowrap;
}

.ruler--h .ruler__tick.is-major[data-label]::after {
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
}

.ruler--v .ruler__tick.is-major[data-label]::after {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

/* ---------- Franja de la forma seleccionada ---------- */

.ruler__band {
    position: absolute;
    background: var(--ppt-panel-bg);
    box-shadow: inset 0 0 0 1px var(--ppt-border);
}

.ruler--h .ruler__band { top: 0; height: 100%; }
.ruler--v .ruler__band { left: 0; width: 100%; }

/* ---------- Posición del puntero ---------- */

.ruler__pointer {
    position: absolute;
    background: var(--ppt-shape-selection);
    opacity: 0.75;
}

.ruler--h .ruler__pointer { top: 0; width: 1px; height: 100%; }
.ruler--v .ruler__pointer { left: 0; height: 1px; width: 100%; }

/* ---------- Marcadores de sangría ---------- */

.ruler__indent {
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -5px;
    cursor: ew-resize;
    pointer-events: auto;
}

.ruler__indent--firstLine {
    top: 1px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--ppt-text-2);
}

.ruler__indent--hanging {
    bottom: 6px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid var(--ppt-text-2);
}

.ruler__indent--left {
    bottom: 1px;
    width: 10px;
    height: 4px;
    background: var(--ppt-text-2);
}

.ruler__indent:hover { filter: brightness(1.6); }